【问题标题】:Google Maps v3 - Can't get a polygon and/or rectangle to display on mapGoogle Maps v3 - 无法在地图上显示多边形和/或矩形
【发布时间】:2011-06-03 10:44:18
【问题描述】:

我一直在开发一个 .NET 地理编码应用程序,该应用程序最后会显示地址或地点的 Google 地图(使用 v3 API)。地图的中心有一个标记,表示已进行地理编码的点。这一切都有效。然后,我想在地图上显示一个矩形/多边形形状叠加层,表示地理编码点周围的边界(这反映了地理编码的准确性,边界越大表示准确性越低)。 (我从 API 查询中得到了这些边界的坐标)。

但是,我只是无法在地图上显示多边形或矩形,这让我发疯了!我已按照documentation for polygons 中的说明进行操作,但并不高兴。我试过google.maps.Polygongoogle.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版本available here你可以玩。

【问题讨论】:

    标签: javascript google-maps google-maps-api-3


    【解决方案1】:
    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);
    

    【讨论】:

    • 噢!不敢相信我错过了!非常感谢您指出显而易见的(尽管我想知道为什么它没有导致 JS 错误?)
    猜你喜欢
    • 1970-01-01
    • 2015-06-03
    • 2012-01-01
    • 2014-05-09
    • 1970-01-01
    • 2023-03-26
    • 2012-02-08
    • 1970-01-01
    • 2016-07-20
    相关资源
    最近更新 更多