在一个页面同时引入两个百度地图
进入百度地图官网,生成自己的密钥。
html代码:
<div class="mapp"><div id="allmap1"></div><div id="allmap2"></div> </div>js代码:
直接先引入百度官网密钥的js,
然后直接写js代码可以进行标记点的详细信息.
var map1 = new BMap.Map("allmap1"); // 创建Map实例 var point1 = new BMap.Point(121.607926, 31.21055); map1.centerAndZoom(point1, 15); map1.enableScrollWheelZoom(); //启用滚轮放大缩小 var marker = new BMap.Marker(point1); // 创建标注 map1.addOverlay(marker); // 将标注添加到地图中 var opts = {width: 200, // 信息窗口宽度 height: 80, // 信息窗口高度 title: "窗口标题", // 信息窗口标题 enableMessage: true,//设置允许信息窗发送短息 message: "" }; var infoWindow1 = new BMap.InfoWindow("备注的信息", opts); // 创建信息窗口对象 marker.addEventListener("click", function () {map1.openInfoWindow(infoWindow1, point1); //开启信息窗口 });//加载第二张地图 var map2 = new BMap.Map("allmap2"); // 创建Map实例 var point2 = new BMap.Point(113.760596, 34.770267); map2.centerAndZoom(point2, 17); map2.enableScrollWheelZoom(); //启用滚轮放大缩小 var marker2 = new BMap.Marker(point2); // 创建标注 map2.addOverlay(marker2); // 将标注添加到地图中 var opts2 = {width: 200, // 信息窗口宽度 height: 80, // 信息窗口高度 title: "窗口标题", // 信息窗口标题 enableMessage: true,//设置允许信息窗发送短息 message: "" }; var infoWindow2 = new BMap.InfoWindow("窗口信息", opts2); // 创建信息窗口对象 marker2.addEventListener("click", function () {map2.openInfoWindow(infoWindow2, point2); //开启信息窗口 });
发布者:admin,转转请注明出处:http://www.yc00.com/news/1692626054a620399.html
评论列表(0条)