利用百度地图api获取任何区域的经纬度来实现google区域叠加显示

最新推荐文章于 2022-10-11 09:34:37 发布

原创最新推荐文章于 2022-10-11 09:34:37 发布 · 465 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #xhtml #ViewUI

GIS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用百度地图API和Google Maps API获取并绘制指定区域的边界。通过JavaScript代码实现区域轮廓线的获取及显示，适用于地理信息系统相关的应用开发。

利用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=utf-8" />
<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:800px;height:500px;border:1px solid gray}
</style>
</head>
<body>
<div id="container"></div>
<br />
输入省、直辖市或县名称：<input type="text" id="districtName" style="width:80px" value="上海市徐汇区">
<input type="button" onclick="getBoundary()" value="获取轮廓线">

<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(){       
    var bdary = new BMap.Boundary();
    var name = document.getElementById("districtName").value;
    bdary.get(name, function(rs){
        console.log(rs);
        map.clearOverlays();

        var bounds;
        var maxNum = -1, maxPly;

        var count = rs.boundaries.length; 
        for(var i = 0; i < count; i++){
            var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"});
            map.addOverlay(ply);  

			//输出数组里的经纬度供google map使用
            var arrPts = ply.getPoints();
			for(var j=0; j<arrPts.length; j++){
				var point=arrPts[j];
				// new google.maps.LatLng(25.774252, -80.190262),
				document.getElementById("info").innerHTML += "new google.maps.LatLng("+point.lat + "," + point.lng +"),</br>";
			}

            if(arrPts.length > maxNum){
                maxNum = arrPts.length;
                maxPly = ply;
            }

        }

        if(maxPly){
            map.setViewport(maxPly.getPoints());
        }

    });   
}

</script>
<div id="info"></div>
</body>
</html>

利用区域边界经纬度构建区域叠加层

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Polygon Arrays</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>
<script type="text/javascript">

  var map;
  var infoWindow;

  function initialize() {
    var myLatLng = new google.maps.LatLng(31.283245,121.469925);
    var myOptions = {
      zoom: 9,
      center: myLatLng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var bermudaTriangle;

    map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

    var triangleCoords = [
		new google.maps.LatLng(31.20858,121.441612),
		new google.maps.LatLng(31.201849,121.427716),
		new google.maps.LatLng(31.197289,121.42724),
		new google.maps.LatLng(31.197345,121.419019),
		new google.maps.LatLng(31.192827,121.420048),
		new google.maps.LatLng(31.194064,121.423732),
		new google.maps.LatLng(31.188265,121.422164),
		new google.maps.LatLng(31.182675,121.401248),
		new google.maps.LatLng(31.179076,121.402391),
		new google.maps.LatLng(31.174389,121.398113),
		new google.maps.LatLng(31.165411,121.401178),
		new google.maps.LatLng(31.168234,121.409394),
		new google.maps.LatLng(31.146651,121.418302),
		new google.maps.LatLng(31.133412,121.428014),
		new google.maps.LatLng(31.135425,121.442927),
		new google.maps.LatLng(31.125839,121.445316),
		new google.maps.LatLng(31.118985,121.441427),
		new google.maps.LatLng(31.12168,121.456645),
		new google.maps.LatLng(31.114317,121.458688),
		new google.maps.LatLng(31.111293,121.452177),
		new google.maps.LatLng(31.10717,121.464792),
		new google.maps.LatLng(31.108087,121.469294),
		new google.maps.LatLng(31.127959,121.476977),
		new google.maps.LatLng(31.151544,121.463475),
		new google.maps.LatLng(31.165902,121.476066),
		new google.maps.LatLng(31.185304,121.472056),
		new google.maps.LatLng(31.193775,121.482312),
		new google.maps.LatLng(31.197078,121.477052),
		new google.maps.LatLng(31.210676,121.473489),
		new google.maps.LatLng(31.209095,121.468773),
		new google.maps.LatLng(31.226415,121.464152),
		new google.maps.LatLng(31.217501,121.441627),
		new google.maps.LatLng(31.210243,121.444361),
		new google.maps.LatLng(31.20858,121.441612)
    ];

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

    bermudaTriangle.setMap(map);

    // Add a listener for the click event
    google.maps.event.addListener(bermudaTriangle, 'click', showArrays);

    infowindow = new google.maps.InfoWindow();
  }

  function showArrays(event) {

    // Since this Polygon only has one path, we can call getPath()
    // to return the MVCArray of LatLngs
    var vertices = this.getPath();

    var contentString = "<b>Bermuda Triangle Polygon</b><br />";
    contentString += "Clicked Location: <br />" + event.latLng.lat() + "," + event.latLng.lng() + "<br />";

    // Iterate over the vertices.
    for (var i =0; i < vertices.length; i++) {
      var xy = vertices.getAt(i);
      contentString += "<br />" + "Coordinate: " + i + "<br />" + xy.lat() +"," + xy.lng();
    }

    // Replace our Info Window's content and position
    infowindow.setContent(contentString);
    infowindow.setPosition(event.latLng);

    infowindow.open(map);
  }  
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>