百度地图调用

最新推荐文章于 2023-06-15 14:36:39 发布

最新推荐文章于 2023-06-15 14:36:39 发布 · 272 阅读

文章标签：

#百度地图调用 #百度地图应用 #baidu map api

google/baidu Map 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了使用百度地图API实现位置信息搜索及坐标反解析的功能，包括拖拽标记更新位置信息和在指定范围内搜索地点等实用案例。

本来一直用着googleMap …… 后来发现google开始做每天做2w5k的api调用限制，就重写一次百度地图的应用。
baiduMap类参考： [url]http://openapi.baidu.com/map/classReference.html[/url]

做的是一个位置信息（城市-区-街道）搜索的功能。发现百度地图调用起来还是很方便的。整理了代码，贴上：


var gc = new BMap.Geocoder();
	//拖拽事件;
	marker.addEventListener("dragend", function(e){   
	  //alert("拖拽后的位置：" + e.point.lng + ", " + e.point.lat);  
	  $("#this_lat").text(e.point.lat);
	  $("#this_lng").text(e.point.lng); 
	    var pt = e.point;
		//反解析地址
    	gc.getLocation(pt, function(rs){
        var addComp = rs.addressComponents;
        $("#local_address").text(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
		});   
	})

这个是反解析坐标为地址，city district street，这些在客户录入位置信息的时候可以很好的提供搜索作用。
还有一个例子是改自百度API自带的demo，比较好玩。


//范围demo
	var circle = new BMap.Circle(point,5000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.1, strokeOpacity: 0.1});
    map.addOverlay(circle);
    var local =  new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});  
    var bounds = getSquareBounds(circle.getCenter(),circle.getRadius());
    local.searchInBounds("酒店",bounds); 
	//new BMap.Circle(setCenter(center:point));

简单的绘制半径5000米的圆，然后在圆形的bounds里面搜索关键字酒店。发个截图：
[img]http://dl.iteye.com/upload/attachment/580995/9bd488ff-abf3-325e-a609-1180af22daba.png[/img]

下面这个是api里面的结果面板:

[img]http://dl.iteye.com/upload/attachment/580997/971ace12-8413-3900-bfdd-f65df0fdaf21.png[/img]
代码很简单直接进行调用setSearchCompleteCallback的回调函数写入html就好了。


function go_search(){
	var local = new BMap.LocalSearch(map, {renderOptions: {map: map, panel: "results_info"}});
	map.panBy(point);
	keyword=$("#address_key").val()
	local.search(keyword);
	local.getResults()
	local.setSearchCompleteCallback(function(searchResult){
	var poi = searchResult.getPoi(0);
		//alert(poi.point.lng+" "+poi.point.lat);
		document.getElementById("info").innerHTML = "<b>" + keyword + "</b>" + poi.point.lng + "," + poi.point.lat;
	});
}