百度地图调用

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

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

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里面搜索关键字 酒店。发个截图：


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


代码很简单直接进行调用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;
	});
}

评论

1 楼 zhonglunshun 2014-12-30  

能否给我demo
[e-mail]