`

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

 
阅读更多

 

http://www.cnblogs.com/milkmap/archive/2012/02/16/2353985.html

【百度地图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>
复制代码

 

分享到：
| 浅谈JSP自定义标签实现过程
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    百度地图城市和商圈API

    百度地图API资源。用于展示当前省份下的所有城市的地理坐标，以及商圈情况

    百度地图类库 城市商圈及行政区

    标题中的“百度地图类库 城市商圈及行政区”指的是一个专门用于获取和处理城市内的行政区域边界和商业圈几何形状数据的工具。这个类库主要适用于那些需要在应用中展示精确地理信息，比如房地产、本地服务、交通规划...

    百度地图不实例化地图获取城市商圈列表

    总的来说，这个示例展示了如何利用百度地图API在不实例化地图组件的情况下，获取并显示城市和商圈的列表，为用户提供了一个直观的地理位置选择界面。这在开发诸如在线订餐、酒店预订、本地服务搜索等应用时非常有用...

    百度地图API实例

    【百度地图API实例详解】 百度地图API（Application Programming Interface）是百度提供的一种地图服务接口，允许开发者通过编程方式调用地图功能，将其集成到自己的网站、应用或系统中。这个API提供了丰富的地图...

    百度地图类库 城市商圈及行政区.zip

    城市行政区域和商圈数据获取工具类，使用者可以通过调用该接口智能获取城市行政区域和商圈多边形及相关坐标点数据。 主入口类是CityList， 基于Baidu Map API 1.5。

    全国、省、市、区县、乡镇、村六级地区信息表，包含百度地图坐标

    全国、省、市、区县、乡镇、村六级地区信息表，包含百度地图坐标

    百度地图优化升级　定位出行更便捷.docx

    百度地图近期进行了全面优化升级，这次升级主要体现在扩大地图显示层级、提升地图定位功能，并首次采用"商圈"定位概念。此外，百度地图还在图区展现公交站点、道路层级的立体显示等，为人们的公交驾车出行提供了更...

    网点规划-广州城市商圈地图.pdf

    在本文档中，我们看到了一个关于广州城市商圈的详细地理信息系统（GIS）制作过程的概览，它涵盖了众多对城市规划和商业分析至关重要的元素。广州作为中国南部的大型经济中心，其城市商圈的规划对城市的发展、商业...

    andorid 百度地图 找房

    百度地图找房 仿链家、悟空找房 网上找了好多demo 结合了一下写了一个简单demo 基本实现了需求 demo而已，没优化 项目需求 初始化 显示 区 点击区 显示商圈 点击商圈 显示楼盘

    成都的行政区划与商圈地产板块划分GIS数据，shp格式

    在这个压缩包中，包含的是关于成都地区的GIS数据，具体是“成都的行政区划与商圈地产板块划分”的信息，文件格式为shp。 shp文件是Esri公司开发的一种空间数据格式，主要用于存储地理图形特征，如点、线、面等，是...

    电脑离线地图标注软件卫星地图 免费下载

    支持谷歌在线（离线）混合卫星地图，普通地图，地形地图，微软电子地图，微软卫星地图，bing地图，在软件界面上可以选择地图类型切换； 2.支持1-20级的地图随意缩放，鼠标右键拖动漫游。 3.支持名称查询定位，可以...

    城市商圈经纬度

    8. 开发实践：在实际开发中，开发者会使用地图API结合商圈经纬度数据，通过前端展示地图，后端处理查询请求，实现用户在特定商圈范围内的搜索、导航等功能。 9. 可视化工具：数据可视化工具如Tableau、QGIS等可以...

    离线电子地图

    离线电子地图是一种非常实用的工具，特别是在网络不稳定或者没有网络连接的情况下，它能提供与在线地图服务相同的功能，帮助用户随时了解自己的位置，并进行多种操作。以下是对离线电子地图及其相关知识点的详细说明...

    【西瓜】同城商圈- 配置教程(地图key、vip设置、行业管理)1

    但需要注意，对于国内用户，切勿同时填写Google地图Key和百度地图Key，以免造成系统冲突。 接下来是VIP设置部分。VIP功能通常用于提供额外的特权服务，吸引用户升级账户，增加平台收入。在描述中提到的QQ截图可能...

    城市商圈/行政区域/地铁沿线数据库

    - 地图展示：通过经纬度信息在地图上标出酒店、商圈和地铁站的位置。 - 搜索过滤：用户可以根据商圈、行政区域或地铁站进行筛选。 - 路线规划：结合地铁线路数据，提供从用户当前位置到酒店的导航建议。 7. **...

    百度地图城市大数据平台解决方案​-.pdf

    结合地图服务，这类解决方案能为城市规划、交通优化、商圈分析提供数据支持。 b. 交通出行优化 利用大数据分析城市交通动态，如车流密度、路线拥堵情况等，为城市交通管理提供科学依据。百度地图可能会利用这些...

    行业分类-电子-关于基于电子地图的步行商圈生成方法的说明分析.rar

    在电子行业中，基于电子地图的步行商圈生成方法是城市规划、商业分析以及智能导航等领域的重要研究内容。这一方法旨在利用现代信息技术，特别是地理信息系统（GIS）和大数据技术，为用户提供精准、便捷的城市步行...

    南京的geoJson格式地图

    南京的矢量地图，geoJson格式。含有南京20180920最新的区的边界。可用于echarts的地图插件使用。

    2010年上海市矢量地图

    用户可以通过此地图获取到2010年时上海市的行政区划、道路网络、地标建筑、公共设施等多方面的地理信息。 【文件名称列表】虽未给出具体的文件名，但通常一个压缩包内可能包含多个文件，如主地图文件、元数据文件、...

    全国城市、商圈、地铁线、站、携程酒店、城市数据

    每个记录可能包含了城市名称、省份名称、行政级别、商圈名称、以及商圈的经纬度坐标。经纬度信息对于地理定位、地图绘制和距离计算至关重要，可以用于分析不同区域的商业分布情况和人口流动。 2. **全国地铁线以及...

Magicbox
Global site tag (gtag.js) - Google Analytics