在一个页面同时引入两个百度地图
2017-05-31 17:20
204 查看
进入百度地图官网,生成自己的密钥。
html代码:
js代码:
直接先引入百度官网密钥的js,
然后直接写js代码可以进行标记点的详细信息.
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); //开启信息窗口 });
相关文章推荐
- 同时刷新两个iframe指向的页面,一个链接关联两个iframe的刷新
- 如何让一个表单同时提交到两个不同的页面
- 点击一个链接同时打开两个页面
- 一个表单同时提交到两个不同的页面
- 一个页面不能同时存在两个 window.onload()的解决方案
- 使用jquery当页面打开时,将一个事件绑定到控件(同时执行两个事件),并修改加载样式类中的样式
- asp.net 一个页面放两个aspnetpager控件,同时分页时产生的问题
- 利用jquery把一个表单的数据同时提交给两个页面
- 一个表单同时向两个页面传值
- GirdView 同时传递两个参数,在原页面中判断是否有数据
- git 同时向两个仓库提交同一个分支
- 一个页面两个session的问题分析
- 两个fragment 同时跳转另外一个fargment ,返回对应的fragment 的解决方法
- EXECL同时打开两个页面
- 一个域名下两个不同端口的项目session不能同时存在
- SugarCRM 一个页面控制两个模块(editview.php)
- 解决一个页面有两个FCKeditor时,无法使用FCKeditorAPI.GetInstance问题
- curl乱码有两个方面的原因一个是因为我们采集页面的php页面编码与远程文档编码不致导致的,另一种可能是页面进入了gzip压缩传输导致的
- 同时更新框架的左右两个页面
- 把页面分成左右两个,如何实现在左侧点击,链接一个页面到右边的页面