如何使用ajax或类似方法动态更改Google地图标记 [英] How to change Google maps markers dynamically using ajax or similar
本文介绍了如何使用ajax或类似方法动态更改Google地图标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直在苦苦挣扎两天而无法管理。
我有一个带有谷歌地图的脚本，里面有几个标记。现在我需要在每次更改日历中选择的日期时更改标记。
我想我需要用ajax和php更改标记。 php部分没问题，但我无法改变标记。知道该怎么做以及怎么做？
我通过下面的地图代码，带有标记的php循环是需要动态更改的内容;
< div id =mapstyle =width：100％; height：300px>< / div>
< script>
var infowindow = null;
var markers = [];
函数initMap（）{
var myLatlng = new google.maps.LatLng（36.5505197，-4.8349095）;
var myOptions = {
zoom：10，
center：myLatlng，
mapTypeId：google.maps.MapTypeId.ROADMAP
};
var citiesObject = [
{
name：'BenalmádenaCosta'，
lat：36.5985811，
lon：-4.5184101，
zoom ：14
}，
{
名称：'Torrequebrada'，
lat：36.5843169，
lon：-4.5353021，
zoom：14
}，
{
名称：'Almuñecar'，
lat：36.7363573，
lon：-3.6936177，
zoom：14
}，
{
名称：'Estepona'，
lat：36.4078757，
lon：-5.1877823，
zoom：11
}，
{
名称：'Atalaya-Benavista'，
lat：36.4660413，
lon：-5.0289864，
zoom：13
}，
{
name ：'Fuengirola'，
lat：36.5457253，
lon：-4.6281043，
zoom：13
}，
{
name：'Carvajal'，
lat：36.5712203，
lon：-4.6022271，
zoom：13
}，
{
name：'MálagaCapital'，
lat：36.7139351，
lon：-4.424794，
zoom：14
}，
{
name：'Marbella Town'，
lat：36.5112345，
lon：-4.8869307，
zoom：14
}，
{
name：'Marbella East'，
lat：36.5053049，
lon：-4.7980592，
zoom：13
}，
{
name：'Marbella West'，
lat：36.4963191，
lon：-4.9380258 ，
zoom：13
}，
{
名称：'Marbella San Pedro'，
lat：36.4772001，
lon：-4.9984498，
zoom：13
}，
{
名称：'La Cala'，
lat：36.5022141，
lon：-4.6806549，
zoom：14
}，
{
名称：'Calahonda'，
lat：36.4923402，
lon：-4.7129583，
zoom：14
}，
{
名称：'Nerja'，
lat：36.7593257，
lon：-3.871842，
zoom：13
}，
{
名称：'Torre del Mar'，
lat：36.7389255，
lon：-4.095758，
zoom：13
}，
{
名称：'Torremolinos'，
lat：36.6265478，
lon：-4.4949926，
zoom：14
}，
{
名称：'La Carihuela'，
lat：36.6138008，
lon：-4.5055638，
zoom：14
}，
{
name：'Torrox '，
lat：36.7350957，
lon：-3.9585594，
zoom：13
}，
];
citiesObject.forEach（（city）=> {
if（document.getElementById（city）。value === city.name）{
myLatlng = new google.maps.LatLng（city.lat，city.lon，）;
myOptions = {
zoom：city.zoom，
center：myLatlng，
mapTypeId：google.maps .MapTypeId.ROADMAP
};
}
}）;
var map = new google.maps.Map（document.getElementById（'map'），myOptions）;
infowindow = new google.maps.InfoWindow（{
content：holding ...
}）;
<？php
$ paradax ='';
$ paradasarray = json_decode（$ paradasarray）;
foreach（$ paradasarray as $ parada）{
$ hora = $ parada-> horarecogida-> {'0'};
$ paradax = $ parada-> nombreparada;
$ idparada = $ parada-> idparada-> {'0'};
？>
var marker = new google.maps.Marker（{
position：new google.maps.LatLng（<？php echo $ parada-> lat-> {'0' }。，。$ parada-> lng-> {'0'}？>），
map：map，
html：<？php echo $ paradax;？> ;< br><？php echo $ lang_pickuptime。。$ hora;？>< br>< br><？php echo $ lang_eligaeste;？>< input name ='elegirparada'type ='复选框'id ='elegirparada'值='1'>< br><输入类型='隐藏'id ='paradax'值='<？php echo $ paradax;？>'> < input type ='hidden'value ='<？php echo $ idparada;？>'id ='idparada'>< div id ='errortext'>< / div>
}）;
markers.push（marker）;
google.maps.event.addListener（marker，'click'，function（）{
infowindow.setContent（this.html）;
infowindow.open（map，this ）;
}）;
<？php
}
？>
google.maps.event.addListener（infowindow，'domready'，function（）{
defineListener（）;
}）;
}
< / script>
< script src =https://maps.googleapis.com/maps/api/js?key=AImikey&callback=initMap&language=en
async defer>< / script>
< p style =display：none; id =elegidotexto><？php echo $ lang_elegido; ？>
< span id =elegidotexto2> < /跨度>< / p为H.
< input type =hiddenid =pickupointname =pickupointvalue =>
< input type =hiddenid =puntorecogername =puntorecogervalue =>
< script>
函数defineListener（）{
var elegirParadaEl = document.getElementById（elegirparada）;
elegirParadaEl.addEventListener（change，function（）{
//获取复选框
var checkBox = document.getElementById（elegirparada）;
/ /获取输出文本
var text = document.getElementById（elegidotexto）;
//如果选中该复选框，则显示输出文本
if（checkBox.checked == true）{
text.style.display =block;
} else {
text.style.display =none;
}
document .getElementById（elegidotexto2）。innerHTML = document.getElementById（paradax）。value;
document.getElementById（puntorecoger）。value = document.getElementById（paradax）。value;
document.getElementById（pickupoint）。value = document.getElementById（idparada）。value; // window.sessionStorage.setItem（'pickupointguardar'，document.getElementById（idparada）。value）;
}）;
var divErrortext = document.getElementById（'errortext'），
valid = true;
var element2 = document.querySelector（'＃elegirparada'）;
if（element2！== null）{
element2.addEventListener（'click'，（）=> {
if（document.solicitud.plazasDisponibles.value ==''）{
console.log（element2）
divErrortext.innerHTML =< span style ='color：red'><？php echo $ lang_val_choosedate？>< / span>;
返回false;
}
}）
}
}
var element = document.querySelector（'＃city'）;
element.addEventListener（'change'，（）=> {
initMap（）
}）
< / script>
我尝试了什么：
一直在与Ajax斗争，开始只有标记部分，但只有错误，然后尝试整个地图，但都没有。只做了简单的ajax，比如编写innerhtml但没有类似的东西。不知道从哪里开始。
解决方案
paradax ='';
paradasarray = json_decode（
paradasarray）;
foreach（
Hi,
I been struggling for two days and can't manage.
I have a script with a google map that have several markers. Now I need to change the markers every time when the day selected in a calendar is changed.
I suppose I need to change the markers with ajax and php. The php part no problem, but I can´t manage to change the markers. Any idea of what to do and how?
I past my map code below, the php loop with the markers is what is needed to be changed dynamically;
<div id="map" style="width: 100%; height:300px"></div>
<script>
var infowindow = null;
var markers = [];
function initMap(){
var myLatlng = new google.maps.LatLng(36.5505197,-4.8349095);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var citiesObject = [
{
name: 'Benalmádena Costa',
lat: 36.5985811,
lon: -4.5184101,
zoom: 14
},
{
name: 'Torrequebrada',
lat: 36.5843169,
lon: -4.5353021,
zoom: 14
},
{
name: 'Almuñecar',
lat: 36.7363573,
lon: -3.6936177,
zoom: 14
},
{
name: 'Estepona',
lat: 36.4078757,
lon: -5.1877823,
zoom: 11
},
{
name: 'Atalaya-Benavista',
lat: 36.4660413,
lon: -5.0289864,
zoom: 13
},
{
name: 'Fuengirola',
lat: 36.5457253,
lon: -4.6281043,
zoom: 13
},
{
name: 'Carvajal',
lat: 36.5712203,
lon: -4.6022271,
zoom: 13
},
{
name: 'Málaga Capital',
lat: 36.7139351,
lon: -4.424794,
zoom: 14
},
{
name: 'Marbella Town',
lat: 36.5112345,
lon: -4.8869307,
zoom: 14
},
{
name: 'Marbella East',
lat: 36.5053049,
lon: -4.7980592,
zoom: 13
},
{
name: 'Marbella West',
lat: 36.4963191,
lon: -4.9380258,
zoom: 13
},
{
name: 'Marbella San Pedro',
lat: 36.4772001,
lon: -4.9984498,
zoom: 13
},
{
name: 'La Cala',
lat: 36.5022141,
lon: -4.6806549,
zoom: 14
},
{
name: 'Calahonda',
lat: 36.4923402,
lon: -4.7129583,
zoom: 14
},
{
name: 'Nerja',
lat: 36.7593257,
lon: -3.871842,
zoom: 13
},
{
name: 'Torre del Mar',
lat: 36.7389255,
lon: -4.095758,
zoom: 13
},
{
name: 'Torremolinos',
lat: 36.6265478,
lon: -4.4949926,
zoom: 14
},
{
name: 'La Carihuela',
lat: 36.6138008,
lon: -4.5055638,
zoom: 14
},
{
name: 'Torrox',
lat: 36.7350957,
lon: -3.9585594,
zoom: 13
},
];
citiesObject.forEach((city) => {
if (document.getElementById("city").value === city.name) {
myLatlng = new google.maps.LatLng(city.lat,city.lon,);
myOptions = {
zoom: city.zoom,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
}
});
var map = new google.maps.Map(document.getElementById('map'), myOptions);
infowindow = new google.maps.InfoWindow({
content: "holding..."
});
<?php
$paradax = '';
$paradasarray = json_decode($paradasarray);
foreach ($paradasarray as $parada){
$hora = $parada->horarecogida->{'0'};
$paradax = $parada->nombreparada;
$idparada = $parada->idparada->{'0'};
?>
var marker = new google.maps.Marker({
position: new google.maps.LatLng(<?php echo $parada->lat->{'0'} . ", " . $parada->lng->{'0'} ?>),
map: map,
html: "<?php echo $paradax; ?><br><?php echo $lang_pickuptime." ".$hora; ?><br><br><?php echo $lang_eligaeste; ?> <input name='elegirparada' type='checkbox' id='elegirparada' value='1'><br><input type='hidden' id='paradax' value='<?php echo $paradax; ?>'><input type='hidden' value='<?php echo $idparada; ?>' id='idparada'><div id='errortext'></div>"
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
<?php
}
?>
google.maps.event.addListener(infowindow, 'domready', function() {
defineListener();
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AImikey&callback=initMap&language=en"
async defer></script>
<p style="display: none;" id="elegidotexto"><?php echo $lang_elegido; ?>
<span id="elegidotexto2"> </span></p>
<input type="hidden" id="pickupoint" name="pickupoint" value="">
<input type="hidden" id="puntorecoger" name="puntorecoger" value="">
<script>
function defineListener() {
var elegirParadaEl = document.getElementById("elegirparada");
elegirParadaEl.addEventListener("change", function(){
// Get the checkbox
var checkBox = document.getElementById("elegirparada");
// Get the output text
var text = document.getElementById("elegidotexto");
// If the checkbox is checked, display the output text
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
document.getElementById("elegidotexto2").innerHTML = document.getElementById("paradax").value;
document.getElementById("puntorecoger").value= document.getElementById("paradax").value;
document.getElementById("pickupoint").value = document.getElementById("idparada").value; // window.sessionStorage.setItem('pickupointguardar', document.getElementById("idparada").value);
});
var divErrortext = document.getElementById('errortext'),
valid = true;
var element2 = document.querySelector('#elegirparada');
if (element2 !== null) {
element2.addEventListener('click', () => {
if (document.solicitud.plazasDisponibles.value == ''){
console.log(element2)
divErrortext.innerHTML="<span style='color:red'><?php echo $lang_val_choosedate ?></span>";
return false;
}
})
}
}
var element = document.querySelector('#city');
element.addEventListener('change', () => {
initMap()
})
</script>
What I have tried:
Been struggling with Ajax, started with only markers part, but only got errors, then tried the whole map, but neither. Only done simple ajax, such as writing innerhtml but nothing similar as this. Don't know where to start.
解决方案
paradax = '';
paradasarray = json_decode(
paradasarray); foreach (
这篇关于如何使用ajax或类似方法动态更改Google地图标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
