搜尋某個地方通過百度地圖獲取到座標
阿新 • • 發佈：2018-12-30
本文轉載，原文地址：https://blog.csdn.net/shi_yi_fei/article/details/77373492
根據一個地名來查詢地圖上的位置，並找出最相近的一個地址的座標，通過一個JSAPI來實現，並標註所有相關的地址的座標；
同時，如果未查到改地址，則在頁面上手工輸入一個新地址來進行查詢。
主要使用了 JSAPI的 LocalSearch 以及其回撥方法，用的百度地圖JSAPI版本為2.0!
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html{width: 100%;height: 100%; margin:0;font-family:"微軟雅黑";} #l-map{height:800px;width:100%;float:left;} #r-result{width:20%;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yoursecret"></script> <title>拾取地址的座標</title> </head> <body> <div id="l-map"></div> <div id="r-result"> 請輸入地址： <br/> <input type="text" id="txtKeyword" /> <br/> <button onclick="searchAddr()">搜尋</button> </div> </body> </html> <script type="text/javascript"> // 百度地圖API功能 map = new BMap.Map("l-map"); // 建立Map例項 map.centerAndZoom("{$address}", 12); map.enableScrollWheelZoom(); //啟用滾輪放大縮小，預設禁用 map.enableContinuousZoom(); //啟用地圖慣性拖拽，預設禁用 map.addControl(new BMap.NavigationControl()); //新增預設縮放平移控制元件 map.addControl(new BMap.OverviewMapControl()); //新增預設縮略地圖控制元件 map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT })); //右下角，開啟 local = new BMap.LocalSearch(map, { renderOptions: {map:map,autoViewport:true,selectFirstResult:false}, pageCapacity:10 }); myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), { offset: new BMap.Size(10, 25), imageOffset: new BMap.Size(0, 0 - 10 * 25) }); var keys = new Array("{$address}"); local.setSearchCompleteCallback(function (searchResults) { console.log(searchResults); if (typeof(searchResults) == "undefined" ) { alert("百度API沒有搜尋到該地址"); return; } if(searchResults.length>0) { var searchResult = searchResults[0]; }else { var searchResult = searchResults; } console.log(searchResult); var contents = []; for(var i=0; i<searchResult.getCurrentNumPois(); i++) { //獲得需要得到的座標 var poi = searchResult.getPoi(i); if (!poi) { alert("百度API沒有搜尋到該地址"); } // console.log(poi); //設定中心點 map.centerAndZoom(poi.point, 13); // 建立標註，為要查詢的地方對應的經緯度 var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat),{ icon: myIcon }); //alert("["+poi.point.lng+","+poi.point.lat+"]"); //在地圖上新增標識 map.addOverlay(marker); //點選標識後顯示的內容 contents[i] = "你要查詢的地方:【"+poi.title+"】<br/>地址："+poi.address+"<br/>經度："+poi.point.lng+"<br/>緯度："+poi.point.lat; marker.setTitle(contents[i]); //新增點選事件監聽 marker.addEventListener("click", makerClick); if (i==0) { var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + contents[0] + "</p>"); marker.openInfoWindow(infoWindow); } } }); local.search(keys); var makerClick = function() { var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + this.getTitle() + "</p>"); this.openInfoWindow(infoWindow); } function searchAddr() { var keys = document.getElementById("txtKeyword").value; local.search(keys); } </script>
效果
