【百度地图API】如何制作商圈地图?行政地图?

简介: 原文:【百度地图API】如何制作商圈地图?行政地图?摘要:   想要显示某一个区域,并且鼠标放上去,该区域就会变色。这时,你就需要巧用多边形覆盖物,和它的鼠标事件了!   快来看看去哪儿网的实例吧:http://hotel.
原文: 【百度地图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>




目录
相关文章
|
7月前
|
新能源 API
百科-百度免费API接口教程
该接口用于从百度百科获取指定名词的基础解释。支持POST或GET请求,需提供用户ID、用户KEY及查询内容。返回状态码和解释内容或错误提示。示例:https://cn.apihz.cn/api/zici/baikebaidu.php?id=88888888&key=88888888&words=汽车。建议使用个人ID与KEY以享受更高调用频次。
|
7月前
|
API
表情包-百度版免费API接口教程
该接口用于通过指定关键词从百度渠道获取表情包,支持POST或GET请求。需提供用户ID和KEY,可选参数包括关键词、页码及结果数量。返回数据包含状态码、信息提示、结果集等。示例中ID与KEY为公共测试用,建议使用个人ID与KEY以享受更高调用频率。
|
7月前
|
API
通用图片搜索-百度源免费API接口教程
该接口用于搜索百度图片,支持通过关键词、页码、结果数量等参数获取图片搜索结果。请求方式为POST或GET,需提供用户ID和KEY,可选参数包括关键词、页码、结果数量及返回源类型。返回结果包含状态码、信息提示、结果集、当前页码、最大页码和结果数量。示例中提供了GET和POST请求方法及返回数据示例。
|
10月前
|
JavaScript 前端开发 定位技术
百度地图JavaScript API v2.0创建地图
百度地图JavaScript API v2.0创建地图
130 0
|
11月前
|
JavaScript 前端开发 定位技术
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
584 0
|
定位技术 API
Angular 调用导入百度地图API接口,2024春招BAT面试真题详解
Angular 调用导入百度地图API接口,2024春招BAT面试真题详解
|
12月前
|
域名解析 JavaScript 网络协议
技术心得记录:如何使用google地图的api(整理)
技术心得记录:如何使用google地图的api(整理)
932 0
|
12月前
|
Java API Apache
详尽分享百度翻译api
详尽分享百度翻译api
228 0
|
2月前
|
JSON 数据挖掘 API
1688API最新指南:商品详情接口接入与应用
本指南介绍1688商品详情接口的接入与应用,该接口可获取商品标题、价格、规格、库存等详细信息,适用于电商平台开发、数据分析等场景。接口通过商品唯一标识查询,支持HTTP GET/POST请求,返回JSON格式数据,助力开发者高效利用1688海量商品资源。
|
2月前
|
JSON 数据挖掘 API
京东API接口最新指南:店铺所有商品接口的接入与使用
本文介绍京东店铺商品数据接口的应用与功能。通过该接口,商家可自动化获取店铺内所有商品的详细信息,包括基本信息、销售数据及库存状态等,为营销策略制定提供数据支持。此接口采用HTTP请求(GET/POST),需携带店铺ID和授权令牌等参数,返回JSON格式数据,便于解析处理。这对于电商运营、数据分析及竞品研究具有重要价值。