2

地图阴影 http://demo.silkea.com/map_shade.png

例如，我正在尝试完成绘制参考区域。只是阴影，静态，没有进一步的用户输入或更改。

尝试使用 Javascript 和 Google Map V3 来完成 - 可以找到动态而非静态绘图的示例。

任何帮助表示赞赏

得到了她...这是给其他人的...谢谢您的建议...

 <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

听起来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)

];

这将正常工作。这是我运行本地单元测试的地图图像： 在此处输入图像描述

于 2012-05-03T04:31:45.157 回答