Question

我花了两天时间迷惑这个并且失败了。任何帮助将不胜感激。

我需要一张以-18.975750,32.669184为中心的地图，画布为1500px x 900px。然后，我需要覆盖覆盖范围的PNG（从www.heywhatsthat.com获得），并设置代码透明度。

我最终得到了以下代码，但它失败了。我想添加一个以上的PNG绑定它的合作伙伴，但是甚至无法让它工作。

 <script src="http://maps.google.com/maps?file=api&amp;v=3&amp;key=AIzaSyAGbZjXr2wr7dT2P3O5pNo5wvVF3JiaopU&sensor=false"
        type="text/javascript"></script>
<script type="text/javascript">

function initialize() {
  if (GBrowserIsCompatible()) {
    var map = new google.maps.MAP(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(-18.975750, 32.669184), 13);
    map.setUIToDefault();

  var imageBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-19.000417,30.999583),
  new google.maps.LatLng(-17.999583,32.000417));

   var oldmap = new google.maps.GroundOverlay(
  "http://www.earthstation.mobi/cloakpS19E031.png",imageBounds);
   oldmap.setMap(map);
}

</script>
</head>
 <body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 1500px; height: 900px"></div>
 </body>
 </html>

我在做什么，请指出正确的方向，在选项中添加多个png叠加层。

由于布赖恩津巴布韦

Answer 1

您的代码存在很多问题。看起来您正在尝试从V2迁移到V3，并且您的代码中仍然有V2方法和对象。当你使用HTML时，你也没有正确加载JS APi。

以下是使用V3 API显示叠加层的功能代码，但看起来您使用的原始中心坐标不会将地图放置在叠加层的中心（您需要自己计算出来）。我已经在相关的地方添加了评论，以便您可以看到您误入歧途的位置。请注意第一个脚本标记中对API库的调用。

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

  function initialize() {
    //You don't need to use GBrowserIsCompatible, it's only for V2 of the API
    //if (GBrowserIsCompatible()) {
      //You need to set up options for the map that you reference when you
      //instantiate the map object
      var myOptions = {
                center: new google.maps.LatLng(-18.975750, 32.669184),
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP
              };
      //Your code references google.maps.MAP; it's google.maps.Map
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

      var imageBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(-19.000417,30.999583),
        new google.maps.LatLng(-17.999583,32.000417));

      var oldmap = new google.maps.GroundOverlay(
        "http://www.earthstation.mobi/cloakpS19E031.png",imageBounds);
        oldmap.setMap(map);
   //} <--Your code was missing this closing bracket for the conditional
       //But the conditional is not even needed, since GBrowserCompatible is a V2 thing
  }

  </script>
  </head>
   <body onload="initialize()">
  <div id="map_canvas" style="width: 1500px; height: 900px"></div>
   </body>
   </html>

谷歌地图v3地面覆盖？

1 个答案: