首页 文章

如何在多个标记谷歌 Map 上创建一个信息窗口?

提问于
浏览
1

我正在尝试实现infowindow弹出我使用AJAX添加到谷歌 Map 上的多个自定义标记,但我似乎没有工作 . 在我开始尝试使用infowindow并添加listenMarker()函数之前,一切都运行得很好,我在 Map 上的所有正确位置都有多个图标 . 但是点击它们我也需要信息窗口 . 这是我的代码:

在这里,我点击以下所有我需要的电话:

var latitd;
var longtd;

$(document).ready(function() {  
      $('#earthquakes').click(function() {
        $("#sideinfo ul").empty(function(){
          createMarker(); 
           listenMarker();
        }); 
     getQuakes();
     initMap();
    });  
  });

这里是我的功能和谷歌 Map 初始化infowindow听众 .

function getQuakes() {
    $.ajax({
        url:"http://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=" + yesterDate + '&endtime=' + displayDate,
        success: function(data) {
            $.each(data.features, function(key, val) {
                titleName = val.properties.place;
                var coord = val.geometry.coordinates;
                locationD = {
                    latd: coord[1],
                    lngd: coord[0]
                };

                latitd = locationD.latd;
                longtd = locationD.lngd;
  displayMarkers(); 
            });
        }
    });
}


function displayMarkers() {
    latlng = new google.maps.LatLng(latitd, longtd);
    var name = titleName;
    createMarker(latlng, name);
}

function createMarker(latlng, name) {
    var marker = new google.maps.Marker({
        map: map,
        position: latlng,
        title: name,

    });
}

function initMap() {
    var firstLat = 10;
    var firstLng = 10;    
    map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: parseInt(firstLat),
            lng: parseInt(firstLng)
        },
        zoom: firstZ,
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        disableDefaultUI: true
    });


    function listenMarker(marker) {
        // so marker is associated with the closure created for the listenMarker function call
        google.maps.event.addListener(marker, 'click', function() {
            tooltip.open(map, marker);
        });
    }
}

1 回答

  • 1

    您正在尝试使用 tooltip.open(map, marker); 打开信息窗口 . 在 listenMarker 函数中,使用 infowindow.open(map, marker);

    初始化信息窗口本身:

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

    Full example

相关问题