Google map api v3 怎样将搜索结果显示出来

就像Google地图本身，输入关键字搜索以后，网页左边会显示所有匹配的搜索结果列表。怎样才能做到这样？Googlemapapiv3本身好像没有百度那样的结果面板，只有自己... 就像Google地图本身，输入关键字搜索以后，网页左边会显示所有匹配的搜索结果列表。
怎样才能做到这样？
Google map api v3本身好像没有百度那样的结果面板，只有自己创建面板，但是我调用搜索返回的results对象，无法输出结果的详细地址内容。

求解展开

 我来答

4个回答

#合辑# 面试问优缺点怎么回答最加分？

huitudou060606
推荐于2016-11-23 · TA获得超过148个赞

知道答主

回答量：67

采纳率：100%

帮助的人：60.9万

我也去答题访问个人页

关注

展开全部

你的查询结果需要显示在页面上时，需要一个容器来放置，一般是一个<div></div>容器，我最近正好在做这一块，下面是我写的一个路线查询的例子，你可以看看有三对<div></div> 分别用来放置标题，地图和查询结果代码如下，你可以建一个.html格式的看看。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Driving</title>
<link rel="stylesheet" type="text/css" href="style.css"></link>
<script
src="http://ditu.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"
type="text/javascript"></script>
<STYLE type=text/css>
#frmholder {
width: 1000px;
heigh:100px;
border: 1px solid #000;
border-bottom: 0;
text-align: center;
background: #fff;
}
#mapholder {
width: 700px;
height: 600px;
float: left;
border: 1px solid #000;
background: #fff;
}
#dirholder {
width: 300px;
float: left;
border: 1px solid #000;
height: 600px;
border-left: 0;
background: #fff;
overflow: auto;
}
</STYLE>
<script type="text/javascript">
var cenx = 31.288720;
var ceny = 120.665674;
var stzoom=15;
var map;
var directions;
function init(){
if (GBrowserIsCompatible()){
var mapOptions = {
googleBarOptions : { style : "new"}
}
map=new GMap2(document.getElementById("mapholder"));
var loc = new GLatLng(cenx,ceny);
map.setCenter(loc,stzoom);
map.addControl(new GLargeMapControl());

//GHierarchicalMapTypeControl 通常需要一些初始化才能以正确的顺序显示联级"菜单"中的地图类型。
var mapControl = new GHierarchicalMapTypeControl();

//设置地图类型菜单关系
mapControl.clearRelationships();
mapControl.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, "Labels", false);
map.addControl(mapControl);
//map.addControl(new GMapTypeControl());//词句添加的地图模型为一般的地图和卫星地图
directions = new GDirections(map);

//添加地图缩略图
var oerviewMapControl = new GOverviewMapControl();
map.addControl(oerviewMapControl);

//draggable 表示该标记是否可以移动，true为可以 false为否
var marker = new GMarker(loc, {
draggable:true
});
GEvent.addListener(marker, "dragstart", function(){
map.closeInfoWindow();
});
GEvent.addListener(marker, "dragend", function(){
marker.openInfoWindowHtml("Just bouncing along...");
});
map.addOverlay(marker);
map.openInfoWindow(map.getCenter(),document.createTextNode("ZhiHuiGuan:Tong Yuan Road Information Building Two Floor"));
map.enableGoogleBar();
}
}
function getdirections() {
var fmaddr = document.getElementById("fromaddress").value;
var toaddr = document.getElementById("toaddress").value;
var avoid = document.getElementById("avoidHighways").value;

if (!directions) {
directions = new GDirections(map);
}
GEvent.addListener(directions, "addoverlay", function() {
var route = directions.getRoute(0);
var bounds = new GLatLngBounds();
var disp = "";
disp = disp + "<h4>Directions</h4>"+directions.getDistance().html+" about "+directions.getDuration().html+"<br /><hr size='1' noshade='noshade' />";
disp = disp + "<table>";
for(i=0;i< route.getNumSteps();i++) {
var stp = route.getStep(i);
bounds.extend(stp.getLatLng());

var clr = (i%2)?"#ccc":"#eee";
disp = disp + "<tr valign='top'><td style='background:"+clr+";'>" + stp.getDescriptionHtml() + "</td>";
disp = disp + "<td style='background:"+clr+";'>" + stp.getDistance().html+"</td></tr>";
}
disp = disp + "</table>";
document.getElementById('dirholder').innerHTML = disp;
map.setZoom(map.getBoundsZoomLevel(bounds));
map.setCenter(loc,stzoom);
});
GEvent.addListener(directions, "error", function(){
alert("no find way!");
});
if (avoid == 1) {
directions.load("from: " + fmaddr + " to: " + toaddr, {
getSteps: true,
avoidHighways: true});
}else{
directions.load("from: " + fmaddr + " to: " + toaddr, {
getSteps: true,
avoidHighways: false});
}
}
window.onload=init;
window.onunload=GUnload;
</script>

</head>
<body>
<div id="frmholder">
<br />
<form onsubmit="getdirections();return false;">
<h4>This Driving travelMode:</h4>
<br/>
From Address:
<input size="10" id="fromaddress" value=" " />
To Address:
<input size="10" id="toaddress" value=" " />
<th>AvoidHighways</th>
<td> <select id="avoidHighways" name="avoidHighways">
<option value="1">yes</option>
<option value="2">no</option>
</select>
<input type="submit" value="get road" />
</form>

</div>
<div id="mapholder"></div>
<div id="dirholder"></div>

</body>
</html>

已赞过 已踩过<

评论收起

狂飞炜SL
2012-03-22 · TA获得超过1122个赞

知道答主

回答量：629

采纳率：0%

帮助的人：273万

我也去答题访问个人页

关注

展开全部

拿分走人：
function init_map(arr){
	   	    var latlng;
	   	    var zoom_pam;
	   		//地图中心坐标
	   		if(arr.length == 1){
	   	    	latlng = new google.maps.LatLng(arr[0].get('latitude'),arr[0].get('longitude'));
	   	    	zoom_pam = 16;
	   	    }else{
	   	    	latlng = new google.maps.LatLng(34.075651,107.868527);
	   	    	zoom_pam = 4;
	   	    }
		    var myOptions = {
		       		zoom: zoom_pam,                  
			   		mapTypeId: google.maps.MapTypeId.ROADMAP,                  
			   		center:latlng               
			   		}; 
		   	//生成google地图                
	   	    var map = new google.maps.Map(document.getElementById('map'),myOptions); 
	   		Ext.get("img_id").remove(); 
			setMarckers(map,arr);  
	   } 
	   function setMarckers(map,locations){
	   		for(var i = 0;i < locations.length;i++){
	   			var machine_number = locations[i].get('machine_number');
	   		    var longitude = locations[i].get('longitude');
	   		    var latitude = locations[i].get('latitude');
	   		    var address = locations[i].get('address');
	   		    var title = '当前机号:' + machine_number + '<br/>经度：'+longitude+'<br/>纬度：'+latitude+'<br/>地址:'+address;
	   			var mylatlng = new google.maps.LatLng(latitude,longitude);
	   			var marker = new google.maps.Marker({                    
	       			position: mylatlng,                    
		   			map: map                 
	   			});
				set_event(map,marker,title);
		   	}	
		function set_event(map,marker,title){
				var infowindow = new google.maps.InfoWindow({                    
	        		content: title                
				});
				google.maps.event.addListener(marker,'mouseover',function() {	
		   				infowindow.open(map,marker);                
		   		});               
		   		google.maps.event.addListener(marker, 'mouseout',function() {                  
		   				infowindow.close();                
		   		});
		}    	
	   }



本回答被网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

674638182
2012-03-22 · 超过10用户采纳过TA的回答

知道答主

回答量：52

采纳率：0%

帮助的人：28.7万

我也去答题访问个人页

关注

展开全部

肯定是可以得到结果的，我做过。如果有什么疑问，可以追问。

已赞过 已踩过<

评论收起

DreamYanhuo
2012-03-23

知道答主

回答量：69

采纳率：0%

帮助的人：28万

我也去答题访问个人页

关注

展开全部

请问这个问题解决了吗？我也遇到这个问题了，很想知道结果怎么样了！！！

已赞过 已踩过<

评论收起

更多回答（2）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

Google map api v3 怎样将搜索结果显示出来

为你推荐：