百度地圖:新增覆蓋物(描點)

臨走之前寫一篇。

當時(2015年)我曾和幾個同學玩過一下基於的百度地圖API開發。

當時是在Android上寫。寫了點獲取當前位置、新增地圖覆蓋物之類的。

現在在網上找了點javascript的程式碼,直接在網頁(html)上就可以看了。

為什麼現在又在玩這個了呢?因為小學妹工作需要……

N個地點,讀個經緯度,再在某個地圖軟體(某個GIS系統吧)上描出來,最後給領導看……

於是,直接用python html硬編碼了…啥叫硬編碼?……

說得繞口一點就是,用程式碼寫我要寫的程式碼。for迴圈地址,通過for生成html程式碼……

    
<!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:"微軟雅黑";}
#allmap {width: 100%; height:90%; overflow: hidden;}
#result {width:100%;font-size:12px;}
dl,dt,dd,ul,li{
margin:0;
padding:0;
list-style:none;
}
p{font-size:12px;}
dt{
font-size:14px;
font-family:"微軟雅黑";
font-weight:bold;
border-bottom:1px dotted #000;
padding:5px 0 5px 5px;
margin:5px 0;
}
dd{
padding:5px 0 0 5px;
}
li{
line-height:28px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=這裡填你自己申請到的ak"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<!--載入檢索資訊視窗-->
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script> 
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
<title>廣州市</title>
</head>
<body>
<div style='text-align:center; height:30px; margin-top:10px;'>廣州市市級</div>
<div id="allmap" style="overflow:hidden;zoom:1;position:relative;">    
<div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
</div>
</body>
</html>
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("map");
var point = new BMap.Point(113.3239,23.0897); //中心點
map.addControl(new BMap.ScaleControl());    //比例尺
map.centerAndZoom(point,12); //設定中心點,縮放層級
setTimeout(function(){
map.setZoom(14);   
}, 1000);  //1秒後放大到14級
map.enableScrollWheelZoom(true);
// 建立地址解析器例項
var myGeo = new BMap.Geocoder();
// 將地址解析結果顯示在地圖上,並調整地圖視野
myGeo.getPoint("廣州市政府", function(point){
if (point) {
map.centerAndZoom(point, 16);
map.addOverlay(new BMap.Marker(point));
}else{
alert("您選擇地址沒有解析到結果!");
}
}, "廣州市");
map.enableScrollWheelZoom();  
var overlays = [];
var overlaycomplete = function(e){
overlays.push(e.overlay);
};
var styleOptions = {
strokeColor:"red",    //邊線顏色。
fillColor:"red",      //填充顏色。當引數為空時,圓形將沒有填充效果。
strokeWeight: 3,       //邊線的寬度,以畫素為單位。
strokeOpacity: 0.8,       //邊線透明度,取值範圍0 - 1。
fillOpacity: 0.6,      //填充的透明度,取值範圍0 - 1。
strokeStyle: 'solid' //邊線的樣式,solid或dashed。
}
//例項化滑鼠繪製工具
var drawingManager = new BMapLib.DrawingManager(map, {
isOpen: false, //是否開啟繪製模式
enableDrawingTool: true, //是否顯示工具欄
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(5, 5), //偏離值
},
circleOptions: styleOptions, //圓的樣式
polylineOptions: styleOptions, //線的樣式
polygonOptions: styleOptions, //多邊形的樣式
rectangleOptions: styleOptions //矩形的樣式
});  
//新增滑鼠繪製工具監聽事件,用於獲取繪製結果
drawingManager.addEventListener('overlaycomplete', overlaycomplete);
function clearAll() {
for(var i = 0; i < overlays.length; i  ){
map.removeOverlay(overlays[i]);
}
overlays.length = 0   
}
var MAX = 50;
var markers = [];
var pt = null;
var i = 0;
for (; i < MAX; i  ) {
pt = new BMap.Point(Math.random() * 40   85, Math.random() * 30   21);
markers.push(new BMap.Marker(pt));
}
//最簡單的用法,生成一個marker陣列,然後呼叫markerClusterer類即可。
var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
markerClusterer.setGridSize(200);
var myStyles = [{
url:'imgs/map-mark.png',  //圖示路徑
size: new BMap.Size(30, 27),  //圖示大小
textColor: '#000',  //文字顏色
textSize: 14  //字型大小
}];
markerClusterer.setStyles(myStyles);
</script>

當然,新增覆蓋物也可以直接通過指定經緯度來新增,例如。

var point = new BMap.Point(lng, lat);  
map.centerAndZoom(point, 16);
map.addOverlay(new BMap.Marker(point));

最後的效果就是這樣…