Question

我使用gmap2开发了一个地图应用程序。我使用了地面覆盖（温度图）来帮助用户确定感兴趣的位置并单击以选择。将gmap2替换为gmap3后，它将停止工作。更大的问题是我找不到通过点击gmap3在地面覆盖上添加标记的方法。有人提出了类似的问题，但没有答案。我希望gmap3中不会丢失这样的功能。非常感谢您的帮助。

enter code here

<script>
var map;
var mapCenter = new google.maps.LatLng(54.508742, -125.120850);
var pngBounds = new google.maps.LatLngBounds(new google.maps.LatLng(48.3367, -139.0402), 
                    new google.maps.LatLng(59.99008, -114.1095));

function initialize() {
     var mapProp = { center: mapCenter, zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP };
     map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
     var groundoverlay = new google.maps.GroundOverlay(
        "http://www.genetics.forestry.ubc.ca/cfcg/ClimateBC40/overlays/climate/MAT_1961_1990.png", pngBounds);
     groundoverlay.setMap(map);
     google.maps.event.addListener(map, 'click', function (event) { placeMarker(event.latLng); });
}

    function placeMarker(location) {
    var marker = new google.maps.Marker({ position: location, map: map, draggable: true });
}

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

在v3中，您必须使groundOverlay不可点击

var groundoverlay = new google.maps.GroundOverlay(
    "http://www.genetics.forestry.ubc.ca/cfcg/ClimateBC40/overlays/climate/MAT_1961_1990.png", pngBounds, **{clickable:false}**);

Answer 2

使用下面的代码就这么简单。.

let overlayGeoMapImg = new google.maps.GroundOverlay(
  '../assets/GNDVI.png',
  imageBounds);
  overlayGeoMapImg.setMap(map);

google.maps.event.addListener(overlayGeoMapImg, 'click', (event: any) => {
    this.ngZone.run(() => {
      marker = new google.maps.Marker({
        position: event.latLng,
        map: map,
        title: 'Hello World!'
      });
    });
  });

如何通过点击在地面覆盖上添加标记？

2 个答案: