谷歌地图v3-Can't获取要在地图上显示的多边形和/或矩形

Google Maps v3 - Can't get a polygon and/or rectangle to display on map

本文关键字：多边形 显示 地图 v3-Can 获取 谷歌地图      更新时间：2023-09-26

我一直在开发一个.NET地理编码应用程序，该应用程序在最后显示地址或地点的Google地图（使用v3 API）。地图的中心有一个标记，代表地理编码的点。这一切都有效。然后，我想在地图上显示一个矩形/多边形的覆盖图，它表示被地理编码的点周围的边界（这反映了地理编码的准确性，边界越大，精度越低）。（我从API查询中得到这些边界的坐标）。

然而，我只是无法在地图上显示多边形或矩形，这让我疯了！我已经按照文档中关于多边形的说明进行了操作，但没有任何乐趣。我试过google.maps.Polygon和google.maps.Rectangle，但都没有成功。我也尝试过不同的纬度/经度，但没有什么不同。什么都没有表现出来。我一定犯了一些根本性的错误，但在这些树林里看不到任何树木！

我的基本代码（它是从C#生成的）看起来像这样：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    if (window.attachEvent) {window.attachEvent('onload', initMap);}
        else if (window.addEventListener) {window.addEventListener('load', initMap, false);}
        else {document.addEventListener('load', initMap, false);}
    function initMap() {
        var latlng = new google.maps.LatLng(51.5001524,-0.1262362);
        var myOptions = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
        var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
        var marker = new google.maps.Marker({
            position: latlng, map: map, title:'Westminster, London, UK' 
        });
        var boundCoords = [
            new google.maps.LatLng(51.3493528),
            new google.maps.LatLng(-0.378358),
            new google.maps.LatLng(51.7040647),
            new google.maps.LatLng(0.1502295),
        ];
        var poly = new google.maps.Polygon({
            paths: boundCoords, strokeColor: '#FF0000', strokeOpacity: 0.8, 
            strokeWeight: 3, fillColor: '#FF0000', fillOpacity: 0.35 
        });
        poly.setMap(map); 
        console.log(poly);
    }
</script>
<div id="map_canvas" style="width:640px; height:480px"></div>

这里有一个JSFiddle版本，你可以玩。

new google.maps.LatLng(51.3493528),

你需要x，y坐标，例如

new google.maps.LatLng(32.321384, -64.75737),

或

你需要两个标记，例如：

var latLngBounds = new google.maps.LatLngBounds(
   marker1.getPosition(),
   marker2.getPosition()
);
rectangle.setBounds(latLngBounds);
相关文章：