地圖座標位置顯示
阿新 • • 發佈：2018-12-15
<!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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= 寫你自己的 沒有的話申請一個"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script> <title>地圖展示</title> </head> <body> <div style="width: 800px;height: 500px;border:solid 1px;margin-left: 300px;margin-top:50px;"> <div id="allmap"> </div> </body> </html> <script type="text/javascript"> // 百度地圖API功能 var map = new BMap.Map("allmap", {enableMapClick:false}); // 建立Map例項 enableMapClick:false 構造底圖時，關閉底圖可點功能 var point = new BMap.Point(116.404, 39.915); //構造點座標 map.centerAndZoom(point, 5); // 初始化地圖,設定中心點座標和地圖級別 var overView = new BMap.OverviewMapControl(); //BMAP_ANCHOR_BOTTOM_RIGHT 控制元件將定位到地圖的右下角 var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT}); map.addControl(overView); //新增預設縮略地圖控制元件 map.addControl(overViewOpen); //右下角，開啟 map.enableScrollWheelZoom(true); //開啟滑鼠滾輪縮放 // map.disableDragging(); //禁止拖拽 // map.enableDragging(); //開啟拖拽 map.setCurrentCity("北京"); /* 弧線 */ var beijingPosition=new BMap.Point(116.432045,39.910683), hangzhouPosition=new BMap.Point(120.129721,30.314429), taiwanPosition=new BMap.Point(121.491121,25.127053); var cpoints = [beijingPosition,hangzhouPosition, taiwanPosition]; var curve = new BMapLib.CurveLine(cpoints, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5}); //建立弧線物件 map.addOverlay(curve); //新增到地圖中 var c_json_data = [[121.491121,25.127053],[120.129721,30.314429],[116.432045,39.910683]]; var arr_datas = []; for (var i = 0; i < c_json_data .length; i ++) { var arr_data = "arr_data_" + i; arr_data = new BMap.Point(c_json_data[i][0],c_json_data[i][1]); arr_datas[i] = arr_data; } var json_datasc = []; /* 逆地理編碼 */ var index = 0; var myGeo = new BMap.Geocoder(); /* for (var i = 0;i<arr_datas.length;i++) { var pt = arr_datas[i]; myGeo.getLocation(pt,function(rs){ var addComp = rs.addressComponents; console.log(rs.point.lng+","+rs.point.lat+","+addComp.province + "," + addComp.city + "," + addComp.district + "," + addComp.street + ", " + addComp.streetNumber); }); } */ bdGEO(0); var json_datas = []; function bdGEO(){ var pt = arr_datas[index]; geocodeSearch(pt); var json_data = "json_datas_"+ index; index++; } function geocodeSearch(pt){ if(index < arr_datas.length-1){ setTimeout(window.bdGEO,400); } myGeo.getLocation(pt, function(rs){ var addComp = rs.addressComponents; console.log(rs.point.lng+","+rs.point.lat+","+addComp.province + "," + addComp.city + "," + addComp.district + "," + addComp.street + ", " + addComp.streetNumber); json_data = [rs.point.lng,rs.point.lat,addComp.province+ "，" +addComp.city+addComp.district+addComp.street+addComp.streetNumber]; json_datas[index-1] = json_data; if(index == arr_datas.length){ alert(json_datas); showJson(json_datas); } }); } function showJson(json_datas){ /* 新增多個點 參考資訊視窗 示例 給多點新增資訊 */ /* var json_datacs = [[121.491121,25.127053,"地址：北京市東城區王府井大街88號樂天銀泰百貨八層"], [120.129721,30.314429,"地址：北京市東城區東華門大街"], [116.432045,39.910683,"地址：北京市東城區正義路甲5號"]]; */ for (var i = 0; i < json_datas.length; i ++) { var c_point = new BMap.Point(json_datas[i][0],json_datas[i][1]);//建立標註 var content = json_datas[i][2]; //地址內容 addMarker(i,c_point,content); } /* 為多個點 新增資訊視窗 */ var opts = { width : 250, // 資訊視窗寬度 height: 80, // 資訊視窗高度 title : "資訊視窗" , // 資訊視窗標題 enableMessage:true//設定允許資訊窗傳送短息 }; function addMarker(i,c_point,content){ var marker = new BMap.Marker(c_point); map.addOverlay(marker); if(i==0){ marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫 //panTo()方法將讓地圖平滑移動至新中心點 如果移動距離超過了當前地圖區域大小，則地圖會直跳到該點 window.setTimeout(function(){ map.panTo(c_point); }, 1000); } addClickHandler(content,marker); } function addClickHandler(content,marker){ marker.addEventListener("click",function(e){ openInfo(content,e)} ); } function openInfo(content,e){ var p = e.target; var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); var infoWindow = new BMap.InfoWindow(content,opts); // 建立資訊視窗物件 map.openInfoWindow(infoWindow,point); //開啟資訊視窗 } } /* 為多個點 新增資訊視窗 結束 */ /* setTimeout(function(){ map.panTo(new BMap.Point(113.262232,23.154345)); //兩秒後移動到廣州 setTimeout(function(){ map.setZoom(11); }, 2000); //2秒後放大到11級 }, 2000);*/ </script>