我一直致力于.NET地理编码应用程序,最终显示地址或地点的Google Map(使用v3 API)。地图在中心有一个标记,表示地理编码的点。这一切都有效。然后我想在地图上显示一个矩形/多边形形状叠加,它表示地理编码点周围的边界(这反映了地理编码的准确性,较大的边界表示精度较低)。 (我从API查询中得到了这些边界的坐标)。
然而,我只是无法在地图上显示多边形或矩形,这让我发疯了!我按照documentation for polygons中的说明操作,但没有快乐。我已经尝试了google.maps.Polygon
和google.maps.Rectangle
,但两者都没有运气。我也为边界尝试了不同的lat / lng但它没有区别。没有任何表现。我必须犯一些根本性的错误,但在这些树林里看不到任何树木!
基本代码(由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。
答案 0 :(得分:2)
new google.maps.LatLng(51.3493528),
你需要x,y coords,例如
new google.maps.LatLng(32.321384, -64.75737),
OR
你需要两个标记,例如:
var latLngBounds = new google.maps.LatLngBounds(
marker1.getPosition(),
marker2.getPosition()
);
rectangle.setBounds(latLngBounds);