Javascript 使用Google Maps API的标记上未显示信息窗口
我正在使用jQuery的“each”循环创建标记和信息窗口，以迭代DOM元素。我定义了一个全局infomarker变量，根据mapsapi，这是一种使它一次只显示一个infomarker的方法。目前，单击标记不起任何作用。奇怪的是，在地图的中心有一个点，我可以点击它来显示一个信息标记（内容将其附加到其中一个标记上）。你知道我能做些什么来解决这个问题吗Javascript 使用Google Maps API的标记上未显示信息窗口,javascript,jquery,google-maps,google-maps-api-3,Javascript,Jquery,Google Maps,Google Maps Api 3,我正在使用jQuery的“each”循环创建标记和信息窗口，以迭代DOM元素。我定义了一个全局infomarker变量，根据mapsapi，这是一种使它一次只显示一个infomarker的方法。目前，单击标记不起任何作用。奇怪的是，在地图的中心有一个点，我可以点击它来显示一个信息标记（内容将其附加到其中一个标记上）。你知道我能做些什么来解决这个问题吗 $(function () { function initialize() { // Get city coordinates ..
$(function () {
function initialize() {
// Get city coordinates .. set map options so map centers on city .. place map on map-canvas
var page_city_lat = $("#page_city_lat").text();
var page_city_lng = $("#page_city_lng").text();
var mapOptions = {
center: new google.maps.LatLng(page_city_lat, page_city_lng),
zoom: 10
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// define concert object, mapCoords
function Concert(x)
{
this.lat = $(x).find(".lat").text();
this.lng = $(x).find(".lng").text();
this.headline = $(x).find(".event_title").text();
this.venue = $(x).find(".venue").text();
this.latlng = new google.maps.LatLng(this.lat, this.lng)
};
// Global infowindow variable declaration makes only 1 infowindow open at a time.
var infowindow = new google.maps.InfoWindow({});
// Necessary to pre-declare variable?
var map_ids = $(".map_id");
$.each(map_ids, function (index, value)
{
var listing = new Concert(value);
var concertString = 'headline: ' + listing.headline + '<br>' + 'Venue' + listing.venue
var concertMarker = new google.maps.Marker(
{
position: listing.latlng,
map: map,
title: listing.venue
});
infowindow.setContent(concertString);
google.maps.event.addListener(concertMarker, 'click', function () {
infowindow.open(map, concertMarker);
});
});
};
google.maps.event.addDomListener(window, 'load', initialize);
});
$（函数（）{
函数初始化（）{
//获取城市坐标..设置地图选项，使地图以城市为中心..将地图放置在地图画布上
var page_city_lat=$（“#page_city_lat”）.text（）；
var page_city_lng=$（“#page_city_lng”）.text（）；
变量映射选项={
中心：新的google.maps.LatLng（page_city_lat，page_city_lng），
缩放：10
};
var map=new google.maps.map（document.getElementById（“地图画布”），mapOptions）；
//定义协调对象，mapCoords
功能音乐会（x）
{
this.lat=$（x）.find（“.lat”）.text（）；
this.lng=$（x）.find（“.lng”）.text（）；
this.headline=$（x）.find（“.event_title”）.text（）；
this.venture=$（x）.find（“.venture”）.text（）；
this.latlng=新的google.maps.latlng（this.lat，this.lng）
};
//全局infowindow变量声明一次只打开一个infowindow。
var infowindow=new google.maps.infowindow（{}）；
//需要预先声明变量吗？
var map_id=$（“.map_id”）；
$.each（映射ID、函数（索引、值）
{
var清单=新音乐会（价值）；
var concertString='headline:'+listing.headline+'
'+'Venue'+listing.Venue
var concertMarker=new google.maps.Marker(
{
职位：listing.latlng，
地图：地图，
标题：列名地点
});
infowindow.setContent（concertString）；
google.maps.event.addListener（concertMarker，'click'，函数（）{
信息窗口。打开（地图、标记）；
});
});
};
google.maps.event.addDomListener（窗口“加载”，初始化）；
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Google Maps Example
</title>
<script src='http://code.jquery.com/jquery.min.js' type='text/javascript'>
</script>
</head>
<body>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var infowindow = null;
$(document).ready(function () {
initialize();
}
);
function initialize() {
var centerMap = new google.maps.LatLng(39.828175, -98.5795);
var myOptions = {
zoom: 4,
center: centerMap,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
content: "loading..."
}
);
var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);
}
var sites = [
['Delhi', 29.45155, 79.00268, 4, 'This is Delhi.'],
['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park']
];
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: sites[0],
zIndex: sites[3],
html: sites[4]
}
);
var contentString = "Some content";
google.maps.event.addListener(marker, "click", function () {
//alert(this.html);
infowindow.setContent(this.html);
infowindow.open(map, this);
}
);
}
}
</script>
<div id="map_canvas" style="width: 600px; height: 600px;">
</div>
</body>
</html>
谷歌地图示例
var infowindow=null；
$（文档）.ready（函数（）{
初始化（）；
}
);
函数初始化（）{
var centerMap=new google.maps.LatLng（39.828175，-98.5795）；
变量myOptions={
缩放：4，
中心：中心地图，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
设置标记（地图、地点）；
infowindow=新建google.maps.infowindow({
内容：“正在加载…”
}
);
var bikeLayer=new google.maps.BicyclingLayer（）；
bikeLayer.setMap（map）；
}
变量站点=[
[“德里”，29.45155，79.00268，4，“这是德里。”，
[“荒地国家公园”，43.785890，-101.90175，1，“这是荒地国家公园”]
];
函数集合标记（映射、标记）{
对于（var i=0；i