如何创建一个工作infoWindow并在其中使用事件侦听器?

Question

我试图创建一个信息窗口，显示一块文本'this is my marker'时，地图加载，但它没有显示。我用的代码和讲师ppt上的一模一样，但我不知道哪里出错了。

function initialize(){
    
    let mapDiv = document.getElementById('map');
    
    let mapOptions = {
        center: new google.maps.LatLng(Coords.lat,Coords.lng),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };
    
    let marker = new google.maps.Marker({
        position: new google.maps.LatLng(40.72,-74.00),
        map: map,
        title: 'I am here!',
        icon: svgMarker
    });
    
    var infoWindow = new google.maps.InfoWindow({content: 'This is my marker'});
    google.maps.event.addListener(marker, 'click', function()
    {
        infoWindow.open(map,this);
    });
    
        map = new google.maps.Map(document.getElementById("map"), mapOptions);
};

Answer 1

你的顺序有点错。您正在尝试添加标记& &;在创建映射之前，请先打开infoWindow。也许如果你像这样重新排列你的代码:

/* assumed that a global variable exists */
let Coords={
    lat:41,
    lng:-75
};

function initialize(){
    let options = {
        center: new google.maps.LatLng( Coords.lat,Coords.lng ),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };
    let map = new google.maps.Map( document.getElementById("map"), options );
  
    let marker = new google.maps.Marker({
        position: new google.maps.LatLng(40.72,-74.00),
        map: map,
        title: 'I am here!'
        /*,
        icon: svgMarker
        */
    });
  
    let infoWindow = new google.maps.InfoWindow( { content:'This is my marker' } );
        infoWindow.open( map, marker );
      
    google.maps.event.addListener(marker, 'click', function(e) {
        infoWindow.open(map,this);  
    });
};

要在加载地图时显示infoWindow，您应该调用open方法，如果您提供先前创建的标记作为第二个参数，它将出现在正确的位置。