【百度地图API】如何制作商圈地图？行政地图？
摘要：
想要显示某一个区域，并且鼠标放上去，该区域就会变色。这时，你就需要巧用多边形覆盖物，和它的鼠标事件了！
快来看看去哪儿网的实例吧：http://hotel.qunar.com/city/beijing_city/#fromDate=2011-07-13&from=qunarHotel&toDate=2011-07-16
---------------------------------------------------------------------------------------------
一、创建地图
这里我使用的是卫星图，并且添加了鱼骨控件。
var map = new BMap.Map("container",{mapType: BMAP_HYBRID_MAP}); //设置卫星图为底图
map.centerAndZoom(new BMap.Point(116.404, 39.915),12); // 初始化地图,设置中心点坐标和地图级别。
map.addControl(new BMap.NavigationControl()); //添加鱼骨控件
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("北京"); // 设置3D地图显示的城市 此项是必须设置的
二、创建多边形
多边形的各个点，是需要自己设定的。
我们可以使用坐标拾取工具来找点。http://dev.baidu.com/wiki/static/map/API/tool/getPoint/
比如，创建一个北京二环的多边形。
//创建经纬度数组
var secRingCenter = new BMap.Point(116.400244,39.931757);
var secRing = [new BMap.Point(116.362875,39.949459),new BMap.Point(116.378972,39.956539),new BMap.Point(116.438764,39.955654),new BMap.Point(116.440488,39.911836),new BMap.Point(116.365175,39.905637)];
//创建多边形
var secRingPolygon = new BMap.Polygon(secRing, {strokeColor:"blue", strokeWeight:5, strokeOpacity:0.5});
//添加多边形到地图上
map.addOverlay(secRingPolygon);
三、给多边形添加鼠标事件
1、mouseover
当鼠标放到多边形上时，多边形的边变成红色。
secRingPolygon.addEventListener("mouseover",function(){
secRingPolygon.setStrokeColor("red");
});
2、mouseout
相应地，如果鼠标移出呢，红色就变回原来的蓝色。
secRingPolygon.addEventListener("mouseout",function(){
secRingPolygon.setStrokeColor("blue");
});
3、click
如果点击多边形，地图就放大一级。并且设置一下地图的中心点。
secRingPolygon.addEventListener("click",function(){
map.zoomIn();
secRingPolygon.setStrokeColor("red");
map.setCenter(secRingCenter);
});
四、创建标签
这里的标签有两个，一是小型的地标标签。
是对多边形的一个说明。
图示：
var secRingLabel2 = new BMap.Label("二环",{offset: new BMap.Size(10,-20), position: secRingCenter});
secRingLabel2.setStyle({"padding": "2px"});
map.addOverlay(secRingLabel2);
第二个就是鼠标放到多边形上，显示的商圈说明标签。
图示：
var secRingLabel = new BMap.Label("北京市二环，包括了东城区</br>和西城区。著名旅游景点有</br>天安门、故宫、后海、北海</br>公园、景山、南锣鼓巷等。",{offset: new BMap.Size(-150,0), position: secRingCenter});
secRingLabel.setStyle({"padding": "10px","width": "140px","border": "1px solid #ccff00"});
五、图示
那么，按照这个方法，大家可以添加许多个商圈。
同样的，行政区域地图也可以用这个方法来制作。
本例成品图：
六、全部源代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>商圈</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div style="z-index:9;width:520px;height:340px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container",{mapType: BMAP_HYBRID_MAP}); //设置卫星图为底图
map.centerAndZoom(new BMap.Point(116.325218,39.977441),12); // 初始化地图,设置中心点坐标和地图级别。
map.addControl(new BMap.NavigationControl()); //添加鱼骨控件
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("北京"); // 设置3D地图显示的城市 此项是必须设置的
//创建二环
//创建经纬度数组
var secRingCenter = new BMap.Point(116.400244,39.931757);
var secRing = [new BMap.Point(116.362875,39.949459),new BMap.Point(116.378972,39.956539),new BMap.Point(116.438764,39.955654),new BMap.Point(116.440488,39.911836),new BMap.Point(116.365175,39.905637)];
//创建多边形
var secRingPolygon = new BMap.Polygon(secRing, {strokeColor:"blue", strokeWeight:5, strokeOpacity:0.5});
//添加多边形到地图上
map.addOverlay(secRingPolygon);
//给多边形添加鼠标事件
secRingPolygon.addEventListener("mouseover",function(){
secRingPolygon.setStrokeColor("red");
map.addOverlay(secRingLabel);
map.panTo(secRingCenter);
});
secRingPolygon.addEventListener("mouseout",function(){
secRingPolygon.setStrokeColor("blue");
map.removeOverlay(secRingLabel);
});
secRingPolygon.addEventListener("click",function(){
map.zoomIn();
secRingPolygon.setStrokeColor("red");
map.setCenter(secRingCenter);
});
//创建标签
var secRingLabel = new BMap.Label("<b>北京市二环</b>，包括了东城区</br>和西城区。著名旅游景点有</br>天安门、故宫、后海、北海</br>公园、景山、南锣鼓巷等。",{offset: new BMap.Size(-150,0), position: secRingCenter});
secRingLabel.setStyle({"z-index":"999999", "padding": "10px","width": "140px","border": "1px solid #ccff00"});
var secRingLabel2 = new BMap.Label("二 环",{offset: new BMap.Size(10,-30), position: secRingCenter});
secRingLabel2.setStyle({"line-height": "20px", "text-align": "center", "width": "80px", "height": "29px", "border": "none", "padding": "2px","background": "url(http://jixingjx.com/mapapi/ac.gif) no-repeat",});
map.addOverlay(secRingLabel2);
//创建海淀区
//创建经纬度数组
var haidianCenter = new BMap.Point(116.305958,39.969037);
var haidian = [new BMap.Point(116.352526,39.915599),new BMap.Point(116.278362,39.916485),new BMap.Point(116.252491,39.943042),new BMap.Point(116.234669,39.994358),new BMap.Point(116.281812,40.037239),new BMap.Point(116.281812,40.037239),new BMap.Point(116.386446,39.98684),new BMap.Point(116.389896,39.968263),new BMap.Point(116.336429,39.960299)];
//创建多边形
var haidianPolygon = new BMap.Polygon(haidian, {strokeColor:"blue", strokeWeight:5, strokeOpacity:0.5});
//添加多边形到地图上
map.addOverlay(haidianPolygon);
//给多边形添加鼠标事件
haidianPolygon.addEventListener("mouseover",function(){
haidianPolygon.setStrokeColor("red");
map.addOverlay(haidianLabel);
map.panTo(haidianCenter);
});
haidianPolygon.addEventListener("mouseout",function(){
haidianPolygon.setStrokeColor("blue");
map.removeOverlay(haidianLabel);
});
haidianPolygon.addEventListener("click",function(){
map.zoomIn();
haidianPolygon.setStrokeColor("red");
map.setCenter(haidianCenter);
});
//创建标签
var haidianLabel = new BMap.Label("<b>北京市海淀区</b>，是北京市</br>高等学府的聚集地。这里涵</br>括了北京市80%的重点大学</br>。其中清华、北大都是大家</br>耳熟能详的求学地。",{offset: new BMap.Size(-150,0), position: haidianCenter});
haidianLabel.setStyle({"z-index":"999999", "padding": "10px","width": "140px","border": "1px solid #ccff00"});
var haidianLabel2 = new BMap.Label("海淀区",{offset: new BMap.Size(10,-30), position: haidianCenter});
haidianLabel2.setStyle({"line-height": "20px", "text-align": "center", "width": "80px", "height": "29px", "border": "none", "padding": "2px","background": "url(http://jixingjx.com/mapapi/ac.gif) no-repeat",});
map.addOverlay(haidianLabel2);
</script>
【百度地图API】如何制作商圈地图？行政地图？的更多相关文章
- 【百度地图API】如何利用PhoneGap制作地图APP
原文:[百度地图API]如何利用PhoneGap制作地图APP 摘要:百度地图API是一套由javascript编写的地图程序接口,按说它应该运行在浏览器上.现在,只要利用PhoneGap,我们就能开 ...
- 如何利用【百度地图API】，制作房产酒店地图？（下）——结合自己的数据库
原文:如何利用[百度地图API],制作房产酒店地图?(下)--结合自己的数据库 摘要:应广大API爱好者要求,写了一篇利用自己数据库标点的文章…… -------------------------- ...
- 【百度地图API】你看过房产地图吗？你知道房产标注是如何建立的吗？
原文:[百度地图API]你看过房产地图吗?你知道房产标注是如何建立的吗? 你是不是看过很多房产网站?例如安居客,新浪乐居. 你是不是也想做一个能写文字的标注? 你知道怎么去实现麼? 其实,上图这样的标 ...
- 【百度地图API】如何制作孪生姐妹地图？
原文:[百度地图API]如何制作孪生姐妹地图? 任务描述: 我想要两张一模一样的地图!我想要双子地图!我想要孪生姐妹地图! 好好好,统统满足大家! 在这里我不需要使用百度地图API提供的地图缩略图控件 ...
- 【高德地图API】如何打造十月妈咪品牌地图？
原文:[高德地图API]如何打造十月妈咪品牌地图? 摘要:品牌地图除了地图,商铺标点外,还有微博关注,路线查询等功能. ---------------------------------------- ...
- 必应地图api文档，微软必应地图web开发版详解，可以在国内使用国外地图
最近,公司项目要求在页面中嵌入地图,需求还算简单,但是由于必须具备响应式(主要是pc和移动端),而且由于公司业务是全球性的,要支持国外地点搜索.考虑到百度,腾讯,高德等等国内地图无法显示国外数据,谷歌 ...
- 百度地图API 拖拽或点击地图位置获取坐标
function setPlace(map,myValue,callback){ function getAddress(){ var pp = local.getResults().getPoi(0 ...
- 百度地图API和高德地图API资料集锦
[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自 ...
- 【百度地图API】——如何用label制作简易的房产标签
原文:[百度地图API]--如何用label制作简易的房产标签 摘要: 最近,API爱好者们纷纷说,自定义marker太复杂了!不仅定义复杂,连所有的dom事件都要自己重新定义.有没有快速简易创建房产 ...
- 【百度地图API】建立全国银行位置查询系统（一）——如何创建地图
原文:[百度地图API]建立全国银行位置查询系统(一)--如何创建地图 <摘要>你将在第一章中学会以下知识: 如何创建一个网页文件 怎样利用百度地图API建立一张2D地图,以及3D地图 如 ...
随机推荐
- Android - 数据存储 －存储键值对
如果你有少量的键值数据需要存储,可以使用SharedPreferencesAPI.SharedPreferences对象指向一个包含键值对的文件并且提供了一些简单的方法来读取它们.每个SharedPr ...
- 初学者cocos2dx 写2048 为了和大家一起分享
第一个是在头文件 部分的代码是学习不变 大多数写自己. class HelloWorld : public cocos2d::CCLayer { public: virtual bool init( ...
- MVC5
MVC5 不知不觉 又逢年底, 穷的钞票 所剩无几. 朋友圈里 各种装逼, 抹抹眼泪 MVC 继续走起.. 本系列纯属学习笔记,如果哪里有错误或遗漏的地方,希望大家高调指出,当然,我肯定不会低调改正的 ...
- Windows创建的基本含义和进程的进程的内核
过程 1 这意味着过程: 1.1 一个是在操作系统的内核对象管理处理. 的统计信息的地方. 1.2 还有一个是地址空间.它包括全部可运行模块或DL L 模块的代码和数据.它还包括动态内存分配的 ...
- Java线(一个)：线程安全的和不安全
当我们看JDK API什么时候,总是找一些类描述说:,线程安全或线程安全,例如StringBuilder在,么一句,"将StringBuilder 的实例用于多个线程是不安全的.假设须要这种 ...
- NYOJ 1068 ST（段树 为段更新+间隔总和）
ST 时间限制:1000 ms | 内存限制:65535 KB 难度:1 描写叙述 "麻雀"lengdan用随机数生成了后台数据.可是笨笨的他被妹纸的问题给难住了. .. 已知 ...
- 更改Calendar背景图(使用系统映像选择器)
最近提出的申请,主接口是一个历,网上有很多第三方的日历控件,有使用ImageView实现,有使用GridView实现,它的优点是控制的灵活性. 而我选择使用本机CalendarView,关于这个控件, ...
- 8年，属于 HTML 5 春天的到来悄悄!
[核心提示] 在 8 年时间中,HTML 5 为整个行业都带来了什么.标准终于确定后又会产生什么样的变革呢? 微博微信Twitter对于非常多人来说,非常有可能在微信的朋友圈里玩过「围住神经猫」,也非 ...
- oracle数据库全然恢复和不全然恢复以及运行用户管理辈分恢复
比較全然恢复和不全然恢复: 一.全然恢复:将数据库恢复到当前最新状态,包含直至请求恢复时进行的全部已提交的数据更改 二.不全然恢复:将数据库恢复到请求恢复操作之前指定的过去时间点 一.全然恢复过程 以 ...
- 源码编译安装 MySQL 5.5.x 实践(转)
1.安装cmakeMySQL从5.5版本开始,通过./configure进行编译配置方式已经被取消,取而代之的是cmake工具.因此,我们首先要在系统中源码编译安装cmake工具. # wget ht ...