本来一直用着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; }); }