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 }