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

62 阅读 0 评论 41 点赞

我是靠谱客的博主跳跃芝麻，最近开发中收集的这篇文章主要介绍利用百度地图api获取任何区域的经纬度来实现google区域叠加显示，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

利用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>