经过一些学习百度地图的API,感觉这个功能用处很不错。可以定位到城市或者区。
主要思路就是利用LocalSearch类,通过输入城市中文找到相应的城市,然后出发onSearchComplete事件,把返回的数据第一条的坐标点设置为中心点。百度地图的切换城市就可以这么实现,当然人家可能另有更快捷的私密应用未公开。
代码如下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>设置城市demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="https://api.map.baidu.com/api?key=79d13dd2c1076b1ad827484228ee4dea&v=1.1&services=true" ></script> </head> <body> <input type="text" id="cityName" /> <input type="button" οnclick="setCity()" value="设置" /> <div id="container" style="width:500px;height:400px"></div> <script> var map = new BMap.Map("container"); map.addControl(new BMap.NavigationControl()); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); var search = new BMap.LocalSearch("中国", { onSearchComplete: function(result){ if (search.getStatus() == BMAP_STATUS_SUCCESS){ var res = result.getPoi(0); var point = res.point; map.centerAndZoom(point, 11); } },renderOptions: { //结果呈现设置, map: map, autoViewport: true, selectFirstResult: true } ,onInfoHtmlSet:function(poi,html){//标注气泡内容创建后的回调函数,有了这个,可以简单的改一下返回的html内容了。 alert(html.innerHTML) }//这一段可以不要,只不过是为学习更深层次应用而加入的。 }); function setCity(){ search.search(document.getElementByIdx_x("cityName").value); } </script> </body> </html>