将infowindow添加到Google地图 [英] adding infowindow to google maps
本文介绍了将infowindow添加到Google地图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在Google地图上添加一些infowindow内容到我的标记上。我可以查询我的服务器，获取一些数据，将标记放在地图上。这样可行。不起作用的是当我点击标记时没有任何反应。我会认为infowindow会弹出。不幸的是，自从我完成谷歌地图编程以来，这已经很久了，我正在有效地重新开始。出于某种原因，标记的点击事件未被调用。任何关于我的愚蠢的建议，都表示赞赏。 TIA
< script>
var map，geocoder;
var Markers = [];
函数initMap（）{
map = new google.maps.Map（document.getElementById（'map'），{
center：{lat：0.0，lng：0.0}，
zoom：12
}）;
if（！Modernizr.geolocation）{
alert（您的浏览器很糟糕，您可以购买一个新的，也许是最新的并且支持GPS的。）
return;
}
else {
navigator.geolocation.getCurrentPosition（show_map）;
}
}
函数show_map（position）{
map.setZoom（12）;
var Latitude = position.coords.latitude;
var Longitude = position.coords.longitude;
map.setCenter（{lat：Latitude，lng：Longitude}）;
var bounds = map.getBounds（）;
var url =/ api / xxxxxxxxjsonendpoint;
var lowerLeft = bounds.getSouthWest（）;
var upperRight = bounds.getNorthEast（）;
var lat0 = lowerLeft.lat（）;
var lng0 = lowerLeft.lng（）;
var lat1 = upperRight.lat（）;
var lng1 = upperRight.lng（）;
var geocoder = new google.maps.Geocoder（）;
var data = {LowerLeftLat：lat0，LowerLeftLng：lng0，UpperRightLat：lat1，UpperRightLng：lng1};
$ .get（url，data，function（result）{
for（var i = 0; i< result.length; i ++）{
var address = result [i]。 Address1 ++（result [i] .Address2！= null？result [i] .Address2：）++ result [i] .City ++ result [i] .Province ++ results [i] .PostalCode ++ result [i] .Country;
var marker = new google.maps.Marker（{
position：geocodeAddress（geocoder，map，address），
map：map，
title：address
））;
var infowindow = new google.maps.InfoWindow（{
content：
}）;
makeInfoWindowEvent（map，infowindow，test+ i，marker）;
}
}）;
函数geocodeAddress（geocoder，resultsMap，address）{
geocoder.geocode（{'address'：address}，function（results，status）{
if（status = =='OK'）{
resultsMap.setCenter（results [0] .geometry.location）;
var marker = new google.maps.Marker（{
map：resultsMap，
} else {
alert（'由于以下原因，地理编码不成功：'+ status'）;
}
}）;
}
函数makeInfoWindowEvent（map，infowindow，contentString，marker）{
google.maps.event.addListener（marker，'click'，function（）{
infowindow.setContent （contentString）;
infowindow.open（map，marker）;
}）;
}
< / script>
这是我的代码的最新更新。仍然没有工作........
< script>
var map，geocoder;
var Markers = [];
var infowindow;
函数initMap（）{
map = new google.maps.Map（document.getElementById（'map'），{
center：{lat：0.0，lng：0.0}，
zoom：12
}）;
infowindow = new google.maps.InfoWindow（）;
if（！Modernizr.geolocation）{
alert（您的浏览器很糟糕，您可以购买一个新的，也许是最新的并且支持GPS的。）
return;
}
else {
navigator.geolocation.getCurrentPosition（show_map）;
}
}
函数show_map（position）{
map.setZoom（12）;
var Latitude = position.coords.latitude;
var Longitude = position.coords.longitude;
map.setCenter（{lat：Latitude，lng：Longitude}）;
var bounds = map.getBounds（）;
var url =/ api / xxxxxxx / yyyyyyyyyy;
var lowerLeft = bounds.getSouthWest（）;
var upperRight = bounds.getNorthEast（）;
var lat0 = lowerLeft.lat（）;
var lng0 = lowerLeft.lng（）;
var lat1 = upperRight.lat（）;
var lng1 = upperRight.lng（）;
var geocoder = new google.maps.Geocoder（）;
var data = {LowerLeftLat：lat0，LowerLeftLng：lng0，UpperRightLat：lat1，UpperRightLng：lng1};
$ .get（url，data，function（result）{
for（var i = 0; i< result.length; i ++）{
var address = result [i]。 Address1 ++
（result [i] .Address2！= null？result [i] .Address2：）+
+ result [i] .City ++ result [邮件代码++ result [i] .Country;
var marker = new google.maps.Marker（{
position： geocodeAddress（geocoder，map，address），
map：map，
title：address，
content：address
}）;
makeInfoWindowEvent（infowindow ，test+ i，marker）;
}
}）;
函数geocodeAddress（geocoder，resultsMap，address）{
geocoder.geocode（{'address'：address}，function（results，status）{
if（status = =='OK'）{
resultsMap.setCenter（results [0] .geometry.location）;
var marker = new google.maps.Marker（{
map：resultsMap，
} else {
alert（'由于以下原因，地理编码不成功：'+ status'）;
}
}）;
}
函数makeInfoWindowEvent（infowindow，contentString，marker）{
（zinfowindow，zcontentString，zmarker）{
zinfowindow.setContent（zcontentString）;
google。 maps.event.addListener（zmarker，'click'，function（）{
zinfowindow.open（map，zmarker）;
}）;
}）（infowindow，contentString，marker）;
}
< / script>
解决方案
您的代码崩溃是因为当侦听器正在调用时 marker 和 infowindow 的值已经更改。你可以尝试像这样（只需更改 makeInfoWindowEvent 函数）：
function makeInfoWindowEvent（map，infowindow，contentString，marker）{
google.maps.event.addListener（marker，'click'，function（）{
infowindow.setContent（contentString）;
infowindow.open（map，marker）;
console.log（contentString）;
console.log（marker）;
}）;
}
通常情况下，输出对于 contentString 和 marker 。
为了传递 marker ， contentString 和 infowindow ，您必须创建一个 IIFE 。像这样，变量的值将被复制到函数中：
$ p $函数makeInfoWindowEvent（map，infowindow，contentString，marker） {
（zinfowindow，zcontentString，zmarker）{
zinfowindow.setContent（zcontentString）;
google.maps.event.addListener（zmarker，'click'，function（）{
zinfowindow.open（map，zmarker）;
}）;
}）（infowindow，contentString，marker）;
}
但是，您不需要将map作为参数传递，因为map b
$ b
告诉我你是否有问题。
I'm trying to add some infowindow content to my markers on a google map. I can query my server, get some data, put the markers on the map. That works. What doesn't work is that nothing happens when I click on the marker. I would think that the infowindow would popup. Unfortunately, it has been so long since I have done google maps programming, I am effectively starting over. For some reason, the marker's click event is not being called. Any suggestions regarding my dumbness are appreciated. TIA
<script>
var map, geocoder;
var Markers = [];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 0.0, lng: 0.0 },
zoom: 12
});
if (!Modernizr.geolocation) {
alert("Your browser sucks. Get a new one, maybe one that is up to date and supports GPS.")
return;
}
else {
navigator.geolocation.getCurrentPosition(show_map);
}
}
function show_map(position) {
map.setZoom(12);
var Latitude = position.coords.latitude;
var Longitude = position.coords.longitude;
map.setCenter({ lat: Latitude, lng: Longitude });
var bounds = map.getBounds();
var url = "/api/xxxxxxxxjsonendpoint";
var lowerLeft = bounds.getSouthWest();
var upperRight = bounds.getNorthEast();
var lat0 = lowerLeft.lat();
var lng0 = lowerLeft.lng();
var lat1 = upperRight.lat();
var lng1 = upperRight.lng();
var geocoder = new google.maps.Geocoder();
var data = { LowerLeftLat: lat0, LowerLeftLng: lng0, UpperRightLat: lat1, UpperRightLng: lng1 };
$.get(url, data, function (result) {
for (var i = 0; i < result.length; i++) {
var address = result[i].Address1 + " " + (result[i].Address2 != null ? result[i].Address2 : "") + " " + result[i].City + " " + result[i].Province + " " + result[i].PostalCode + " " + result[i].Country;
var marker = new google.maps.Marker({
position: geocodeAddress(geocoder, map, address),
map: map,
title: address
});
var infowindow = new google.maps.InfoWindow({
content: i
});
makeInfoWindowEvent(map, infowindow, "test" + i, marker);
}
});
}
function geocodeAddress(geocoder, resultsMap, address) {
geocoder.geocode({ 'address': address }, function (results, status) {
if (status === 'OK') {
resultsMap.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: resultsMap,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function makeInfoWindowEvent(map, infowindow, contentString, marker) {
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
}
</script>
Here is the most recent update of my code. Still no worky........
<script>
var map, geocoder;
var Markers = [];
var infowindow;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 0.0, lng: 0.0 },
zoom: 12
});
infowindow = new google.maps.InfoWindow();
if (!Modernizr.geolocation) {
alert("Your browser sucks. Get a new one, maybe one that is up to date and supports GPS.")
return;
}
else {
navigator.geolocation.getCurrentPosition(show_map);
}
}
function show_map(position) {
map.setZoom(12);
var Latitude = position.coords.latitude;
var Longitude = position.coords.longitude;
map.setCenter({ lat: Latitude, lng: Longitude });
var bounds = map.getBounds();
var url = "/api/xxxxxxx/yyyyyyyyyy";
var lowerLeft = bounds.getSouthWest();
var upperRight = bounds.getNorthEast();
var lat0 = lowerLeft.lat();
var lng0 = lowerLeft.lng();
var lat1 = upperRight.lat();
var lng1 = upperRight.lng();
var geocoder = new google.maps.Geocoder();
var data = { LowerLeftLat: lat0, LowerLeftLng: lng0, UpperRightLat: lat1, UpperRightLng: lng1 };
$.get(url, data, function (result) {
for (var i = 0; i < result.length; i++) {
var address = result[i].Address1 + " " +
(result[i].Address2 != null ? result[i].Address2 : "") +
" " + result[i].City + " " + result[i].Province + " " +
result[i].PostalCode + " " + result[i].Country;
var marker = new google.maps.Marker({
position: geocodeAddress(geocoder, map, address),
map: map,
title: address,
content: address
});
makeInfoWindowEvent(infowindow, "test" + i, marker);
}
});
}
function geocodeAddress(geocoder, resultsMap, address) {
geocoder.geocode({ 'address': address }, function (results, status) {
if (status === 'OK') {
resultsMap.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: resultsMap,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function makeInfoWindowEvent(infowindow, contentString, marker) {
(function (zinfowindow, zcontentString, zmarker) {
zinfowindow.setContent(zcontentString);
google.maps.event.addListener(zmarker, 'click', function () {
zinfowindow.open(map, zmarker);
});
})(infowindow, contentString, marker);
}
</script>
解决方案
Your code crash because when the listener is calling, the value of marker and infowindow have already changed. You can try something like this (just change the makeInfoWindowEvent function):
function makeInfoWindowEvent(map, infowindow, contentString, marker) {
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(contentString);
infowindow.open(map, marker);
console.log (contentString);
console.log (marker);
});
}
Normally, the output will be always the same for contentString and marker.
In order to pass the real value of the marker, contentString and infowindow, you have to create an IIFE. Like this, the value of the variables will be copy inside the function:
function makeInfoWindowEvent(map, infowindow, contentString, marker) {
(function (zinfowindow, zcontentString, zmarker) {
zinfowindow.setContent(zcontentString);
google.maps.event.addListener(zmarker, 'click', function () {
zinfowindow.open(map, zmarker);
});
})(infowindow, contentString, marker);
}
However, you do not need to pass map as parameter because the value of map is always the same.
Tell me if you have some questions.
这篇关于将infowindow添加到Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
