百度和谷歌地图显示区域轮廓示例
2013-02-03 09:31
531 查看
最近项目中需要实现用地图显示各省份区域销售业绩的统计功能,即省份用不同颜色标示出来。
花时间研究了下,其实Google Map 和 Baidu Map 都有相关实现方法。即 获取区域轮廓坐标系,然后绘制自定义图层。
效果图(用百度地图弄的)
代码
<!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 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>
<style type="text/css">
body{font-size:13px;margin:10px}
#container{width:1200px;height:650px;border:1px solid gray}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
if (typeof console == "undefined"){
window.console = {log: function(){}};
}
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5);
var stdMapCtrl = new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL})
map.addControl(stdMapCtrl);
map.enableScrollWheelZoom();
map.enableContinuousZoom();
function getBoundary(data){
var bdary = new BMap.Boundary();
bdary.get(data.split("-")[0], function(rs){
console.log(rs);
var bounds;
var maxNum = -1, maxPly;
var count = rs.boundaries.length;
for(var i = 0; i < count; j++){
var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 1, strokeOpacity:0.5,fillColor:data.split("-")[1],strokeColor: "#000000"});
map.addOverlay(ply);
var arrPts = ply.getPoints();
if(arrPts.length > maxNum){
maxNum = arrPts.length;
maxPly = ply;
}
}
if(maxPly){
map.setViewport(maxPly.getPoints());
}
});
}
map.clearOverlays();
var datas = new Array("湖南-#ff0000","湖北-#ff5500","江西-#ffff00","重庆-#00ff00","贵州-#00ff55");
for(var i=0;i<datas.length;i++){
getBoundary(datas[i]);
}
</script>
</body>
</html>
Google Map 相关实现示例(小弟尚未找到像百度地图一样通过 “地区名字” 获取坐标系 的方法)
http://gmaps-samples-v3.googlecode.com/svn/trunk/layers/layers.html http://gmaps-samples-v3.googlecode.com/svn/trunk/cloud/cloud.html http://home.provide.net/~bratliff/polycluster/v3/absurd.html http://home.provide.net/~bratliff/polycluster/v3/alaska.html http://www.usnaviguide.com/v3maps/ProjectedOverlayTest.htm
原文:http://www.cnblogs.com/liuming/archive/2012/02/01/2334305.html
花时间研究了下,其实Google Map 和 Baidu Map 都有相关实现方法。即 获取区域轮廓坐标系,然后绘制自定义图层。
效果图(用百度地图弄的)
代码
<!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 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>
<style type="text/css">
body{font-size:13px;margin:10px}
#container{width:1200px;height:650px;border:1px solid gray}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
if (typeof console == "undefined"){
window.console = {log: function(){}};
}
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5);
var stdMapCtrl = new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL})
map.addControl(stdMapCtrl);
map.enableScrollWheelZoom();
map.enableContinuousZoom();
function getBoundary(data){
var bdary = new BMap.Boundary();
bdary.get(data.split("-")[0], function(rs){
console.log(rs);
var bounds;
var maxNum = -1, maxPly;
var count = rs.boundaries.length;
for(var i = 0; i < count; j++){
var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 1, strokeOpacity:0.5,fillColor:data.split("-")[1],strokeColor: "#000000"});
map.addOverlay(ply);
var arrPts = ply.getPoints();
if(arrPts.length > maxNum){
maxNum = arrPts.length;
maxPly = ply;
}
}
if(maxPly){
map.setViewport(maxPly.getPoints());
}
});
}
map.clearOverlays();
var datas = new Array("湖南-#ff0000","湖北-#ff5500","江西-#ffff00","重庆-#00ff00","贵州-#00ff55");
for(var i=0;i<datas.length;i++){
getBoundary(datas[i]);
}
</script>
</body>
</html>
Google Map 相关实现示例(小弟尚未找到像百度地图一样通过 “地区名字” 获取坐标系 的方法)
http://gmaps-samples-v3.googlecode.com/svn/trunk/layers/layers.html http://gmaps-samples-v3.googlecode.com/svn/trunk/cloud/cloud.html http://home.provide.net/~bratliff/polycluster/v3/absurd.html http://home.provide.net/~bratliff/polycluster/v3/alaska.html http://www.usnaviguide.com/v3maps/ProjectedOverlayTest.htm
原文:http://www.cnblogs.com/liuming/archive/2012/02/01/2334305.html
相关文章推荐
- 百度,谷歌地图显示区域多轮廓示例
- 百度,谷歌地图显示区域轮廓示例
- 解决Android使用百度定位坐标显示到地图上偏移过大问题
- 百度、谷歌、必应地图服务测评
- 北京电子地图 谷歌-百度-高清-搜狗电子地图 地图14、17、19级图片
- jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
- 百度&高德地图小区景点边界轮廓实现
- jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
- 图片(地图)热点区域高亮显示研究
- 百度地图高级实例2-如何利用自己的数据制作社交地图?只显示可视区域内的标注
- React Native使用百度Echarts显示图表的示例代码
- 如何下载谷歌百度高德大字体地图并打印
- 离线谷歌卫星地图加载服务中间件调用示例For Google API
- 百度API地图的标注不是居中显示,而是显示在左上角
- 百度地图开发,在地图上显示当前位置
- jsp页面显示中国省份区域地图+鼠标移动变色
- Android百度 地图打开显示某坐标的地图
- 百度、谷歌高德等网络地图经纬度偏差纠正以及相关坐标系问题
- Google Maps API显示地图的小示例
- Google Maps API显示地图的小示例