在一个页面同时引入两个百度地图

最新推荐文章于 2024-09-25 17:50:03 发布

yyrSun

最新推荐文章于 2024-09-25 17:50:03 发布

阅读量6.1k

点赞数 2

分类专栏：插件

本文链接：https://blog.csdn.net/yyjourney/article/details/72822063

版权

插件专栏收录该内容

3 篇文章 0 订阅

订阅专栏

进入百度地图官网，生成自己的密钥。

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); //开启信息窗口
});