代码有不规范的地方还望多多包含. 欢迎私信
项目需求:
在地图上标记附近的门店,
点击标记物弹出覆盖物,
点击覆盖物切换到对应的门店,
1,script 标签引入
<script src="http://api.map.baidu.com/api?v=2.0&ak = 密钥"></script>
2, 使用
html 节点添加 id>>>
<div id="container"></div>
js>>>>
- let [lng,lat,city,list] = [114.0259736573215,22.546053546205247,'深圳',[...]]
- // 创建 Map 实例
- let map = new BMap.Map("container",{enableMapClick:true});
- // 初始化地图, 设置中心点坐标和地图级别
- map.centerAndZoom(new BMap.Point( lng,lat ), 15);
- // 添加地图类型控件
- map.addControl(new BMap.MapTypeControl()); // 地图, 卫星, 三维切换控件
- // 设置地图显示的城市 此项是必须设置的
- map.setCurrentCity(city);
- // 开启鼠标滚轮缩放
- map.enableScrollWheelZoom(true);
- // 监听拖拽地图
- map.addEventListener('dragend',(e)=>{
- console.log(e)
- })
- // 比例尺控件 右下角
- map.addControl(new BMap.ScaleControl({
- anchor:BMAP_ANCHOR_BOTTOM_RIGHT,
- offset:new BMap.Size(1,1)
- }));
- // 点击回到当前位置
- let geolocationControl = new BMap.GeolocationControl();
- geolocationControl.addEventListener("locationSuccess", (e)=>{
- // 定位成功事件
- console.log(e)
- });
- geolocationControl.addEventListener("locationError",(e)=>{
- // 定位失败事件
- });
- map.addControl(geolocationControl);
- // 在地图上添加门店标记点和相应门店信息覆盖物
- for(var i = 0; i <list.length; i++) { // 循环门店列表信息展示坐标点
- //list 为列表数据 包含 shopName,addrInfo,telephone,longitude,latitude
- let p0 = list[i].longitude;
- let p1 = list[i].latitude;
- let maker = addMarker(map,new window.BMap.Point(p0, p1), i);
- addInfoWindow(maker, list[i], i);
- }
- // 在地图上添加标记
- addMarker(map,point, index) { // 地图门店标记点
- let myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
- new BMap.Size(23, 25), {
- offset: new BMap.Size(10, 25),
- imageOffset: new BMap.Size(0, -275)
- });
- let marker = new BMap.Marker(point, { // 创建标记点
- icon: myIcon
- });
- map.addOverlay(marker);
- return marker;
- }
- // 在相应标记 处添覆盖
- addInfoWindow(marker, poi) { // 地图覆盖物显示设置
- let html = [];
- //pop 弹窗标题
- let title = `<div style="font-weight:bold;color:#CE5521;font-size:14px">${poi.shopName}</div>`;
- //pop 弹窗信息
- html.push(`<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>`);
- html.push(`<tr>`);
- html.push(`<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all;color:#000;"> 地址:</td>`);
- html.push(`<td style="vertical-align:top;line-height:16px;color:#000;">${poi.addrInfo}</td>`);
- html.push(`</tr>`);
- html.push(`<tr>`);
- html.push(`<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all;color:#000;"> 电话:</td>`);
- html.push(`<td style="vertical-align:top;line-height:16px;color:#000;">${poi.telephone}</td>`);
- html.push(`</tr>`);
- html.push(`</tbody></table>`);
- var infoWindow = new BMap.InfoWindow(html.join(""), {
- title: title,
- width: 200
- });
- html.onclick = function(){
- that.toDetail(poi.shopName,poi.shopNo);
- }
- var openInfoWinFun = function() {
- marker.openInfoWindow(infoWindow);
- };
- marker.addEventListener("click", openInfoWinFun);
- return openInfoWinFun;
- }
来源: http://www.qdfuns.com/article/43043/71c019036abb23c6b9280eb17edc54b7.html