文章 - 1&评论 - 157&trackbacks - 0
最近有朋友需要在百度地图中给各省按不同颜色显示，先上效果图：
原理就是获取各省的边界坐标,然后在地图上面用不颜色的覆盖物Polygon，百度地图和谷歌地图都有同样的Polygon类。
百度地图的API相关Polygon文档在这里：
谷歌地图API相关Polygon文档在这里：
先讲讲在百度地图中如何实现，
1.创建百度地图
var map = new BMap.Map("container");
map.addControl(new BMap.MapTypeControl({
mapTypes:[BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]
map.addControl(new BMap.NavigationControl());
map.enableScrollWheelZoom();
map.enableContinuousZoom();
2.获取各省的边界坐标
首先定义一个中国各省名称和颜色的数组provinces，里面的颜色是从网上找的一张中国地图用颜色拾取器获得的。
var provinces = ["广西-#C8C1E3", "广东-#FBC5DC", "湖南-#DBEDC7", "贵州-#E7CCAF", "云南-#DBEDC7",
"福建-#FEFCBF", "江西-#E7CCAF", "浙江-#C8C1E3", "安徽-#FBC5DC", "湖北-#C8C1E3",
"河南-#DBECC8", "江苏-#DBECC8", "四川-#FCFBBB", "海南省-#FCFBBB", "山东-#FCFBBB", "辽宁-#FCFBBB",
"新疆-#FCFBBB", "西藏-#E7CCAF", "陕西-#E7CCAF", "河北-#E7CCAF", "黑龙江-#E7CCAF", "宁夏-#FBC5DC",
"内蒙古自治区-#DBEDC7", "青海-#DBEDC7", "甘肃-#C8C1E3", "山西-#FBC5DC", "吉林省-#C8C1E3",
"北京-#FBC5DC", "天津-#C8C1E3", "三河市-#E7CCAF", "上海-#FCFBBB", "重庆市-#FBC5DC", "香港-#C8C1E3"
然后逐个获取各省的边界坐标并在地图上用不同颜色描绘出来
function getBoundary(province) {
var boundary = new BMap.Boundary();
boundary.get(name, function(rs){
//一个省可能有好几个闭合的多边形区域
for (var i = 0; i & rs.boundaries. i++) {
//逐个显示
for (var i = provinces.length - 1; i &= 0; i--) {
getBoundary(provinces[i]);
3.给polygon添加***,现实鼠标移动到某省上面闪烁高亮显示
//开始用"mouseover","mouseout"发现,鼠标移动过快,会多个省份也高亮了.所以改成 click了
polygon.addEventListener("click", function (e) {
var latlng = e.
var info = new Window(name + " " + latlng.lat + "," + latlng.lng, {width:220});
map.openInfoWindow(info, latlng);
//高亮闪烁显示鼠标点击的省
delay = 0;
for (flashTimes = 0; flashTimes & 3; flashTimes++) {
delay += 200;
setTimeout(function () {
polygon.setFillColor("#FFFF00");
}, delay);
delay += 200;
setTimeout(function () {
polygon.setFillColor(color);
}, delay);
点击某省用***高亮显示，还闪烁几下。
4.收工了，在谷歌地图中的实现方法，请听下回***。
刚花了几分钟在谷歌地图中实现同样的效果，是不是很8错！
1 &html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&在谷歌地图中高亮显示各省&/title&
&style type="text/css"&
margin: 0;
border: 0;
overflow: hidden;
#map_canvas {
width: 100%;
height: 100%;
position: absolute;
&script type="text/javascript" src="/maps/api/js?sensor=false&language=zh-CN"&&/script&
&script type="text/javascript" src="citydata.json"&&/script&
var map = null;
var provinces = ["广西-#C8C1E3", "广东-#FBC5DC", "湖南-#DBEDC7", "贵州-#E7CCAF", "云南-#DBEDC7", "福建-#FEFCBF", "江西-#E7CCAF", "浙江-#C8C1E3", "安徽-#FBC5DC", "湖北-#C8C1E3", "河南-#DBECC8", "江苏-#DBECC8", "四川-#FCFBBB", "海南省-#FCFBBB", "山东-#FCFBBB", "辽宁-#FCFBBB", "新疆-#FCFBBB", "西藏-#E7CCAF", "陕西-#E7CCAF", "河北-#E7CCAF", "黑龙江-#E7CCAF", "宁夏-#FBC5DC", "内蒙古自治区-#DBEDC7", "青海-#DBEDC7", "甘肃-#C8C1E3", "山西-#FBC5DC", "吉林省-#C8C1E3", "北京-#FBC5DC", "天津-#C8C1E3", "三河市-#E7CCAF", "上海-#FCFBBB", "重庆市-#FBC5DC", "香港-#C8C1E3", "台湾-#C8C1E3"];
var polyOptions = {
strokeColor: "#9B868B",
fillColor: "#FF8C69",
fillOpacity: 0.6,
strokeWeight: 1,
function initialize() {
var myOptions = {
center: new google.maps.LatLng(32.694866, 105.996094),
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
for (var i = 0, n = cityData.provinces. i & i++) {
showBoundaryEx(cityData.provinces[i].b, getColor(cityData.provinces[i].n));
// for (var j = 0, m = cityData.provinces[i].cities. j & j++) {
showBoundary(cityData.provinces[i].cities[j].b);
for (var i = 0, n = cityData.municipalities. i & i++) {
showBoundaryEx(cityData.municipalities[i].b, getColor(cityData.municipalities[i].n));
for (var i = 0, n = cityData.other. i & i++) {
showBoundaryEx(cityData.other[i].b, getColor(cityData.other[i].n));
function isFloatNumber(value) {
return (!isNaN(value));
function getColor(name) {
for (var m = provinces.length - 1; m &= 0; m--) {
if (provinces[m].indexOf(name) & -1) {
var arr = provinces[m].split("-");
return arr[1];
function showBoundaryEx(latLngs, color) {
var paths = [],
latLng = "",
list = latLngs.split(";");
for (i = list.length - 1; i &= 0; i--) {
latLng = list[i].split(",");
var lat = latLng[1],
lng = latLng[0];
if ((isFloatNumber(lat)) && (isFloatNumber(lng))) {
paths.push(new google.maps.LatLng(lat, lng));
var polygon = new google.maps.Polygon();
polygon.setOptions(polyOptions);
polygon.setOptions({
fillColor: color
polygon.setPaths(paths);
polygon.setMap(map);
google.maps.event.addListener(polygon, "mousemove",
function () {
polygon.setOptions({
fillColor: "#FFFF00"
google.maps.event.addListener(polygon, "mouseout",
function () {
polygon.setOptions({
fillColor: color
google.maps.event.addDomListener(window, "load", initialize);
&div id="map_canvas"&&/div&
118 &/html&
这个文件是百度的MapLibrary里面的城市列表（http://api./library/CityList/1.2/src/data/CityData.js）, 我把省市的边界坐标也存到里面了。经测试发现，在百度地图中，鼠标比较快速的连续移过几个省，发现几个省都是高亮的，而谷歌的则表现良好，没有延时的现象。由此可以看出，百度地图性能不及谷歌。
阅读(...) 评论()「地图」高大上！读懂温州原来还能这么来！你居然还不知道？
「地图」高大上！读懂温州原来还能这么来！你居然还不知道？
顾房地产信息
规划展示馆是一个城市展示其城市形象的名片，它全方位、多角度地展现了城市建设的沧桑巨变以及城市发展成果与总体趋向，是市民了解并参与城市规划的重要窗口。从沉淀的历史到光辉的未来，新旧交错，光影间，见证温州城市的变迁与成长。目前，温州已建成、在建的规划展示馆一共7家，无论哪家，你都能感受到霸屏的科技力量，直不住惊呼“高大上”！迫不及待想要一饱眼福？那就快跟着小布的小伙伴----市勘测院的地图君整理的这份《温州市规划展示馆分布地图》一起来刷新感官吧！???PC端网页版PC端网页版地址：www./ghzsg手机版扫一扫，进入手机地图查看各个规划展示馆详细信息，还可直接导航到目的地温州市规划展示中心? 地址：温州市鹿城区惠民路856号 预约***：0；0（周一） 微信公众号：wzghzszx温州市规划展示中心总建筑面积20377.54平方米，其中展馆面积约为7757平方米。以“山水智城，世界温州”为主题，围绕着温州山水城市的特点、智慧城市的建设方向、温州人商行天下的特色，记录了温州城市历史发展的律动，也展示了温州从沿江城市向着滨海城市拓展的前景，全面展示温州城市规划及建设。规划展示中心是温州展示城市形象的名片，政府招商引资的平台，也是市民了解并参与城市规划的窗口。展馆采用文字、图表、照片、实物、沙盘模型等形式，利用声、光、电、多媒体等现代科技手段，分别展示了温州城市建设的过去、现在和未来。一层主要有印象序厅、城市概况、历史沿革、山水斗城等展项；二层主要有规划历程、生态旅游、基础设施、温商家园等展项；三层主要有数字沙盘、总体规划、重点片区、4D影院等展项。展馆于日试开馆，日正式开馆。龙湾区规划展示馆? 地址：龙湾区龙湾中心区C-08号地块龙湾城市规划展示馆工程位于龙湾中心区C-08号地块，建设用地面积约10.01亩，总建筑面积15199平方米。展馆主楼四层，总体布展面积约10000平方米，其中一、二层为龙湾整体区域综合展示内容，着重围绕“历史文化、区域发展、城市建设和规划内容”进行展示，布展面积约5500平方米；三层为智慧城市主题展示区域，着重展现“龙湾智慧城市建设工作成果及未来智慧生活体验”，布展面积约2200平方米；四层为办公及管理区域，装饰面积约2200平方米。龙湾规划展示馆作为龙湾对外展示的重要窗口，将打造成招商引资的高端功能性平台，对龙湾区今后的发展起到重要的提升作用。瓯海规划展示馆? 地址：瓯海区娄桥街道古岸路 开馆时间：周二到周日上午9:00-11:30，下午14:00-16:30，国庆期间1-5号闭馆，6号起开馆 预约***：7 微信公众号：ohghzsg瓯海规划展示馆是一座集对外宣传、规划展示、招商引资、旅游接待、科普教育等多功能于一体的综合性展示馆，展馆坐落于瓯海区娄桥街道古岸路389号，总建筑面积约5800平方米，布展面积约3000平方米，以“商贸之都、山水新城”为主题，以瓯海的过去、现在、未来为主线，全方位展现瓯海的城市形象。温州经济技术开发区规划展示中心? 地址：温州滨海新城投资集团总部工程东侧辅楼一楼 开馆时间：预计年底前投入使用温州经济技术开发区规划展示中心，位于温州滨海新城投资集团总部工程东侧辅楼一楼，东侧为金海一道，南临滨海十七路，西侧为经五河，北侧为滨海十六路，展馆面积约为3300平方米，包括形象序厅、综合概览厅、总体模型厅、分区及专项规划厅、产业规划厅、产品展示厅、招商引资厅和智慧城市厅八个展厅。浙南科技城规划展示馆? 地址：龙湾区黄石山公园内 开馆时间：需预约接待 预约***：4温州浙南科技城规划展示馆是温州正在打造的规模最大、主题最鲜明的科技创业创新空间，更是温州市推进产业转型升级的重大战略决策，致力于打造成为主导产业突出、科创平台领先、高层次人才集聚，立足温州、辐射浙南、影响全省的科技高地。浙南科技城规划展示馆不仅是浙南科技城对外宣传的重要窗口、市民了解和参与规划建设的重要场所，也是政府科学决策和宏观调控科技城建设发展的重要平台。瑞安市城市规划展览馆? 地址：瑞安市瑞祥新区瑞祥公园内 开馆时间：周三至周日上午9：00-12:00、下午13:00-16:30，国庆期间1-8日均全天开馆 预约***：0瑞安市城市规划展览馆地处瑞祥新区核心位置，外形设计汲取“叶脉”元素，轻盈流畅、飘逸灵动，极具现代感。展览馆建筑面积为5670平方米，其中布展面积约3500平方米。展馆展陈空间简约明快、清新雅致，极具现代设计风格。展馆分两层展示空间，以城市规划为展示主题，以城市过去、现在和未来的时间逻辑，设置序厅、美丽瑞安、史话瑞安、成就瑞安、幸福瑞安、筑梦瑞安、总规揽胜、城市影院和互动区，展示瑞安东海之滨、宜居之城的美好形象。展馆采用大量高科技手段，将总体规划沙盘舞台灯光秀、环幕影院、VR自驾、虚拟漫游等现代声光电技术融入多项展示环节，是集规划展示、科普教育、特色旅游等多功能于一体的专业城市规划展览馆。泰顺县规划展示馆? 地址：泰顺县罗阳镇新城大道117号行政审批中心二楼 开馆时间：周一至周五8：00-17:00，周六周日预约开放，国庆期间闭馆 预约***：8泰顺县规划展示馆位于罗阳镇新城大道117号行政审批中心二楼，展馆面积约为900平方米，展馆以“廊桥国家公园”为主题，采用文字、图表、照片、实物、沙盘模型等形式，利用声、光、电、多媒体等现代科技手段，分别展示了泰顺县建设的过去、现在和未来，宣传泰顺的地形地貌、山水、人文历史、建设成就、旅游资源、泰商经济及规划成果，阐述致力建设“中国最佳生态、世界最美廊桥、世界蜡都、古民居、旅游主业化、全域景区化”的旅游休闲文化高地和城市后花园的这一发展目标。
本文仅代表作者观点，不代表百度立场。系作者授权百家号发表，未经许可不得转载。
顾房地产信息
百家号 最近更新：
简介: 伊人，在水一方，把房子装修得和美人一样美
作者最新文章