如何在多标记 google 地图上创建信息窗口?
How to create an infowindow on a multiple markers google map?
我正在尝试在我使用 AJAX 添加到 Google 地图上的多个自定义标记上弹出信息窗口,但我似乎没有工作。在我开始尝试使用 infowindow 并添加 listenMarker() 函数之前,一切正常,我在地图上的所有正确位置都有多个图标。但是在点击它们时我也需要信息窗口。这是我的代码:
这里我调用所有我需要的点击:
var latitd;
var longtd;
$(document).ready(function() {
$('#earthquakes').click(function() {
$("#sideinfo ul").empty(function(){
createMarker();
listenMarker();
});
getQuakes();
initMap();
});
});
这是我的函数和google地图初始化+信息窗口侦听器。
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);
});
}
}
您正在尝试使用 tooltip.open(map, marker);
打开信息 window。在您的 listenMarker
函数中,使用 infowindow.open(map, marker);
初始化信息 window 本身:
var infowindow = new google.maps.InfoWindow({
content: contentString
});
我正在尝试在我使用 AJAX 添加到 Google 地图上的多个自定义标记上弹出信息窗口,但我似乎没有工作。在我开始尝试使用 infowindow 并添加 listenMarker() 函数之前,一切正常,我在地图上的所有正确位置都有多个图标。但是在点击它们时我也需要信息窗口。这是我的代码:
这里我调用所有我需要的点击:
var latitd;
var longtd;
$(document).ready(function() {
$('#earthquakes').click(function() {
$("#sideinfo ul").empty(function(){
createMarker();
listenMarker();
});
getQuakes();
initMap();
});
});
这是我的函数和google地图初始化+信息窗口侦听器。
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);
});
}
}
您正在尝试使用 tooltip.open(map, marker);
打开信息 window。在您的 listenMarker
函数中,使用 infowindow.open(map, marker);
初始化信息 window 本身:
var infowindow = new google.maps.InfoWindow({
content: contentString
});