gpt4 book ai didi

google-maps - 动态谷歌地图信息窗口加载循环中最后一条记录的内容

转载 作者:行者123 更新时间:2023-12-04 22:37:03 27 4
gpt4 key购买 nike

我遇到了一个问题,我的弹出窗口中的内容(单击标记时)正在显示我最后一条记录的内容。

我找到了一些帮助here ,但我仍然有问题。

这是我的代码

集合.js

[
{
"lat": "-25.363882",
"lng": "131.044922",
"category": "cat1",
"title": "Heading #1",
"description": "desc1",
"imageurl": "http://ursispaltenstein.ch/blog/images/uploads_img/national_geographic_wallpaper_1.jpg",
"pageLink": "http://www.google.com"
},
{
"lat": "-26.363882",
"lng": "200.044922",
"category": "cat2",
"title": "Heading #2",
"description": "desc2",
"imageurl": "http://www.creativepics.org/wp-content/uploads/2009/10/National-Geographic-Wallpapers-002.jpg",
"pageLink": "http://www.google.com"
}
,
{
"lat": "-28.363882",
"lng": "81.044922",
"category": "cat3",
"title": "Heading #3",
"description": "desc3",
"imageurl": "http://blog.rapidsea.com/wp-content/uploads/2008/03/20080316-bora-bora-national-geographic.jpg",
"pageLink": "http://www.google.com"
}
]

页面 javascript
var pointMap = { map: null }

$(function () {
pointMap.init('#map_canvas', new google.maps.LatLng(0, 0), 2);
pointMap.placeMarkers('collection.js');
});

pointMap.init = function (selector, latLng, zoom) {
var myOptions = {
zoom: zoom,
center: latLng,
mapTypeId: google.maps.MapTypeId.HYBRID
}
this.map = new google.maps.Map($(selector)[0], myOptions);
}

pointMap.placeMarkers = function (filename) {
$.getJSON(filename, function (data) {
for (var x = 0; x < data.length; x++) {
var location = data[x];

var point = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lng));
var marker = new google.maps.Marker({
position: point,
map: pointMap.map,
title: location.title
});

var popupContent = '<div id="locationContent">' +
'<div>' + location.category + '</div>' +
'<div>' + location.title + '</div>' +
'<div>' + location.description + '</div>' +
'<div><a href="' + location.pageLink + '">See This Story >></a></div>' +
'<div><img width="250" src="' + location.imageurl + '" /></div>' +
'</div>';

var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(popupContent);
infoWindow.open(pointMap.map, this);
});
}

});
}

html
<!DOCTYPE html>
<html>
<head>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
// javascript from above
</script>
</head>
<body>
<div id="map_canvas"></div>

</body>
</html>

标记都加载在正确的位置,窗口都在正确的位置打开,但是 InfoWindow (popupContent) 中加载的内容是我对所有标记的最后记录。

谢谢你的帮助

最佳答案

所以我改为将 infoWIndow 的创建推到一个单独的函数中,而不是在循环中,它似乎有效。

更新代码

pointMap.placeMarkers = function (filename) {
$.getJSON(filename, function (data) {
for (var x = 0; x < data.length; x++) {
var location = data[x];

var point = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lng));
var marker = new google.maps.Marker({
position: point,
map: pointMap.map,
title: location.title
});

var popupContent = '<div id="locationContent">' +
'<div>' + location.category + '</div>' +
'<div>' + location.title + '</div>' +
'<div>' + location.description + '</div>' +
'<div><a href="' + location.pageLink + '">See This Story >></a></div>' +
'<div><img width="250" src="' + location.imageurl + '" /></div>' +
'</div>';

createInfoWindow(marker, popupContent);
}

});
}

var infoWindow = new google.maps.InfoWindow();
function createInfoWindow(marker, popupContent) {
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(popupContent);
infoWindow.open(pointMap.map, this);
});
}

关于google-maps - 动态谷歌地图信息窗口加载循环中最后一条记录的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4269419/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com