【发布时间】：2018-06-02 14:42:22
【问题描述】：
我有一个网站，上面有谷歌地图。这是一个 Wordpress 站点，站点上的每个（自定义）帖子都有一些地理位置元值，这些元值是通过高级自定义字段的地图字段生成的。
我创建了五个自定义图标，它们托管在与网站相同的服务器上。然后，地图上显示的图标会根据每个帖子的另一个自定义值而有所不同。总共有大约。 180 个标记同时显示。
使用计算机查看渲染地图时，自定义图标会按预期加载。
但是，如果我使用 Android 手机查看同一页面，则会忽略自定义图标，而是加载默认的红色标记。为什么是这样？
更新： 附加信息： 它在我的旧版 Android 平板电脑上工作！它在我的手机上不起作用。 该平板电脑是运行 Android 4.4.2 的三星 SM-T525。 该手机是运行 Android 7.0 的华为 P9。
这是我正在使用的 javascript：
(function($) {
function render_map($el) {
var $markers = $el.find('.marker');
var args = {
zoom: 16,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($el[0], args);
map.markers = [];
$markers.each(function() {
add_marker($(this), map);
});
center_map(map);
}
function add_marker($marker, map) {
var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));
var icon = $marker.attr('data-icon');
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: icon
});
map.markers.push(marker);
if ($marker.html()) {
var infowindow = new google.maps.InfoWindow({
content: $marker.html()
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
}
function center_map(map) {
var bounds = new google.maps.LatLngBounds();
$.each(map.markers, function(i, marker) {
var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
bounds.extend(latlng);
});
if (map.markers.length == 1) {
map.setCenter(bounds.getCenter());
map.setZoom(16);
} else {
map.fitBounds(bounds);
}
}
$(document).ready(function() {
$('.acf-map').each(function() {
render_map($(this));
});
});
})(jQuery);
这是相关的php：
$args = array(
'post_type' => 'customposttype',
'posts_per_page' => -1,
'post_status' => 'publish',
'no_found_rows' => true
);
$mapquery = new WP_Query( $args );
if( $mapquery->have_posts()): ?>
<div class="acf-map" style="height:708px;">
<?php
while ($mapquery->have_posts()): $mapquery->the_post();
$personalmap = get_field( 'personalmap' );
$status = get_field( 'status' );
switch ($status) {
case "variant-one":
$markertype = 'https://example.com/wp-content/uploads/custommarker-one.png';
break;
case "variant-two":
$markertype = 'https://example.com/wp-content/uploads/custommarker-two.png';
break;
case "variant-three":
$markertype = 'https://example.com/wp-content/uploads/custommarker-three.png';
break;
case "variant-four":
$markertype = 'https://example.com/wp-content/uploads/custommarker-four.png';
break;
case "variant-five":
$markertype = 'https://example.com/wp-content/uploads/custommarker-five.png';
break;
default:
$markertype = 'https://example.com/wp-content/uploads/custommarker-one.png';
} ?>
<div class="marker" data-lat="<?php echo $personalmap['lat']; ?>" data-lng="<?php echo $personalmap['lng']; ?> "data-icon="<?php echo $markertype; ?>"></div>
<?php
endwhile; ?>
</div>
<?php
endif;
wp_reset_postdata();
【问题讨论】：
标签： javascript php android wordpress google-maps