我正在浏览wordpress上的帖子,并让它们出现在google地图上,但是当它在列表中排到第12位时,它会向后抛出一个错误,列表中的12条将不会与其余的设置有任何不同。我去掉了原来的12号,换成了一个新的。
function initMap() {
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById('club-map'), {
zoom: 14,
center: { lat: 41.383682, lng: 2.176591 },
styles: [{elementType:"geometry",stylers:[{color:"#212121"}]},{elementType:"labels.icon",stylers:[{visibility:"off"}]},{elementType:"labels.text.fill",stylers:[{color:"#757575"}]},{elementType:"labels.text.stroke",stylers:[{color:"#212121"}]},{featureType:"administrative",elementType:"geometry",stylers:[{color:"#757575"}]},{featureType:"administrative.country",elementType:"labels.text.fill",stylers:[{color:"#9e9e9e"}]},{featureType:"administrative.land_parcel",stylers:[{visibility:"off"}]},{featureType:"administrative.locality",elementType:"labels.text.fill",stylers:[{color:"#bdbdbd"}]},{featureType:"poi",elementType:"labels.text.fill",stylers:[{color:"#757575"}]},{featureType:"poi.park",elementType:"geometry",stylers:[{color:"#181818"}]},{featureType:"poi.park",elementType:"labels.text.fill",stylers:[{color:"#616161"}]},{featureType:"poi.park",elementType:"labels.text.stroke",stylers:[{color:"#1b1b1b"}]},{featureType:"road",elementType:"geometry.fill",stylers:[{color:"#2c2c2c"}]},{featureType:"road",elementType:"labels.text.fill",stylers:[{color:"#8a8a8a"}]},{featureType:"road.arterial",elementType:"geometry",stylers:[{color:"#373737"}]},{featureType:"road.highway",elementType:"geometry",stylers:[{color:"#3c3c3c"}]},{featureType:"road.highway.controlled_access",elementType:"geometry",stylers:[{color:"#4e4e4e"}]},{featureType:"road.local",elementType:"labels.text.fill",stylers:[{color:"#616161"}]},{featureType:"transit",elementType:"labels.text.fill",stylers:[{color:"#757575"}]},{featureType:"water",elementType:"geometry",stylers:[{color:"#000000"}]},{featureType:"water",elementType:"labels.text.fill",stylers:[{color:"#3d3d3d"}]}]
});
var address;
<?php
// Add club pins
$args = array( 'post_type' => 'clubs', 'posts_per_page' => '25','nopaging' => true, 'order' => 'ASC');
$wp_query = new WP_Query($args);
while(have_posts()){
the_post();
?>
address = "<?= get_field('address'); ?>";
geocoder.geocode( { 'address': address}, function(results, status){
console.log('result');
console.log(results);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: '<?= get_template_directory_uri(); ?>/dist/images/map-pin.png',
animation: google.maps.Animation.DROP,
clubId: <?= get_the_ID(); ?>,
name: '<?= addslashes(get_the_title()); ?>',
age: <?= get_field('age_requirement'); ?>,
logo: '<?= get_field('club_logo'); ?>',
cost: '<?= number_format(get_field('membership_cost'), 2); ?>',
rating: <?= get_field('rating'); ?>
});
google.maps.event.addListener(marker, 'click', function(){
clubDetails(marker.clubId,marker.name,marker.age,marker.logo,marker.cost,marker.rating);
});
var infowindow = new google.maps.InfoWindow({
content: '<?= addslashes(get_the_title()); ?>',
map: map,
// position: homeLatlng
});
marker.addListener('mouseover', function() {
infowindow.open(map, this);
});
marker.addListener('mouseout', function() {
infowindow.close();
})
});
<?php } ?>
}我的控制台中出现了这个错误。
(index):987 Uncaught TypeError: Cannot read property '0' of null
at (index):987
at geocoder.js:5
at FU (geocoder.js:3)
at Object.HU.geocode (geocoder.js:5)
at Array.<anonymous> (js?key=AIzaSyAgDZJic9rlx9ZV9PRynFo76d9gSlAE-UY&callback=initMap:133)
at js?key=AIzaSyAgDZJic9rlx9ZV9PRynFo76d9gSlAE-UY&callback=initMap:124
at Object.<anonymous> (js?key=AIzaSyAgDZJic9rlx9ZV9PRynFo76d9gSlAE-UY&callback=initMap:62)
at js?key=AIzaSyAgDZJic9rlx9ZV9PRynFo76d9gSlAE-UY&callback=initMap:124
at js?key=AIzaSyAgDZJic9rlx9ZV9PRynFo76d9gSlAE-UY&callback=initMap:62
at js?key=AIzaSyAgDZJic9rlx9ZV9PRynFo76d9gSlAE-UY&callback=initMap:124这也是它所指向的线
position: results[0].geometry.location,编辑
这就是我的console.log(results)看起来的样子,它还包括了错误https://gyazo.com/b3c91e3feb34ea61068bb1e0102ec554
编辑V2
我已经将//position: results[0].geometry.location,注释掉了,在它运行11次之后,它只是没有返回一个结果
发布于 2017-12-05 10:50:49
我修改了GeoCoder方法部分,用代码替换这个部分,检查一次,如果有,请告诉我,
geocoder.geocode( { 'address': address}, function(results, status) {
var markers = results.map(function(location, i) {
var marker = new google.maps.Marker({
map: map,
position: location.geometry.location,
icon: '<?= get_template_directory_uri(); ?>/dist/images/map-pin.png',
animation: google.maps.Animation.DROP,
clubId: <?= get_the_ID(); ?>,
name: '<?= addslashes(get_the_title()); ?>',
age: <?= get_field('age_requirement'); ?>,
logo: '<?= get_field('club_logo'); ?>',
cost: '<?= number_format(get_field('membership_cost'), 2); ?>',
rating: <?= get_field('rating'); ?>
});
var infowindow = new google.maps.InfoWindow({
content: '<?= addslashes(get_the_title()); ?>',
});
google.maps.event.addListener(infowindow, 'domready', function() {
var iwOuter = jQuery('.gm-style-iw');
// Reference to the div that groups the close button elements.
var iwCloseBtn = iwOuter.next();
// Apply the desired effect to the close button
iwCloseBtn.remove()
});
marker.addListener('mouseover', function() {
infowindow.open(map, this);
});
marker.addListener('mouseout', function() {
infowindow.close();
})
return marker;
});
});https://stackoverflow.com/questions/47636468
复制相似问题