【百度地图API】如何制作泡泡放大镜?

原文:【百度地图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"); //创建map1
var map2; //定义map2

var 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>

 

 

时间: 2024-11-08 19:08:59

【百度地图API】如何制作泡泡放大镜?的相关文章

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

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

【百度地图API】——如何用label制作简易的房产标签

原文:[百度地图API]--如何用label制作简易的房产标签 摘要: 最近,API爱好者们纷纷说,自定义marker太复杂了!不仅定义复杂,连所有的dom事件都要自己重新定义.有没有快速简易创建房产标签的方法呢? 答案当然是有的啦~ 我们可以利用label嘛! ------------------------------------------------------------------------------- 一.创建地图 这是老生常谈的三句话,初始化地图的js. var map =

【百度地图API】如何制作一张魔兽地图!!——CS地图也可以,哈哈哈

原文:[百度地图API]如何制作一张魔兽地图!!--CS地图也可以,哈哈哈 摘要: 你玩魔兽不?你知道如何做一张魔兽地图不?! 快来看此文吧! --------------------------------------------- 一.制作魔兽地图的准备工作 其实,你只需要准备一些地图的瓦片图,就可以了. 用切片工具,把一张完整的图片(最好大一些,清楚一些),切成小片.(下周我贴这个工具的下载链接出来.留个悬念,哈哈.) 正式公布切图工具链接: http://openapi.baidu.co

如何利用【百度地图API】,制作房产酒店地图?(中)——使用右侧列表打开信息窗口

原文:如何利用[百度地图API],制作房产酒店地图?(中)--使用右侧列表打开信息窗口 摘要: 很多房产网.旅游酒店网上,都有一个列表,鼠标经过列表上的数据时,地图上就会打开相应的信息窗口. 如何实现这一功能呢? 快来学习吧. ----------------------------------------------------------------------------------------------- 一.制作列表 接着上一篇文章来讲,我们已经拥有了一张能显示自定义标注,和信息窗口

【百度地图API】如何自定义地图图层?实例:制作麻点图(自定义图层+热区)

原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来学习,当地图上有大量标注,比如600万个的时候,我们如何用"麻点图"来实现标注的展示. -----------------------------------------------------------------------------------------------------

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

原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内的标注. -------------------------------------------------------------------------------------------------------------- 成品图:     工具描述: 移动地图时(或改变地图级别时),只显示

【百度地图API】如何制作“从这里出发”“到这里去”——公交篇

原文:[百度地图API]如何制作"从这里出发""到这里去"--公交篇 摘要: 百度地图首页上的"从这里出发""到这里去",一直是开发者们很热衷的一个功能.那么,怎样结合百度的数据库,来制作这个功能呢?让我们一起来学习一下. -------------------------------------------------------------------------------------------------------

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

原文:[百度地图API]如何制作可拖拽的沿道路测距 摘要: 地图测距,大家都会,不就map.getDistance麼.可是,这只能测任意两点的直线距离,用途不够实际啊.比如,我想测试北京天安门到北京后海的距离,怎么办呢? 显然"沿道路测距"就显得尤为重要了.那么如果制作"可拖拽"的沿道路测距呢?我们一起来看一看. -----------------------------------------------------------------------------

【百度地图API】如何制作孪生姐妹地图?

原文:[百度地图API]如何制作孪生姐妹地图? 任务描述: 我想要两张一模一样的地图!我想要双子地图!我想要孪生姐妹地图! 好好好,统统满足大家! 在这里我不需要使用百度地图API提供的地图缩略图控件,而是自己动手做一对双胞胎地图!   如何实现? 创建两张地图,map1和map2,他俩的中心点和地图级别(放大倍数)不同. 当鼠标移动map1的中心点时,map2的中心点会随着一起变化,最终和map1的中心点一致. 同理,可以实现用鼠标滚轮放大缩小地图.   操作试试: 移动左边的地图,右边的地图