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

Posted 2023-05-07

【中文标题】为啥我的自定义 Google 地图图标在 PC 浏览器中显示，但在 Android 浏览器中不显示？

【英文标题】：Why are my custom Google Maps icons showing in pc-browsers, but not in Android browsers?为什么我的自定义 Google 地图图标在 PC 浏览器中显示，但在 Android 浏览器中不显示？

【发布时间】：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();

【参考方案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'); ?>"   >
                <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();