我有一个地图设置，以及一组类型为'locs'的HTML元素。我想迭代这些，并用标记在Google地图上标记它们。但是，任何标记多个的尝试都会失败。任何帮助或指导？这是我目前的代码：
编辑：以下是控制台日志：
test.php:68 Uncaught ReferenceError: google is not defined
at test.php:68
jquery.min.js:2 Uncaught TypeError: Cannot read property 'geocode' of
undefined
at codeAddress (test.php:36)
at HTMLOptionElement.<anonymous> (test.php:52)
at Function.each (jquery.min.js:2)
at r.fn.init.each (jquery.min.js:2)
at HTMLDocument.<anonymous> (test.php:50)
at j (jquery.min.js:2)
at k (jquery.min.js:2)
js?key=KEY_HERE&callback=initMap:100
Uncaught Lb
编辑＃2：以下是完整代码：
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
$events = json_decode(file_get_contents('https://data.melbourne.vic.gov.au/resource/5vsv-f73x.json?$$app_token=KEY_HERE'), true);
$counter = 0;
$seats = json_decode(file_get_contents('https://data.melbourne.vic.gov.au/resource/w4fc-iq27.json?$$app_token=KEY_HERE'), true);
?>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 15,
center: latlng
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
function codeAddress(big) {
var address = big + ", Melbourne";
geocoder.geocode({'address': address}, function (results, status) {
if (status == 'OK') {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
$(document).ready(function() {
$('.locs').each(function () {
alert($(this).text());
codeAddress($(this).text());
});
});
var arse;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
arse = new google.maps.Marker({
position: new google.maps.LatLng(pos['lat'], pos['lng']),
map: map,
icon: 'https://rnr30-compgroup.netdna-ssl.com/wp-content/themes/rnr3/img/distance_marker.png'
});
map.setCenter(pos);
map.setZoom(12);
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: pos,
radius: 10000
});
}, function() {
});
} else {
// Browser doesn't support Geolocation
}
</script>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body onload="initialize()">
<div id="map" style="width: 320px; height: 480px;"></div>
<?php
echo "<select id='loc' onchange='codeAddress()'>";
foreach($events as $event)
{
//print_r($event);
echo "<option class='locs' value='loc".$counter."'>".$event['location']."</div> <br>";
$counter++;
}
echo "</select>";
?>
</body>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=KEY_HERE&callback=initMap">
</script>
</body>
</html>
答案 0 :(得分：2)
原始代码中存在相当多的问题阻止它工作 - 当它发生时我认为它会很快超过每日查询限制。但是，我在这里稍微修改了代码的流程，目前迭代遍历每个位置的例程在第一个地址之后终止（这是故意进行测试）
我将这段代码放在navigator.geolocation回调中，尽管可以在initialize函数中轻松完成。
顺便说一句 - 在那个循环中使用alert语句是****中的皇家痛苦 - 花了很长时间才能完成整个批次！ ;（
目前，这成功地对第一个地址进行了地理编码并添加了一个标记 - 但正如我所说，代码在第一次进入后故意终止。
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
$counter = 0;
$events = json_decode( file_get_contents( 'http://data.melbourne.vic.gov.au/resource/5vsv-f73x.json?$$app_token=RI7KnTt7JLb6dtsY4jiCET3Qq' ), true);
$seats = json_decode( file_get_contents( 'http://data.melbourne.vic.gov.au/resource/w4fc-iq27.json?$$app_token=RI7KnTt7JLb6dtsY4jiCET3Qq' ), true );
?>
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 15,
center: latlng
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
var mkr;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
mkr = new google.maps.Marker({
position: new google.maps.LatLng(pos['lat'], pos['lng']),
map: map,
icon: 'https://rnr30-compgroup.netdna-ssl.com/wp-content/themes/rnr3/img/distance_marker.png'
});
map.setCenter(pos);
map.setZoom(12);
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: pos,
radius: 10000
});
console.clear();
$('.locs').each(function() {
codeAddress( $(this).text() );
console.info( $(this).text() );
return false;/* remove this `return false;` statement to proceed with ALL requests ... warning!*/
});
}, function( err ) {
console.warn( err )
});
} else {
// Browser doesn't support Geolocation
}
}
function codeAddress(big) {
var address = big + ", Melbourne";
geocoder.geocode({'address': address}, function (results, status) {
if (status == 'OK') {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
console.log('Geocode was not successful for the following reason: ' + status);
}
});
}
</script>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body onload="initialize()">
<div id="map" style="width: 320px; height: 480px;"></div>
<?php
echo "<select id='loc' onchange='codeAddress(this.options[ this.options.selectedIndex ].text)'>";
foreach( $events as $event ){
echo "<option class='locs' value='loc".$counter."'>".$event['location']."</div> <br>";
$counter++;
}
echo "</select>";
?>
<script async defer src="//maps.googleapis.com/maps/api/js?key=AIzaSyCaZxKJmzB3sbIE72rQ_No-xQVP5YwOxjU&callback=initialize"></script>
</body>
</html>