Question

Map Shaded 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>

Answer 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)

];

这样可以正常工作。这是我运行本地单元测试的地图图像： enter image description here

在Google Map V3上绘制阴影区域 - Javascript

1 个答案: