为什么我的自定义Google地图图标会在PC浏览器中显示，但在Android浏览器中却不会显示？

Question

我有一个网站上有谷歌地图。这是一个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();

Answer 1

- 然后它突然起作用。为什么我不知道！ （那就是：为什么它在Android手机上不起作用）首先超出了我的知识......）

我确实做了一些改变，但我不明白为什么他们会影响这个问题。

使用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(),
      maxWidth: 350 // This is added
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map, marker);
    });
    google.maps.event.addListener(map, 'click', function() {  //This is added
      infowindow.close();
    });
  }
}

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_post_meta(get_the_ID(),'status', 'true'); //This has changed
        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 class="mapinfo">
            <div class="mapinfo-title">
                <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
            </div>
            <div class="mapinfo-content">
                <img src="<?php the_field('logo'); ?>" alt="<?php the_title(); ?>" height="83" width="83">
                <p><strong><?php the_field('some_value'); ?> texy <?php the_field('smoe_other_value'); ?></strong></p>
            </div>
        </div>
    </div>
   <?php
      endwhile; ?>
</div>
<?php
endif;
wp_reset_postdata();