原文:【百度地图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】如何制作泡泡放大镜？的更多相关文章

  1. 【百度地图API】制作多途经点的线路导航——路线坐标规划

    一.创建地图 首先要告诉大家的是,API1.2版本取消密钥,取消服务设置,大家可以采用更加简短的方式引用API的JS啦~ <script type="text/javascript&q ...

  2. 【百度地图API】如何制作自定义样式的公交导航结果面板？

    原文:[百度地图API]如何制作自定义样式的公交导航结果面板? 摘要: 百度地图API有默认的公交导航结果面板,但样式比较单一:而百度地图上的结果面板就比较美观.如何利用百度地图API来制作一个比较美 ...

  3. 【百度地图API】如何制作班级地理通讯录？LBS通讯录

    原文:[百度地图API]如何制作班级地理通讯录?LBS通讯录 摘要:班级通讯录必备的功能,比如人员列表,人员地理位置标注,展示复杂信息窗口,公交和驾车等.一般班级人员都不会超过300个,因为可以高效地 ...

  4. 【百度地图API】如何利用PhoneGap制作地图APP

    原文:[百度地图API]如何利用PhoneGap制作地图APP 摘要:百度地图API是一套由javascript编写的地图程序接口,按说它应该运行在浏览器上.现在,只要利用PhoneGap,我们就能开 ...

  5. 【百度地图API】如何利用自己的数据制作社交地图？只显示可视区域内的标注

    原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内 ...

  6. 【百度地图API】如何自定义地图图层？实例：制作麻点图（自定义图层+热区）

    原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...

  7. 【百度地图API】如何制作公交线路的搜索？如331路

    原文:[百度地图API]如何制作公交线路的搜索?如331路 摘要: 从A点到B点的公交导航大家都知道怎么做了,那么单独查询331路公交车的公交路线,如何制作呢?我们一起来学习一下~ --------- ...

  8. 【百度地图API】如何制作可拖拽的沿道路测距

    原文:[百度地图API]如何制作可拖拽的沿道路测距 摘要: 地图测距,大家都会,不就map.getDistance麼.可是,这只能测任意两点的直线距离,用途不够实际啊.比如,我想测试北京天安门到北京后 ...

  9. 【百度地图API】如何制作多途经点的线路导航——驾车篇

    原文:[百度地图API]如何制作多途经点的线路导航--驾车篇 摘要: 休假结束,酸奶小妹要从重庆驾车去北京.可是途中要去西安奶奶家拿牛奶饼干呢!用百度地图API,能不能帮我实现这个愿望呢? ----- ...

随机推荐

  1. Linux下一个Nginx安装步骤

    一个.下载pcre 官网下载:http://www.pcre.org/ # wget http://sourceforge.net/projects/pcre/files/pcre/8.35/pcre ...

  2. JAVA 公众微信的开放源码项目管理合作伙伴招募的版本号

    大家好:       jeecg开源社区.现在正在进行"JAVA 开放源码的版本号项目微信公共账号"工作,有兴趣的朋友一起參与. 截止时间:20140510 採用技术: 1. JE ...

  3. net搭建热插拔式web框架（沙箱的构建）

    net搭建热插拔式web框架(沙箱的构建) 上周五写了一个实现原理篇,在评论中看到有朋友也遇到了我的问题,真的是有种他乡遇知己的感觉,整个系列我一定会坚持写完,并在最后把代码开源到git中.上一篇文章 ...

  4. scrot-0.8

    相关库下载地址:         www.sunfreeware.com/programlistsparc10.html tar -zxvf scrot-0.8.tar.gzcd scrot-0.8. ...

  5. 股票作手回忆录Digest(转)

    记住,驱动股市的不是理智.逻辑或纯经济因素,驱动股市的是从来不会改变的人的本性.它不会改变,因为它是我们的本性.[4] 在华尔街或在股票投机中,没有什么新的东西.过去发生的事情在将来会一而再,再而三地 ...

  6. WWDC 2014 Session 205/217 Extension 注意事项

    基于阅读下面的内容205和217的PDF做笔记.没有深入研究. 205 Creating Extensions for iOS and OS X, Part 1 217 Creating Extens ...

  7. Java读书笔记三（字符串）

    1.介绍 本篇博客将对JAVA中的字符串类的基本知识进行介绍.主要字符串类的一些经常用法等内容. 2.字符串对象的创建 1.有两种形式.可是在开发中常常习惯于String 变量名的形式来进行操作. & ...

  8. FPGA图案--数字表示(代码+波形)

    在数字逻辑系统,仅仅存在高低.所以用它只代表一个整数数字.并且有3代表性的种类.这是:原码表示(符号加绝对值值).反码表示(加-minus标志)而补码(符号加补).这三个在FPGA中都有着广泛的应用. ...

  9. build path--use as source folder 应用

    今天eclipse.当打算run随着main功能class时间,出现editor does not contain a main type该错误框. baidu了一下,迅速解决这个问题:原来这个cla ...

  10. Oracle 数据库 JOB 失败后解密法重试

    因为官方文档上没有找到相关的说明,所以这里进行了例如以下測试,为了找到oracle数据库中 job 失败后重试时间的规律. 数据库版本号:11.2.0.3 測试说明:这里创建了一个日志表以及一个执行时 ...