百度地图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 }

 

转载于:https://www.cnblogs.com/marsqi/p/6893721.html