百度地圖mark和label設置

 1 
項目中使用百度地圖，查看api，js版，申請開發者密鑰，代碼
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=本身申請的ak"></script>
寫進html中。
//地圖
 2 init: function() {
 3 var map = new BMap.Map("allmap");
 4 //第1步：設置地圖中心點，北京市 
 5 map.centerAndZoom("北京", 5); //設置初始化顯示的城市和zoom值移動端通常3-11
 6 map.enableScrollWheelZoom(true); //啓用滾輪放大縮小，默認禁用 
 7 map.enableContinuousZoom(); //啓用地圖慣性拖拽，默認禁用 
 8 map.enableInertialDragging();
 9 // 添加帶有定位的導航控件 
10 var navigationControl = new BMap.NavigationControl({
11 // 靠右上角位置 
12 anchor: BMAP_ANCHOR_TOP_RIGHT,
13 // LARGE類型 
14 type: BMAP_NAVIGATION_CONTROL_LARGE,
15 // 啓用顯示定位 
16 enableGeolocation: true,
17 offset: new BMap.Size(15, 200)//修改控件位置偏移
18 });
19 
20 map.addControl(navigationControl);
21 
22 //後臺應該返回的數據假的數據
23 var markerConfig = {
24 map: map,
25 id: ["1", "2", "3", "4", "5", "6", "7"],
26 arr: [
27 [116.507754, 40.010276, "地址：北京市東城區王府井大街88號樂天銀泰百貨八層"],
28 [116.39852, 39.919141, "地址：北京市東城區東華門大街"],
29 [116.272038, 39.869097, "地址：北京市東城區正義路甲5號"],
30 [116.411168, 39.95322, "地址：北京市東河北5號"],
31 [116.299059, 40.000549, "地址：北京市東希爾頓大酒店"],
32 [116.607789, 39.938174, "地址：北京市環洋大廈"],
33 [116.12480570072432, 35.80160624971607, "地址：梁山"]
34 
35 ],
36 imgs: ["http://api.map.baidu.com/img/markers.png"]
37 }
38 indexJs.autoPoint(markerConfig);
39 },
40 autoPoint: function(markerConfig) {
41 /**
42 * [處理經緯度二維數組]
43 * @param {[type]} arr [傳入數組]
44 * @return {[type]} [description]
45 */
46 function pointDeal(arr) {
47 var arrs = [];
48 for (var i = 0; i < arr.length; i++) {
49 arrs.push(new BMap.Point(arr[i][0], arr[i][1]));
50 }
51 return arrs;
52 };
53 arr = pointDeal(markerConfig.arr); //處理經緯度爲百度座標點
54 // var icon = new BMap.Icon(markerConfig.imgs, new BMap.Size(23, 25), {
55 // offset: new BMap.Size(10, 25)
56 // });
57 for (var i = 0; i < arr.length; i++) {
58 var marker = new BMap.Marker(arr[i], {
59 icon: new BMap.Icon(markerConfig.imgs, new BMap.Size(23, 25), {
60 offset: new BMap.Size(10, 25),
61 imageOffset: new BMap.Size(0, 0 - i * 25)
62 })
63 });
64 label = new BMap.Label(markerConfig.id[i], {
65 offset: new BMap.Size(20, 0)
66 }); //建立marker點的標記,這裏注意下,由於百度地圖能夠對label樣式作編輯,
67 label.setStyle({
68 display: "none"
69 }); //對label 樣式隱藏 
70 marker.setLabel(label); //把label設置到maker上 
71 markerConfig.map.addOverlay(marker);
72 //設置事件
73 marker.addEventListener("click", function(e) {
74 處理
75 })
76 };
77 }