百度地圖之位址解析和瀏覽器定位以及添加可拖拽標註,拖拽標註
這裡的百度地圖demo包括了常見的:位址解析、瀏覽器定位、IP定位、可拖拽標註
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta name="viewport" content="initial-scale=1.0, user-scalable=no"/><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4itF2ygdKkIfshFlQggs7DZA"></script><input type="text" id="address"/><input type="button" value="地圖查看" onclick="showMap();"/><div id="lnglat" style="color:red;">當前座標:0,0</div><div id="allmap" style="width:400px; height:400px; overflow:hidden; margin:0;"></div><script type="text/javascript">/** * 百度地圖API功能 */var map = new BMap.Map('allmap'); //建立Map執行個體//<c:if test='${empty awardInfo.baiduMapLng}'>//map.centerAndZoom('哈爾濱市', 12);//</c:if>//<c:if test='${not empty awardInfo.baiduMapLng}'>//var point = new BMap.Point(${awardInfo.baiduMapLng}, ${awardInfo.baiduMapLat});//map.centerAndZoom(point, 18);//var marker = new BMap.Marker(point);//map.addOverlay(marker);//marker.enableDragging();//marker.addEventListener('dragend', function(e){//document.getElementById('lnglat').innerHTML = '當前座標:' + e.point.lng + ", " + e.point.lat;//});//</c:if>//上面使用的是JSP中的C標籤,適用於需要讀取資料庫中儲存的座標,然後將位置資訊顯示在地圖中,並添加可拖拽標註//var point = new BMap.Point(116.404, 39.915); //建立點座標//map.centerAndZoom(point, 15); //初始化地圖(設定中心點座標和地圖縮放層級)map.centerAndZoom("哈爾濱市", 12); //初始化地圖(設定城市名和地圖縮放層級)map.addControl(new BMap.NavigationControl()); //添加平移縮放控制項map.addControl(new BMap.ScaleControl()); //添加比例尺控制項map.addControl(new BMap.OverviewMapControl()); //添加縮減地圖控制項map.enableScrollWheelZoom(); //啟用滾輪放大縮小//map.disableDragging(); //禁止地圖拖拽//map.enableDragging(); //允許地圖拖拽(預設為允許)/** * 瀏覽器定位(狀態代碼說明如下) * BMAP_STATUS_SUCCESS : 檢索成功,對應數值"0" * BMAP_STATUS_CITY_LIST : 城市列表,對應數值"1" * BMAP_STATUS_UNKNOWN_LOCATION : 位置結果未知,對應數值"2" * BMAP_STATUS_UNKNOWN_ROUTE : 導航結果未知,對應數值"3" * BMAP_STATUS_INVALID_KEY : 非法密鑰,對應數值"4" * BMAP_STATUS_INVALID_REQUEST : 非法請求,對應數值"5" * BMAP_STATUS_PERMISSION_DENIED : 沒有許可權,對應數值"6"(自1.1新增) * BMAP_STATUS_SERVICE_UNAVAILABLE: 服務不可用,對應數值"7"(自1.1新增) * BMAP_STATUS_TIMEOUT : 逾時,對應數值"8"(自1.1新增) */var geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(function(r){console.log('瀏覽器定位的狀態代碼為:' + this.getStatus());if(this.getStatus() == BMAP_STATUS_SUCCESS){var mk = new BMap.Marker(r.point);map.addOverlay(mk);map.panTo(r.point);document.getElementById('lnglat').innerHTML = '當前座標:' + r.point.lng + ", " + r.point.lat;}else{//switch(this.getStatus()){//case 6 : document.getElementById('lnglat').innerHTML = '請求未授權,無法提供定位服務'; break;//default: document.getElementById('lnglat').innerHTML = '無法擷取當前位置,您可移動地圖查看'; break;//}new BMap.LocalCity().get(function(result){console.log('IP定位擷取當前城市:' + result.name);map.setCenter(result.name);});}},{enableHighAccuracy:true});/** * 地圖查看 */function showMap(){var address = document.getElementById('address').value;if('' == address){document.getElementById('lnglat').innerHTML = '請輸入地址';return;}//建立位址解析器執行個體var myGeo = new BMap.Geocoder();//將位址解析結果顯示在地圖上,並調整地圖視野myGeo.getPoint(address, function(point){if(point){map.centerAndZoom(point, 16);map.clearOverlays(); //清除地圖上所有的標記(map.removeOverlay(marker)可清除單個標註)var marker = new BMap.Marker(point); //建立標註map.addOverlay(marker); //將標註添加到地圖中marker.enableDragging(); //設定標註可拖拽(預設為不可拖拽)//百度座標是先經度,再緯度,即Point(lng, lat)//Google座標的順序與百度恰好相反,是(lat, lng)//也可這樣擷取座標-------------------->marker.getPosition().lng和marker.getPosition().lat;document.getElementById('lnglat').innerHTML = '當前座標:' + point.lng + ", " + point.lat;//監聽標註的拖拽事件,以便即時擷取標註拖拽後的座標marker.addEventListener('dragend', function(e){document.getElementById('lnglat').innerHTML = '當前座標:' + e.point.lng + ", " + e.point.lat;});}}, '哈爾濱市');}</script>
用js生產百度地圖的代碼,包含搜尋,定位加標籤
var map;
var lng="",lat="";
function doSearch() {
map = new BMap.Map("container"); //顯示地圖的DIV
map.centerAndZoom(new BMap.Point(121.342703, 31.247664), 15);
var marker = new BMap.Marker(new BMap.Point(121.342703, 31.247664)); // 建立標註
map.addOverlay(marker); // 將標註添加到地圖中
marker.enableDragging();
//下面這個方法是 拖動地圖中的標註,鬆開滑鼠得到當前標註的經緯度
marker.addEventListener("dragend", function (e) {
lng = e.point.lng;
lat = e.point.lat;
})
}
頁面引用這個:<script type="text/javascript" src="api.map.baidu.com/api?v=1.3"></script>
lng,lat:是經緯度。
百度地圖不可以用滑鼠拖拽定位了,是什地方出了問題?我試了滑鼠設定,百度工具列,重新裝了瀏覽器,都沒有
查查病毒