【百度地图API】如何制作泡泡放大镜？
任务描述：
我不喜欢API提供的缩放控件耶……
我能不能使用其他方式放大地图勒？
当然阔以啦！
现在就来教大家如何动手制作一个可爱的泡泡放大镜！
使用它，就可以放大地图上的任何细节啦~
如何实现：
创建主地图map1，在主地图上创建一个标注，并对标注添加一个信息窗口。
在信息窗口里面，创建一张小地图，地图级别为18（足够大啦）。
默认设置信息窗口关闭，点击红色标注后打开信息窗口。
操作试试：
点击红色标注，立马弹出来一个泡泡放大镜！
你还可以移动主地图试试，泡泡放大镜里面的地图也会改变呢！
图示：
运行代码，请点击这里。
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><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>任务描述：点击map中的红色标注，会冒出个泡泡放大镜~</p><div style="width:520px;height:340px;border:1px solid gray" id="container1"></div></body><script type="text/javascript">var map1 = new BMap.Map("container1"); //创建map1var map2; //定义map2var point = new BMap.Point(116.411053,39.950507);var point1 = point; // 确定中心点var point2 = point; // 确定中心点map1.centerAndZoom(point1,16); // 初始化地图map1,设置中心点和地图级别。map1.addEventListener("moveend",function(){map2.panTo(map1.getCenter());}); //让map2跟着map1走var marker1 = new BMap.Marker(point); //定义标注map1.addOverlay(marker1); //添加标注var win1 = new BMap.InfoWindow("<p>泡泡</p><div style='width:200px;height:200px;border:1px solid gray' id='container2'></div>"); //信息窗口marker1.addEventListener("click",function displayPop(){ marker1.openInfoWindow(win1); //打开窗口 map2 = new BMap.Map("container2"); //创建泡泡放大镜map2 map2.centerAndZoom(point2,18); // 初始化地图map2,让地图级别和map1一致。})</script></html>
【百度地图API】如何制作泡泡放大镜？的更多相关文章
- 【百度地图API】制作多途经点的线路导航——路线坐标规划
一.创建地图 首先要告诉大家的是,API1.2版本取消密钥,取消服务设置,大家可以采用更加简短的方式引用API的JS啦~ <script type="text/javascript&q ...
- 【百度地图API】如何制作自定义样式的公交导航结果面板？
原文:[百度地图API]如何制作自定义样式的公交导航结果面板? 摘要: 百度地图API有默认的公交导航结果面板,但样式比较单一:而百度地图上的结果面板就比较美观.如何利用百度地图API来制作一个比较美 ...
- 【百度地图API】如何制作班级地理通讯录？LBS通讯录
原文:[百度地图API]如何制作班级地理通讯录?LBS通讯录 摘要:班级通讯录必备的功能,比如人员列表,人员地理位置标注,展示复杂信息窗口,公交和驾车等.一般班级人员都不会超过300个,因为可以高效地 ...
- 【百度地图API】如何利用PhoneGap制作地图APP
原文:[百度地图API]如何利用PhoneGap制作地图APP 摘要:百度地图API是一套由javascript编写的地图程序接口,按说它应该运行在浏览器上.现在,只要利用PhoneGap,我们就能开 ...
- 【百度地图API】如何利用自己的数据制作社交地图？只显示可视区域内的标注
原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内 ...
- 【百度地图API】如何自定义地图图层？实例：制作麻点图（自定义图层+热区）
原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...
- 【百度地图API】如何制作公交线路的搜索？如331路
原文:[百度地图API]如何制作公交线路的搜索?如331路 摘要: 从A点到B点的公交导航大家都知道怎么做了,那么单独查询331路公交车的公交路线,如何制作呢?我们一起来学习一下~ --------- ...
- 【百度地图API】如何制作可拖拽的沿道路测距
原文:[百度地图API]如何制作可拖拽的沿道路测距 摘要: 地图测距,大家都会,不就map.getDistance麼.可是,这只能测任意两点的直线距离,用途不够实际啊.比如,我想测试北京天安门到北京后 ...
- 【百度地图API】如何制作多途经点的线路导航——驾车篇
原文:[百度地图API]如何制作多途经点的线路导航--驾车篇 摘要: 休假结束,酸奶小妹要从重庆驾车去北京.可是途中要去西安奶奶家拿牛奶饼干呢!用百度地图API,能不能帮我实现这个愿望呢? ----- ...
随机推荐
- 发展，需求驱动 · 一间 所见即所得
从需求不是一句空话.同样是在发展过程中真正的. 需求驱动,与极限编程的一些想法和测试驱动开发基本重合. 鉴于该网站的发展是一个比较流行的方向,我会从网站开始,阐述自己的"需求驱动的发展&qu ...
- SQL Server管理员专用连接的使用
原文:SQL Server管理员专用连接的使用 作为一名DBA,经常会处理一些比较棘手的服务无响应问题,鉴于事态的严重性,多数DBA可能直接用“重启”大法,以便尽快的恢复生产环境的正常运转,但是多数情 ...
- GitLab 之 Linux十分钟快装（转）
先把 Shell 命令贴出来,楼主以 CentOS release 6.5 (Final) 64位 为例: //配置系统防火墙,把HTTP和SSH端口开放. sudo yum install curl ...
- ACdream: ACfun
ACfun Time Limit: 2000/1000MS (Java/Others)Memory Limit: 128000/64000KB (Java/Others) SubmitStatisti ...
- AutoMapper在ABP框架
AutoMapper在ABP框架中的使用说明 为了说明AutoMapper如何使用,我专门开设了一个专题来讲,如果您还没有查看该专题,请点击这里.既然系统地学习了AutoMapper,那么接下来就是该 ...
- 【转】Robot Framework 快速入门
目录 介绍 概述 安装 运行demo 介绍样例应用程序 测试用例 第一个测试用例 高级别测试用例 数据驱动测试用例 关键词keywords 内置关键词 库关键词 用户定义关键词 变量 定义变量 使用变 ...
- poj 1664 把平果
这个问题可分为两个子问题:什么时候m<n时刻,例如3苹果放在4阿菜,和3苹果放3一样的. 所以m<n时,f[m][n]=f[m][m]; 当m>=n时.可分为两种放法,一种为至少有一 ...
- STL源代码分析--迭代摘要、迭代器失效汇总
Vector 1.内部数据结构:连续存储,比如数组. 2.随机訪问每一个元素,所须要的时间为常量. 3.在末尾添加或删除元素所需时间与元素数目无关,在中间或开头添加或删除元素所需时间随元素数目呈线性变 ...
- 【LeetCode】Algorithms 题集（三）
Search Insert Position 意: Given a sorted array and a target value, return the index if the target is ...
- Android读取JSON格式数据
Android读取JSON格式数据 1. 何为JSON? JSON,全称为JavaScript Object Notation,意为JavaScript对象表示法. JSON 是轻量级的文本数据交换格 ...