百度地图+谷歌地图勾画行政区块边界

最近公司做项目，需要用在谷歌地图上勾勒出搜索的行政区块的轮廓。

于是在找各种资料......最后好像是有末尾CSDN的网友提供了思路，具体看正文。

效果如下

先贴代码

[html] view plain copy

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<body onload="initialize();">
<div id="map_canvas" style="width: 800px; height: 600px"></div>
<div id="show_x"></div>
<div id="show_y"></div>
<div id="zoom"></div>
<div id="message"></div>
输入省、直辖市或县名称：
<input type="text" id="districtName" style="width: 80px" value="重庆市">
<input type="button" onclick="getBoundary()" value="获取轮廓线">
</body>
<script type="text/javascript">
var map;
function initialize() {
var myLatLng = new google.maps.LatLng(37,
104);
var myOptions = {
zoom : 4,
center : myLatLng,
mapTypeId : google.maps.MapTypeId.TERRAIN
};
var bermudaTriangle;
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
function test() {
}
function getBoundary() {
var bdary = new BMap.Boundary();
var name = document.getElementById("districtName").value;
//多边形定义
bdary.get(name, function(rs) {
points = rs; //获取行政区域
var rslength = rs.boundaries.length;
var top=0;//大
var bottom=0;//小
var left=0;//小
var right=0;//大
for (i = 0; i < rslength; i++) {
var triangleCoords = [];
var temp = rs.boundaries[i];
var latLngs = temp.split(";");
for (j = 1; j < latLngs.length - 1; j++) {
var postion = latLngs[j].indexOf(",");
var lat = parseFloat(latLngs[j].substr(0, postion));//经度
var lng = parseFloat(latLngs[j].substr(postion + 1));//纬度
//加入经纬度
triangleCoords.push(new google.maps.LatLng(lng, lat));
//活动最大，最小经纬度。计算地图中心点
if(j==1&&top==0&&bottom==0&&left==0&&right==0){
top=lng;
bottom=lng;
left=lat;
right=lat;
}else{
if(lng>top){
top=lng;
}
if(lng<bottom){
bottom=lng;
}
if(lat>right){
right=lat;
}
if(lat<left){
left=lat;
}
}
}
bermudaTriangle = new google.maps.Polygon({
paths : triangleCoords,
strokeColor : "#FF0000",
strokeOpacity : 0.8,
strokeWeight : 2,
fillColor : "#FF0000",
fillOpacity : 0.35
});
bermudaTriangle.setMap(map);
}
map.setCenter(new google.maps.LatLng(bottom+((top-bottom)/2),left+((right-left)/2)));
map.setZoom(7);
});
}
</script>
</html>

接着一步一步的看。

第一步：导入谷歌和百度的JS库

[html] view plain copy

<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>

第二步：从百度地图拿到坐标点。其中的rs变量内存的就是坐标集合。

[html] view plain copy

var bdary = new BMap.Boundary();
var name = document.getElementById("districtName").value;
//多边形定义
bdary.get(name, function(rs) {
points = rs; //获取行政区域

第三步：解析整理。

[html] view plain copy

points = rs; //获取行政区域
var rslength = rs.boundaries.length;
var top=0;//大
var bottom=0;//小
var left=0;//小
var right=0;//大
for (i = 0; i < rslength; i++) {
var triangleCoords = [];
var temp = rs.boundaries[i];
var latLngs = temp.split(";");
for (j = 1; j < latLngs.length - 1; j++) {
var postion = latLngs[j].indexOf(",");
var lat = parseFloat(latLngs[j].substr(0, postion));//经度
var lng = parseFloat(latLngs[j].substr(postion + 1));//纬度

第四部：用整理过的数据在谷歌地图上绘制多边形。（坐标有一点偏差）

[css] view plain copy

bermudaTriangle = new google.maps.Polygon({
paths : triangleCoords,
strokeColor : "#FF0000",
strokeOpacity : 0.8,
strokeWeight : 2,
fillColor : "#FF0000",
fillOpacity : 0.35
});
bermudaTriangle.setMap(map);

第五步：计算中心点坐标。

[javascript] view plain copy

//加入经纬度
triangleCoords.push(new google.maps.LatLng(lng, lat));
//活动最大，最小经纬度。计算地图中心点
if(j==1&&top==0&&bottom==0&&left==0&&right==0){
top=lng;
bottom=lng;
left=lat;
right=lat;
}else{
if(lng>top){
top=lng;
}
if(lng<bottom){
bottom=lng;
}
if(lat>right){
right=lat;
}
if(lat<left){
left=lat;
}
}

百度地图+谷歌地图勾画行政区块边界相关推荐

谷歌地图谷歌地图_如何有效使用Google地图
谷歌地图谷歌地图我爱Google地图! 它简单易用. 夜间模式在夜间导航时会有所帮助,但是您是否充分利用了它? 在这篇文章中,我试图为以下问题的答案提供帮助: 如何充分利用Google地图? 我敢肯 ...
谷歌地图谷歌地图_为您的Google地图增添真实感
谷歌地图谷歌地图使用谷歌地图API是最流行的(如果不是最流行的 )的方式来展现当今网站地理地点之一. 在本教程中,我将演示如何使Google地图更具真实感,并为您提供一些有关如何使自己的地图真正发光 ...
怎么在html插入谷歌地图,html页面插入百度or谷歌地图
一.百度地图 1.打开"百度地图生成器"的网址:http://api.map.baidu.com/lbsapi/creatmap/index.html 2.在"1.定位中 ...
百度与谷歌地图瓦片组织方式对比
百度是从中心点经纬度(0,0)度开始计算瓦片,在第1级时百度将世界地图分为4块. 中心点右上部分(中国地区)占1块. 谷歌是从左上角经纬度(-180,90)度开始计算瓦片,在第1级时谷歌将世界地图分为 ...
javaweb中使用百度、谷歌地图进行定位
之前给一个公司做了一个定位,调用一个接口获得经纬度,然后在地图上显示, 之前我做了三种显示,百度.谷歌.搜狗,搜狗和百度类似,这里就介绍百度和谷歌了, 之前我们在一个城市里面坐了测试,不一定很准确,但 ...
html5谷歌地图,谷歌地图API和HTML 5
我是新来的Stackoverflow,所以要善良.谷歌地图API和HTML 5 我一直在使用谷歌地图api和一些其他的东西来制作游戏的项目.这个想法是使用地理定位数据来清除地图上的雾(当你开始时地图充 ...
苹果地图谷歌地图 iPhone XS Max
作为一个 IP 库行业的从业者,不但要把互联网络知识学透,足够的地理知识也是必不可少的技能,两手都要过硬.还没提全球语言大集合,这个槽以后再吐. 这次先说地理知识好了,目前可以说中国地理区县级以上知识 ...
离线地图瓦片下载高德地图谷歌地图天地图 Mapbox地图矢量卫星地图下载
用于地图瓦片下载离线,支持高德地图瓦片谷歌地图 Mapbox bingMap OpenStreeMap 自定义瓦片地址下载 gitee项目地址 https://gitee.com/houlaid ...
5张对比图告诉你,天地图,高德地图,百度地图,谷歌地图区别
先来看看传说中最争议的天地图吧. 最大放大距离,每厘米25米. 我们用这个体育场和下面的大厦做对比..其实还有大厦下的车..(这张图上的车看不清,真有,没骗你们....) 再上一张高德的, 最大50M ...

百度地图+谷歌地图勾画行政区块边界

百度地图+谷歌地图勾画行政区块边界相关推荐

最新文章

热门文章

百度地图+谷歌地图 勾画 行政区块边界

百度地图+谷歌地图 勾画 行政区块边界相关推荐

最新文章

热门文章

百度地图+谷歌地图勾画行政区块边界

百度地图+谷歌地图勾画行政区块边界相关推荐