2

マップシェーディングhttp://demo.silkea.com/map_shade.png

たとえば、参照領域の描画を実行しようとしています。影付きで静的であり、それ以上のユーザー入力や変更はありません。

JavascriptとGoogleMapV3で達成しようとすると、静的ではなく動的に描画する例を見つけることができます。

助けていただければ幸いです

彼女を手に入れました...これは他の人のためです...提案のための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>
4

1 に答える 1

1

インフォボックスが必要なことを実行するようです。マップ上のラベルと同様に機能します。または、特定の座標でコーナーを正確に定義できるものが必要な場合は、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)
];

そして、最後の2つのポイントの順序を逆にすると、次のようになります。

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)

];

そして、これはうまくいくでしょう。これは、ローカル単体テストを実行して取得したマップの画像です。 ここに画像の説明を入力してください

于 2012-05-03T04:31:45.157 に答える