每个infowindow都显示相同的数据映射API v3 [英] Every infowindow is displaying the same data maps api v3
本文介绍了每个infowindow都显示相同的数据映射API v3的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
var markers = [];
var contentArray = [];
var titleArray = [];
var latlngArray = [];
var map;
// var infowindow;
var演唱会;
$ b函数defaultMap（）
{
//纬度：38
//经度：-97
//window.alert(\"inside function ）;
var mapOptions = {
center：new google.maps.LatLng（38，-97），
zoom：4，
mapTypeId：google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map（document.getElementById（map），
mapOptions）;
// window.alert（addMarkers的contentArray的大小是：+ contentArray.length）;
//window.alert(\"addMarkers titleArray的大小是：+ titleArray.length）;
// window.alert（addMarkers latLongArray的大小是：+ latlngArray.length）;
// for（var i = 0; i <2; i ++）
// {
// if（i == 0 ）
// {
// marker = new google.maps.Marker（{
// position：new google.maps.LatLng（37.8172784，-96.8909115），
/ / map：map
//}）;
// markers.push（marker）;
//}
// else
// {
// marker = new google.maps.Marker（{
// position：new google.maps。 LatLng（37.8172973，-96.8766355），
// map：map
//}）;
// markers.push（marker）;
//}
// // markers [0] = new google.maps.LatLng（37.8172784，-96.8909115）;
// // markers [1] = new google.maps.LatLng（37.8172973，-96.8766355）;
//
//}
// addMarkers（）;
}
//功能
//
// {
// infowindow = new google.maps。 InfoWindow（{
// content：list
//}）;
//google.maps.event.addListener(marker,'click',function（）{
// infowindow.open（map，marker）;
//}）;
function addMarkers（）
{
//console.dir(contentArray[contentArray.length-1]）;
for（var i = 0; i <10; i ++）
{
if（i == 0）
{
//window.alert（ i =+ i）;
console.log（latlngArray [i]）;
var marker = new google.maps.Marker（{
position：latlngArray [i]，
animation：google.maps.Animation.DROP，
icon：'./ images /club.png'，
title：titleArray [i]，
map：map
}）;
//marker.setMap（map）;
var infowindow = new google.maps.InfoWindow（{
}）;
google.maps.event.addListener（marker，'click'，function（）
{
//console.log（infowindow.getContent（））;
infowindow.setContent（contentArray [i]）;
infowindow.open（map，this）;
}）;
markers.push（marker）;
}
else
{
console.log（latlngArray [i]）;
var marker = new google.maps.Marker（{
position：latlngArray [i]，
animation：google.maps.Animation.DROP，
icon：'./ images /restaurant.png'，
title：titleArray [i]，
map：map
}）;
var infowindow = new google.maps.InfoWindow（{}）;
//console.log（infowindow.getContent（））;
google.maps.event.addListener（marker，'click'，function（）
{
infowindow.setContent（contentArray [i]）;
console.log（infowindow.getContent（））;
infowindow.open（map，this）;
}）;
markers.push（marker）;
}
//console.log（i）;
//console.log(contentArray[i]）;
}
}
解决方案
此代码也适用于所有那些希望从数据库中检索多个标记的地图
我将粘贴一个Code of live project means加工。你可以从这里得到一些帮助。
函数latLongCallback（latitutde，longitutde）{
var latlng = new google。 maps.LatLng（latitutde，longitutde）;
var options = {zoom：4，center：latlng，mapTypeId：google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map（document.getElementById（'map'），options）;
$ .ajax（{类型：GET，
dataType：'json'，
url：'https://www.xyz.com/yourrfolder/markers。 php'，
成功：函数（响应）{
var total = response.length;
var data_array，名称，类型，地址，lat，lon，到达，离开，注释;
var infowindow = new google.maps.InfoWindow（）;
for（var i = 0; i< total; i ++）{
data_array = response [i];
name = data_array ['name'];
id = data_array ['id'];
address = data_array ['address'];
arrival = data_array ['arrival'];
departure = data_array ['departure'];
notes = data_array ['notes'];
lat = data_array ['lat'];
lon = data_array ['lon'];
icon = data_array ['icon'];
sc_id = data_array ['sc_id'];
var propPos = new google.maps.LatLng（lat，lon）;
propMarker = new google.maps.Marker（{
position：propPos，
map：map，
icon：icon，
zIndex：3
}）;
var contentString =< div style ='font-size：9px; overflow：hidden'>+ name +< br />< label class ='label'>位置：< / label>+ address +< br />< label class ='label'>抵达：< / label>+ arrival +< br />< label class ='标签'>出发：< / label>+ departure +< br />< label class ='label'>注意：< / label>+ notes +< / div>< div style ='font-size：9px; overflow：hidden'>< a href ='＃2'onclick =+ xx +class ='popup-txt'style ='font-size：11px; margin-top ：3px;'>给他发信< / a>< a href ='＃1'onclick =+ invite +class ='popup-txt'style ='font-size：11px; margin-top：3px; float ：right;'>邀请朋友< / a>< / div>;
函数bindInfoWindow（marker，map，infowindow，html）{
google.maps.event.addListener（marker，'click'，function（）{
infowindow.setContent html）;
infowindow.open（map，marker）;
}）;
bindInfoWindow（propMarker，map，infowindow，contentString）;
}
}
}）;
return;
}
这里是上面提到的marker.php js
<？php
$ data = array（）;
$ retrive_marker_query =您的查询;
$ result = db_execute（$ retrive_marker_query）;
$ cnt = 0;
while（$ row = mysql_fetch_assoc（$ result））{
$ name = $ row ['name'];
$ id = $ row ['fb_id'];
$ sc_id = $ row ['id'];
$ address = $ row ['location'];
$ lat = $ row ['lat'];
$ lon = $ row ['lon'];
$ data [$ cnt] ['name'] = $ name;
$ data [$ cnt] ['id'] = $ id;
$ data [$ cnt] ['sc_id'] = $ sc_id;
$ data [$ cnt] ['address'] = $ address;
$ data [$ cnt] ['lat'] = $ lat;
$ data [$ cnt] ['lon'] = $ lon;
$ cnt ++;
}
$ data = json_encode（$ data）;
echo（$ data）;
<？
I am really stuck on something. Every map marker's infowindow is displaying the same info. It seems to be the content at the end of an array that i use to store content nodes every time. I am pretty sure it is because the infowindow is not being attached to the proper marker
var markers = [];
var contentArray = [];
var titleArray = [];
var latlngArray = [];
var map;
//var infowindow;
var concert;
function defaultMap()
{
//Latitude: 38
//Longitude: -97
//window.alert("inside function");
var mapOptions = {
center:new google.maps.LatLng(38,-97),
zoom:4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),
mapOptions);
// window.alert("addMarkers the size of contentArray is: "+contentArray.length);
//window.alert("addMarkers the size of the titleArray is: "+titleArray.length);
// window.alert("addMarkers the size of the latLongArray is: "+latlngArray.length);
//for(var i =0;i<2;i++)
//{
// if(i == 0)
// {
// marker = new google.maps.Marker({
// position: new google.maps.LatLng(37.8172784,-96.8909115),
// map:map
// });
// markers.push(marker);
// }
// else
// {
// marker = new google.maps.Marker({
// position: new google.maps.LatLng(37.8172973,-96.8766355),
// map:map
// });
// markers.push(marker);
// }
// //markers[0] = new google.maps.LatLng(37.8172784,-96.8909115);
// //markers[1] = new google.maps.LatLng(37.8172973,-96.8766355);
//
//}
//addMarkers();
}
//function
//
//{
//infowindow = new google.maps.InfoWindow({
//content:list
//});
//google.maps.event.addListener(marker,'click',function(){
// infowindow.open(map,marker);
//});
function addMarkers()
{
//console.dir(contentArray[contentArray.length-1]);
for(var i = 0;i <10;i++)
{
if(i == 0)
{
//window.alert("i = "+i);
console.log(latlngArray[i]);
var marker = new google.maps.Marker({
position:latlngArray[i],
animation:google.maps.Animation.DROP,
icon:'./images/club.png',
title:titleArray[i],
map:map
});
//marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
});
google.maps.event.addListener(marker,'click',function()
{
//console.log(infowindow.getContent());
infowindow.setContent(contentArray[i]);
infowindow.open(map,this);
});
markers.push(marker);
}
else
{
console.log(latlngArray[i]);
var marker = new google.maps.Marker({
position:latlngArray[i],
animation:google.maps.Animation.DROP,
icon:'./images/restaurant.png',
title:titleArray[i],
map:map
});
var infowindow = new google.maps.InfoWindow({});
//console.log(infowindow.getContent());
google.maps.event.addListener(marker,'click',function()
{
infowindow.setContent(contentArray[i]);
console.log(infowindow.getContent());
infowindow.open(map,this);
});
markers.push(marker);
}
//console.log(i);
//console.log(contentArray[i]);
}
}
解决方案
This Code is also for all those who want to put multiple Markers on Map retrieved from DB
i am going to paste a Code of live project means working. you can get some help from this.
function latLongCallback(latitutde,longitutde){
var latlng = new google.maps.LatLng(latitutde, longitutde);
var options = {zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById('map'), options);
$.ajax({type: "GET",
dataType: 'json',
url: 'https://www.xyz.com/yourrfolder/markers.php',
success: function(response){
var total=response.length;
var data_array,name,type,address,lat,lon,arrival,departure,notes;
var infowindow = new google.maps.InfoWindow();
for(var i=0; i < total; i++){
data_array=response[i];
name=data_array['name'];
id = data_array['id'];
address=data_array['address'];
arrival=data_array['arrival'];
departure=data_array['departure'];
notes=data_array['notes'];
lat=data_array['lat'];
lon=data_array['lon'];
icon=data_array['icon'];
sc_id=data_array['sc_id'];
var propPos = new google.maps.LatLng(lat,lon);
propMarker = new google.maps.Marker({
position: propPos,
map: map,
icon: icon,
zIndex: 3
});
var contentString = "<div style='font-size:9px;overflow:hidden'>"+name+"<br/><label class='label'>Location :</label> "+address+"<br/><label class='label'>Arrival :</label> "+arrival+"<br/><label class='label'>Departure :</label> "+departure+"<br/><label class='label'>Notes :</label> "+notes + "</div><div style='font-size:9px;overflow:hidden'><a href='#2' onclick="+xx+" class='popup-txt' style='font-size:11px; margin-top:3px;'>Message him</a><a href='#1' onclick="+invite+" class='popup-txt' style='font-size:11px; margin-top:3px; float:right;'>Invite Friend</a></div>";
function bindInfoWindow(marker, map, infowindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html);
infowindow.open(map, marker);
});
bindInfoWindow(propMarker, map, infowindow, contentString);
}
}
});
return;
}
and here is the marker.php mentioned in above js
<?php
$data=array();
$retrive_marker_query = "your query";
$result = db_execute($retrive_marker_query);
$cnt=0;
while ($row = mysql_fetch_assoc($result)){
$name = $row['name'];
$id = $row['fb_id'];
$sc_id = $row['id'];
$address = $row['location'];
$lat = $row['lat'];
$lon = $row['lon'];
$data[$cnt]['name'] = $name;
$data[$cnt]['id'] = $id;
$data[$cnt]['sc_id'] = $sc_id;
$data[$cnt]['address'] = $address;
$data[$cnt]['lat'] = $lat;
$data[$cnt]['lon'] = $lon;
$cnt++;
}
$data=json_encode($data);
echo($data);
<?
这篇关于每个infowindow都显示相同的数据映射API v3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
