【百度地图API】如何制作孪生姐妹地图?
任务描述:
我想要两张一模一样的地图!我想要双子地图!我想要孪生姐妹地图!
好好好,统统满足大家!
在这里我不需要使用百度地图API提供的地图缩略图控件,而是自己动手做一对双胞胎地图!
如何实现?
创建两张地图,map1和map2,他俩的中心点和地图级别(放大倍数)不同。
当鼠标移动map1的中心点时,map2的中心点会随着一起变化,最终和map1的中心点一致。
同理,可以实现用鼠标滚轮放大缩小地图。
操作试试:
移动左边的地图,右边的地图会随着一起运动;
对左边的地图使用鼠标滚轮(中键),右边的地图也会放大或者缩小。
图示:
运行代码,请点击这里。
代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="百度地图,百度地图API,百度地图自定义工具,百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图,帮助用户在可视化操作下生成百度地图" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>两个地图联动</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.1&services=true">
</script>
</head>
<body>
<p>
任务描述:当map1运动完以后,map2会跟着map1一起,改变中心点,改变放大级别。
</p>
<div style="float:left;">
<p>MAP1</p>
<div style="width:520px;height:340px;border:1px solid gray" id="container1"></div>
</div>
<div style="float:left;">
<p>MAP2</p>
<div style="width:520px;height:340px;border:1px solid gray" id="container2"></div>
</div>
</body>
<script type="text/javascript">
var map1 = new BMap.Map("container1");
var map2 = new BMap.Map("container2");
var point1 = new BMap.Point(116.411053,39.950507); // 创建中心点
var point2 = new BMap.Point(116.411053,39.950507); // 创建中心点
map1.centerAndZoom(point1,12); // 初始化地图map1,设置中心点和地图级别。
map2.centerAndZoom(point2,12); // 初始化地图map2,让地图级别和map1一致。
map1.addEventListener("moveend",function(){map2.panTo(map1.getCenter());}); //让map2跟着map1走
map1.addEventListener("zoomend",function(){map2.zoomTo(map1.getZoom());}); //让map2的地图等级与map1一致
map1.enableScrollWheelZoom(); // 启用滚轮放大缩小
</script>
</html>
转载于:https://www.cnblogs.com/lonelyxmas/p/4207817.html
【百度地图API】如何制作孪生姐妹地图?相关推荐
- 调用百度地图API接口制作热力图
调用百度地图API接口制作热力图 Python学了很久,也做了一些机器学习的demo,利用matolotlib库做过一些可视化.今天呢想尝试做一下热力图.先PO一张我最终效果图. 因为数据原因,效果一 ...
- 【高德地图API】汇润做爱地图技术大揭秘
原文:[高德地图API]汇润做爱地图技术大揭秘 昨日收到了高德地图微信公众号的消息推送,说有[一大波免费情趣用品正在袭来],点进去看了一眼,说一个电商公司(估计是卖情趣用品的)用高德云图制作了一张可以 ...
- Python调用高德地图API实现经纬度换算、地图可视化
作者 | 糖甜甜甜 出品 | 经管人学数据分析 Python调用高德地图API实现经纬度换算.地图可视化 前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地 ...
- 你还在为高德地图找不到门牌号等详细地址而烦恼吗?你还在等什么——Python调用高德地图API实现经纬度换算、地图可视化
Python调用高德地图API实现经纬度换算.地图可视化 前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地图API实现经纬度换算,并且直接在高德地图新推出 ...
- ArcGIS+百度地图API:制作杭州市边界shp文件
参考文章:百度地图API+ArcGIS软件-城市出行时空数据可视化_WenWu_Both的博客-CSDN博客 这篇博客在介绍的时候遗漏了很多关键步骤,我对此进行了必要的补充. 一.获取轮廓线的代码(g ...
- 【百度地图API】制作多途经点的线路导航
先创建一张地图的容器: <div class="pos-a" id="allmap"style="width: 100%; height: 95 ...
- 百度地图API详解之自定义地图类型
个人博客原文地址:http://www.jiazhengblog.com/blog/2011/10/08/422/ 今天的文章主要介绍如何利用地图API实现自定义地图. 百度地图API目前默认支持两种 ...
- 【腾讯地图API】制作多途经点的线路导航——路线坐标规划
面试:你懂什么是分布式系统吗?Redis分布式锁都不会?>>> 最近百度地图转腾讯地图以前用过百度地图实现路线坐标规划,不过搜索了一些没有搜索到腾讯地图的路线坐标规划,于是参数 ...
- 百度地图API(三)电子围栏—地图点击事件创建多边形
百度地图API(四)电子围栏-DrawingManager 分析 电子围栏:顾名思义就是一个多边形,然后终端或者其他什么东西在这个围栏中,如果离开围栏则通知离开了围栏,而做这个电子围栏应该就是鼠标点击 ...
- 百度地图api设置html5,百度地图API详解之自定义地图类型
今天的文章主要介绍如何利用地图API实现自定义地图. 百度地图API目前默认支持两种地图类型(map type):普通图和三维图,它们分别通过常量BMAP_NORMAL_MAP和BMAP_PERSPE ...
最新文章
- 收藏 |《动手学深度学习》中文版PDF
- 【opus源码分析】celt_fir5函数
- Android面试基础一
- markdown 编辑器_推荐一款公众号 Markdown 编辑器
- JWT介绍以及java-jwt的使用
- string转换函数以及hnu暑期实训部分和A+B的例题
- python是哪一年发明的_Python的发明,竟然是因为他不喜欢花括号。
- Python PEP8 编码规范 代码布局
- 400多个开源项目以及43个优秀的Swift开源项目-Swift编程语言资料大合集
- EFR32FG1开发教程1--点亮LED
- 2020杭电多校赛第四场1007 Go Running(hdu6808)
- element-ui的分页,添加首页、尾页,跳转按钮
- 成都国税打造全能“电子税务局”
- 实例079RTF文件的保存
- java 设置纸张大小设置_Java读取打印机自定义纸张.
- aqs clh java_并发编程——详解 AQS CLH 锁
- LVGL-gui_user.c
- arcgis之合并碎小图斑到相邻大块图斑
- 一种基于子序列的亚细胞定位预测的深度学习框架(DeepLncLoc: a deep learning frame work for long non-coding RNA subcellular)
- python中base64加密和解密