谷歌地圖上繪製V3的陰影區域 - 的Javascript

Map Shaded http://demo.silkea.com/map_shade.png 谷歌地圖上繪製V3的陰影區域 - 的Javascript

我試圖完成繪製例如參考區域。只是陰影，靜態，沒有進一步的用戶輸入或更改。

試圖用Javascript和谷歌地圖V3完成 - 可以找到動態繪製的例子，但不是靜態的。

任何幫助表示讚賞

得到她......這是給別人... THX建議...

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 

function initialize() { 
var myLatLng = new google.maps.LatLng(51.176630373, -114.47321937); 
var myOptions = { 
    zoom: 15, 
    center: myLatLng, 
    mapTypeId: google.maps.MapTypeId.HYBRID 
}; 

var mapsquare; 

var map = new google.maps.Map(document.getElementById("map_canvas"), 
    myOptions); 

var squareCoords = [ 
new google.maps.LatLng(51.179858807660786, -114.47836921691896), 
new google.maps.LatLng(51.173563152178794, -114.47836921691896), 
new google.maps.LatLng(51.173563152178794, -114.46892784118654), 
new google.maps.LatLng(51.179858807660786, -114.46892784118654) 
]; 

// Construct the polygon 
mapsquare = new google.maps.Polygon({ 
    paths: squareCoords, 
    strokeColor: "#FF0000", 
    strokeOpacity: 1, 
    strokeWeight: 1, 
    fillColor: "#FF0000", 
    fillOpacity: 0.35 
}); 

mapsquare.setMap(map); 
} 
</script> 
</head> 
<body onload="initialize()"> 

<br><br> 


NW Marker <br> 
51.179858807660786 &nbsp;&nbsp;&nbsp; -114.47836921691896 
<br><br> 
SE Marker<br> 
51.173563152178794 &nbsp;&nbsp;&nbsp; -114.46892784118654 
<br><br> 
<div id="map_canvas" style="width: 850px; height: 450px;"></div> 



<br><br> 


<br><br> 
</body>

來源

2012-05-03 Merle_the_Pearl

很高興提供幫助。如果您認爲我的答案在下面提到了您的問題，那麼通常點擊答案旁邊的箭頭形狀表示接受。 –

這聽起來像一個InfoBox會做什麼你需要;它的功能類似於地圖上的標籤。或者，如果您需要某些東西可以讓您在特定座標處精確定義角點，則可以嘗試google.maps.Rectangle。

跟進編輯：

在你的代碼的問題是，座標2是無序的，所以形狀是越來越扭曲跟隨座標。如果你把現有的形狀座標：

var squareCoords = [ 
    new google.maps.LatLng(51.179858807660786, -114.47836921691896), 
    new google.maps.LatLng(51.173563152178794, -114.47836921691896), 
    new google.maps.LatLng(51.179858807660786, -114.46892784118654), 
    new google.maps.LatLng(51.173563152178794, -114.46892784118654) 
];

而剛剛扭轉最後兩個點的順序，你會得到：

var squareCoords = [ 
    new google.maps.LatLng(51.179858807660786, -114.47836921691896), 
    new google.maps.LatLng(51.173563152178794, -114.47836921691896), 
    new google.maps.LatLng(51.173563152178794, -114.46892784118654), 
    new google.maps.LatLng(51.179858807660786, -114.46892784118654) 

];

，這將很好地工作。這裏是我運行本地單元測試的地圖圖像： enter image description here

來源

2012-05-03 04:31:45

是的，我需要定義角座標...我會考慮矩形 –

小卡...不繪製正方形 - 繪製兩個矩形 - [鏈接]（http://demo.silkea.com/gps.htm） –

看起來你有一個角落翻轉。它扭曲自身以適應座標。深入瞭解一下。如果你只是改變廣場最後2點的順序，我認爲你會很好。仍然看起來更深 - –

谷歌地圖上繪製V3的陰影區域 - 的Javascript

回答

相關問題