我正在使用Google Maps API尝试在一个页面上显示两个Google地图 - 这两个地图都分配了单独的标记。标记是通过Wordpress从头部中的不同自定义帖子类型动态生成的。
我设法让一张地图显示好标记显示，但我似乎无法让其他地图正常工作。我已经尝试为不同的地图添加单独的变量，如下所示，但仍然没有。
有人可以帮忙吗？
<script type="text/javascript">
var locations = [
<?php $i = 1; while ( have_posts() ) : the_post(); ?>
<?php $location = get_post_meta( get_the_ID(), 'rsl_latitude', true ); if($location) { ?>
{
latlng : new google.maps.LatLng(<?php echo get_post_meta( get_the_ID(), 'rsl_latitude', true ); ?>, <?php echo get_post_meta( get_the_ID(), 'rsl_longitude', true ); ?>),
info : document.getElementById('item<?php echo $i; ?>')
},
<?php } else {} $i++; endwhile; ?>
];
</script>
<?php else : ?>
<!-- No matching posts, show an error -->
<h1>Error 404 — Page not found.</h1>
<?php endif; ?>
<script type="text/javascript">
var inthearea = [
<?php $inthearea = types_child_posts("in-the-area");
foreach ($inthearea as $area) { ?>
<?php
$location = get_field('location', $area->ID);
$areacat = get_field('area_category', $area->ID);
?>
<?php $i = 1 ?>
{
latlng : new google.maps.LatLng(<?php echo $location['lat'];?>, <?php echo $location['lng'];?>),
info : document.getElementById('item<?php echo $i; ?>')
},
<?php $i++; } ?>
{
latlng : new google.maps.LatLng(<?php echo get_post_meta( get_the_ID(), 'rsl_latitude', true ); ?>, <?php echo get_post_meta( get_the_ID(), 'rsl_longitude', true ); ?>),
info : document.getElementById('item<?php echo $i; ?>')
},
];
</script>
var infowindow = new google.maps.InfoWindow();
function initialize() {
map = new google.maps.Map(document.getElementById('map1'), {
zoom: 12,
center: new google.maps.LatLng(38.898748, -77.037684),
scrollwheel: false ,
styles: [
{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#245e7c"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"color": "#f2f2f2"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"lightness": 45
}
]
},
{
"featureType": "road.highway",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"color": "#d8dbdc"
},
{
"visibility": "on"
}
]
}
]
});
var latlngbounds = new google.maps.LatLngBounds();
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: locations[i].latlng,
map: map,
icon: 'https://rslcloud.co.uk/wp-content/themes/rsl-theme/img/map-markerv2.png'
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i].info);
infowindow.open(map, marker);
}
})(marker, i));
latlngbounds.extend(marker.position);
//Center map and adjust Zoom based on the position of all markers.
if (latlngbounds.getNorthEast().equals(latlngbounds.getSouthWest())) {
var extendPoint = new google.maps.LatLng(latlngbounds.getNorthEast().lat() + 0.01, latlngbounds.getNorthEast().lng() + 0.01);
latlngbounds.extend(extendPoint);
}
map.fitBounds(latlngbounds);
map.setCenter(latlngbounds.getCenter());
}
}
map2 = new google.maps.Map(document.getElementById('map2'), {
zoom: 12,
center: new google.maps.LatLng(38.898748, -77.037684),
scrollwheel: false ,
styles: [
{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#245e7c"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"color": "#f2f2f2"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"lightness": 45
}
]
},
{
"featureType": "road.highway",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"color": "#d8dbdc"
},
{
"visibility": "on"
}
]
}
]
});
var latlngbounds = new google.maps.LatLngBounds();
for (var i = 0; i < inthearea.length; i++) {
var marker = new google.maps.Marker({
position: inthearea[i].latlng,
map: map2,
icon: 'https://rslcloud.co.uk/wp-content/themes/rsl-theme/img/map-markerv2.png'
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(inthearea[i].info);
infowindow.open(map2, marker);
}
})(marker, i));
latlngbounds.extend(marker.position);
//Center map and adjust Zoom based on the position of all markers.
if (latlngbounds.getNorthEast().equals(latlngbounds.getSouthWest())) {
var extendPoint = new google.maps.LatLng(latlngbounds.getNorthEast().lat() + 0.01, latlngbounds.getNorthEast().lng() + 0.01);
latlngbounds.extend(extendPoint);
}
map.fitBounds(latlngbounds);
map.setCenter(latlngbounds.getCenter());
}
initialize();
答案 0 :(得分：0)
这只是一个建议..并且不是一个正确的答案，所以在评论中这样做不容易
在您的代码结束时注明
map.fitBounds(latlngbounds);
map.setCenter(latlngbounds.getCenter());
}
initialize();
应该是
map2.fitBounds(latlngbounds);
map2.setCenter(latlngbounds.getCenter());
然后你可以将其他一些msimatching map / map2 assignement创造出问题或错误行为吗