好的,我快到了。下面的脚本获取PHP SQL查询的输出,并在结果的每个点处创建多个标记。
输出字符串(liste_des_points)如下所示:
[43.818298,-69.809998, "Phippsburg, Kennebec River, Maine"],[43.755001,-69.785004, "Fort Popham, Hunniwell Point, Kennebec River, Maine"]
我无法执行的最后一步是,当用户单击标记时,它将通过在底部的三个HTML输入字段中显示信息窗口内容来确认选择。单击其他标记,输入字段的内容就会更改。
我发现我需要使用类似的东西:
document.getElementById('txtLat').value = liste_des_points[i][0];
document.getElementById('txtLng').value = liste_des_points[i][1];
document.getElementById('tideStation').value = (liste_des_points[i][2]);
但无法确定将其集成到现有脚本中的位置。
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0
}
#map_canvas {
height: 100%
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY">
</script>
<script type="text/javascript">
var infos = [];
function initMap() {
var optionsCarte = {
center: new google.maps.LatLng(<?php echo $lat; ?>, <?php echo $lon; ?>),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), optionsCarte);
var myicon = "images/tidesicons-line-32.ico";
var liste_des_points = [<?php echo $listeDesPoints;?>];
var liste_des_points_Station = [<?php echo $listeDesPointsStation;?>];
var i = 0,
li = liste_des_points.length;
var infowindow = new google.maps.InfoWindow();
currentPopup = infowindow;
/* set the markers */
while (i < li) {
new google.maps.LatLng(liste_des_points[i][0]);
new google.maps.LatLng(liste_des_points[i][1]);
new google.maps.LatLng(liste_des_points[i][2]);
marker = new google.maps.Marker({
position: new google.maps.LatLng(liste_des_points[i][0], liste_des_points[i][1]),
map: map,
icon: myicon,
});
var content = liste_des_points[i][0] + " ; " + liste_des_points[i][1] + " ; " + liste_des_points[i][2];
i++;
google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow) {
return function() {
/* close the previous info-window */
closeInfos();
infowindow.setContent(content);
infowindow.open(map, marker);
/* keep the handle, in order to close it on next click event */
infos[0] = infowindow;
};
})(marker, content, infowindow));
}
}
function closeInfos() {
if (infos.length > 0) {
/* detach the info-window from the marker ... undocumented in the API docs */
infos[0].set("marker", null);
/* and close it */
infos[0].close();
/* blank the array */
infos.length = 0;
}
}
</script>
<title>Search NOAA Stations by ZIPcode</title>
</head>
<div align="center">
<body onLoad="initMap()">
<div id="map_canvas" style="width:50%; height:50%"> </div>
</div>
<hr size=".5" width="75%" />
<div align="center">
<div>
<form action="output.php" method="get" name="locationinfo">
<table cellpadding="3" cellspacing="3" align="center" width="40%">
<tr>
<th colspan="2" align="center">You selected the tide station shown below.<br />If this not correct, click on another one in the map to change the selection</th>
</tr>
<tr>
<th colspan="2" align="center">When you click on the "Create Calendar Files..." link you will generate the files for the tide station you selected which will be used to create your calendar.</th>
</tr>
<tr>
<td colspan=3>
<div id="map_canvas" style="background-color: #ffffff"></div>
</td>
</tr>
<tr>
<td>Latitude:</td>
<td><input type="text" id="txtLat" name="txtLat" width="70" size="40"></td>
<tr>
<td>Longitude:</td>
<td><input type="text" id="txtLng" name="txtLng" width="70" size="40"></td>
</tr>
<tr>
<td>Location:</td>
<td><input type="text" id="tideStation" name="txtDesc" width="100" size="40"></td>
</tr>
<tr>
<td align="center" colspan="2"><input type="submit" value="Create Calendar Files..."> <INPUT type="reset" value="Clear Entry"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
答案 0 :(得分:1)
修复现有代码的最简单方法是在标记“ click”侦听器函数的i
上添加函数闭包,然后将设置表单中值的代码放入其中:
google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow, i) {
return function() {
/* close the previous info-window */
closeInfos();
infowindow.setContent(content);
infowindow.open(map, marker);
document.getElementById('txtLat').value = liste_des_points[i][0];
document.getElementById('txtLng').value = liste_des_points[i][1];
document.getElementById('tideStation').value = (liste_des_points[i][2]);
/* keep the handle, in order to close it on next click event */
infos[0] = infowindow;
};
})(marker, content, infowindow, i));
i++;
代码段:
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0
}
#map_canvas {
height: 50%
}
<script>
var infos = [];
function initMap() {
var optionsCarte = {
center: new google.maps.LatLng(43.818298, -69.809998),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), optionsCarte);
var liste_des_points = [
[43.818298, -69.809998, "Phippsburg, Kennebec River, Maine"],
[43.755001, -69.785004, "Fort Popham, Hunniwell Point, Kennebec River, Maine"]
];
//var liste_des_points_Station=[<?php echo $listeDesPointsStation;?>];
var i = 0,
li = liste_des_points.length;
var infowindow = new google.maps.InfoWindow();
currentPopup = infowindow;
/* set the markers */
while (i < li) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(liste_des_points[i][0], liste_des_points[i][1]),
map: map,
});
var content = liste_des_points[i][0] + " ; " + liste_des_points[i][1] + " ; " + liste_des_points[i][2];
google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow, i) {
return function() {
/* close the previous info-window */
closeInfos();
infowindow.setContent(content);
infowindow.open(map, marker);
document.getElementById('txtLat').value = liste_des_points[i][0];
document.getElementById('txtLng').value = liste_des_points[i][1];
document.getElementById('tideStation').value = (liste_des_points[i][2]);
/* keep the handle, in order to close it on next click event */
infos[0] = infowindow;
};
})(marker, content, infowindow, i));
i++;
}
}
function closeInfos() {
if (infos.length > 0) {
/* detach the info-window from the marker ... undocumented in the API docs */
infos[0].set("marker", null);
/* and close it */
infos[0].close();
/* blank the array */
infos.length = 0;
}
}
</script>
<div id="map_canvas"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>
<div align="center">
<div id="map_canvas" style="width:50%; height:50%"> </div>
</div>
<hr size=".5" width="75%" />
<div align="center">
<div>
<form action="output.php" method="get" name="locationinfo">
<table cellpadding="3" cellspacing="3" align="center" width="40%">
<tr>
<th colspan="2" align="center">You selected the tide station shown below.<br />If this not correct, click on another one in the map to change the selection</th>
</tr>
<tr>
<th colspan="2" align="center">When you click on the "Create Calendar Files..." link you will generate the files for the tide station you selected which will be used to create your calendar.</th>
</tr>
<tr>
<td colspan=3>
<div id="map_canvas" style="background-color: #ffffff"></div>
</td>
</tr>
<tr>
<td>Latitude:</td>
<td><input type="text" id="txtLat" name="txtLat" width="70" size="40"></td>
<tr>
<td>Longitude:</td>
<td><input type="text" id="txtLng" name="txtLng" width="70" size="40"></td>
</tr>
<tr>
<td>Location:</td>
<td><input type="text" id="tideStation" name="txtDesc" width="100" size="40"></td>
</tr>
<tr>
<td align="center" colspan="2"><input type="submit" value="Create Calendar Files...">
<INPUT type="reset" value="Clear Entry">
</td>
</tr>
</table>
</form>
</div>