如何在groundOverlay地图中显示标记?

时间:2013-08-23 17:23:15

标签: api google-maps overlay google-maps-markers

我可以设法在地图上显示我的图像叠加层。但是出现了一个新问题 - 我无法在其上添加标记。我用Google搜索了一段时间但没有运气。试图搜索和模仿文档上的例子,似乎没有什么是正确的。

这是我的代码:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
    function initialize() {
      var newark = new google.maps.LatLng(xx.xxxxx,xx.xxxxx);
      var imageBounds = new google.maps.LatLngBounds(
          new google.maps.LatLng(xx.xxxxx,xx.xxxxx),//SW
          new google.maps.LatLng(xx.xxxxx,xx.xxxxx)//NE
        );

      var mapOptions = {
        zoom: 20,
        center: newark,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

      var oldmap = new google.maps.GroundOverlay(
          'images/floor_plan_trans_rotated.gif',
          imageBounds);
      oldmap.setMap(map);
    }

    /*markers*/
      var contentString = '<div id="content">'+
          '<div id="siteNotice">'+
          '</div>'+
          '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
          '<div id="bodyContent">'+
          '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
          'sandstone rock formation in the southern part of the '+
          'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
          'south west of the nearest large town, Alice Springs; 450&#160;km '+

</p>'+
      '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
      content: contentString,
      maxWidth: 400
  });

  var marker = new google.maps.Marker({
      position: newark,
      map: map,
      title: 'Uluru (Ayers Rock)'
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}

/*markers*/
google.maps.event.addDomListener(window, 'load', initialize);
    </script>
<div id="map-canvas"></div>

对于上面的代码。除非我删除/ 标记 /。

之间的那些行,否则不会显示地图

请建议。 的问候,

2 个答案:

答案 0 :(得分:0)

在此代码的第一个/ 标记 /上面是否有额外的}?或者我可能只是困了....

我正在做类似的事情并且它正在工作,在同一张地图上使用groundOverlay和marker

答案 1 :(得分:0)

你的代码中有很多东西放错了地方。

  1. 在&lt; / p&gt;
  2. 之前缺少单引号(&#39;)
  3. 先关闭初始化函数大括号(})
  4. 休息一切似乎都很好。我纠正了这些,这是完整的代码。

    <script>
        function initialize() {
            var newark = new google.maps.LatLng(xx.xxxxx,xx.xxxxx);
            var imageBounds = new google.maps.LatLngBounds(
                new google.maps.LatLng(xx.xxxxx,xx.xxxxx),//SW
                new google.maps.LatLng(xx.xxxxx,xx.xxxxx)//NE
            );
    
            var mapOptions = {
                zoom: 18,
                center: newark,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
    
            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    
            var oldmap = new google.maps.GroundOverlay(
                'images/floor_plan_trans_rotated.gif', imageBounds);
            oldmap.setMap(map);
    
            /*markers*/
            var contentString = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
                '<div id="bodyContent">'+
                '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
                'sandstone rock formation in the southern part of the '+
                'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
                'south west of the nearest large town, Alice Springs; 450&#160;km '+
                '</p>'+
                '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
                'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
                '(last visited June 22, 2009).</p>'+
                '</div>'+
                '</div>';
    
            var infowindow = new google.maps.InfoWindow({
                content: contentString,
                maxWidth: 400
            });
    
            var marker = new google.maps.Marker({
                position: newark,
                map: map,
                title: 'Uluru (Ayers Rock)'
            });
    
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });
        }
    
        /*markers*/
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>