2021年4月9日

百度地图带标注、弹窗,支持地址切换


在最近的项目切图中遇到的一个问题,需要百度地图,并且支持地址切换,因为公司有好几个分公司地址都不一样,通过下面的代码可以解决这个问题。

HTML代码


<div id="allmap"></div>
<ul id="list">
<li onclick="showMark('116.403963','39.915119','111','aaaaa');">天安门</li>
<li onclick="showMark('116.403963','55.915119','222','bbbbbbb');">创富大厦</li>
</ul>

 

JS代码


// 用经纬度设置地图中心点

// 百度地图API功能
//map.centerAndZoom(new BMap.Point(116.403963, 39.915119), 18);
//map.enableScrollWheelZoom(true);

// 参数(经度、纬度、标题、描述)
showMark('116.403963','39.915119','fasdfasf','asdfadsf');

function showMark(longitude,latitude,title,info){
var map = new BMap.Map("allmap");
//var longitude = e.getAttribute('data-longitude'),
//latitude = e.getAttribute('data-latitude');
map.clearOverlays();
map.centerAndZoom(new BMap.Point(longitude,latitude),18);

var marker = new BMap.Marker(new BMap.Point(longitude, latitude)); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中

//添加信息窗口
var opts = {
width : 200, // 信息窗口宽度
height: 100, // 信息窗口高度
title : title , // 信息窗口标题

}
var infoWindow = new BMap.InfoWindow(info, opts); // 创建信息窗口对象
//marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow,new BMap.Point(longitude, latitude)); //开启信息窗口
//});
}

 

本文由专业的WEB前端外包公司-切图网原创,转载请保留版权( WEB前端开发外包www.qietu.com切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!热线:027-81777732、13343477732

标签: