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

xudongcsharp

浏览: 476931 次
性别:
来自: 上海

最近访客更多访客>>

fbswz1111

chenmo80125

jelly25176

Cadelle

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

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

分享到：

google map 综合应用 | SVN服务器端安装

2012-09-13 16:28
浏览 4912
评论(0)
分类:行业应用
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

google map 综合应用

如何使用Google Map API

最近访客更多访客>>