百度地图API调用学习

Posted on

百度地图实践中…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
var map = new BMap.Map("container");
var point = new BMap.Point(116.404,39.915);
var opts = {offset:new BMap.Size(150,18)};
var mapStyle = {style:"hardedge"};//设置界面风格。自定义风格可设置颜色等生成JSON。
var marker = new BMap.Marker(point);//添加标注点
map.addOverlay(marker);
marker.enableDragging();
marker.addEventListener('dragend',function(e){
	alert('当前位置'+e.point.lng+','+e.point.lat);//拖拽时显示相应坐标
  })
map.setMapStyle(mapStyle);
map.centerAndZoom(point,13);//地图级别，数字越小尺度越大。point为中心点
map.enableScrollWheelZoom(true);
map.addControl(new BMap.NavigationControl());//添加平移缩放控件
	//若改变缩放控件的外观，定义一个opts对象{type:BMAP_NAVIGATION_CONTROL_SMALL}即可
map.addControl(new BMap.ScaleControl(opts));//添加比例尺控件，opts设置偏移像素位置
	/*window.setTimeout(function(){
		map.panTo(new BMap.Point(116.109,39.918))
	},2000);*/
	//自定义控件
class ZoomControl extends BMap.Control{
	constructor() {
			super();//继承父
			this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
		this.defaultOffset = new BMap.Size(100,10);
		}
    initialize(map){      
        var div = document.createElement("div");      
        div.appendChild(document.createTextNode("放大2级"));    
        gotCss(div);
        // 绑定事件，点击一次放大两级    
        div.onclick = function(e){  
        map.zoomTo(map.getZoom() + 2);    
        }    
    // 添加DOM元素到地图中   
        map.getContainer().appendChild(div);    
        return div;    
   }
}
function gotCss(div){
    div.style.cursor = "pointer";    
    div.style.border = "1px solid gray";    
    div.style.backgroundColor = "white"; 
	return div;
	}
var myZoomCtrl1 = new ZoomControl();
var myZoomCtrl2 = new ZoomControl();
myZoomCtrl2.defaultOffset = new BMap.Size(200,60);
map.addControl(myZoomCtrl1);
map.addControl(myZoomCtrl2);