0

我使用 Processwire 创建了一个网站，并包含了一个自定义样式的 Google 地图，其中包含来自 xml 文件的多个标记。在桌面上，它就像魅力一样。当我使用 Browserstack 时，即使是手机也能正确显示。但现实生活中，手机（Android 和 iOs）不会显示标记（.png）。

有人可以帮忙吗？

这是我的代码：

var xmlFile = 'http://website.ch/adressen.xml/';

var icons = {
  1: {
    icon: 'http://website.ch/site/templates/img/marker.png'
  }
};


function initMap() {
  var styledMapType = new google.maps.StyledMapType(
    [
      some styles for the map...
], {
      name: 'MapName'
    });

  var switzerland = new google.maps.LatLng(46.82235, 8.40440);

  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    var map = new google.maps.Map(document.getElementById('map'), {
    center: switzerland
    , zoom: 7
    , mapTypeControlOptions: {
      mapTypeIds: []
    }

  });
  } else { 
    var map = new google.maps.Map(document.getElementById('map'), {
      center: switzerland
      , zoom: 8
      , mapTypeControlOptions: {
        mapTypeIds: ['styled_map']
      }

    });
  }
  map.mapTypes.set('styled_map', styledMapType);
  map.setMapTypeId('styled_map');


  var infoWindow = new google.maps.InfoWindow;

  downloadUrl(xmlFile, function (data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName('marker');
    Array.prototype.forEach.call(markers, function (markerElem) {
      var id = markerElem.getAttribute('id');
      var name = markerElem.getAttribute('name');
      var address = markerElem.getAttribute('address');
      var city = markerElem.getAttribute('city');
      var link = markerElem.getAttribute('link');
      var type = markerElem.getAttribute('type');
      var point = new google.maps.LatLng(
        parseFloat(markerElem.getAttribute('lat')), 
        parseFloat(markerElem.getAttribute('lng')));

      var infowincontent = document.createElement('div');
      var strong = document.createElement('strong');
      strong.textContent = name
      infowincontent.appendChild(strong);
      infowincontent.appendChild(document.createElement('br'));
      var street = document.createElement('text');
      street.textContent = address
      infowincontent.appendChild(street);
      infowincontent.appendChild(document.createElement('br'));
      var place = document.createElement('text');
      place.textContent = city
      infowincontent.appendChild(place);
      infowincontent.appendChild(document.createElement('br'));
      infowincontent.appendChild(document.createElement('br'));
      var a = document.createElement('a');
      a.setAttribute('href', link);
      a.setAttribute('target', '_blank');
      a.innerHTML = 'Website';
      infowincontent.appendChild(a);

      var marker = new google.maps.Marker({
        map: map
        , position: point
        , icon: icons[type].icon
      });
      marker.addListener('click', function () {
        infoWindow.setContent(infowincontent);
        infoWindow.open(map, marker);
      });
    });

  });
}


function downloadUrl(url,callback) {
 var request = window.ActiveXObject ?
     new ActiveXObject('Microsoft.XMLHTTP') :
     new XMLHttpRequest;

 request.onreadystatechange = function() {
   if (request.readyState == 4) {
     request.onreadystatechange = doNothing;
     callback(request, request.status);
   }
 };

 request.open('GET', url, true);
 request.send(null);
}

function doNothing() {}
4

1 回答 1

0

你需要在手机上启用调试，这样你才能看到发生了什么......

在您的 Android 手机上启用 USB 调试：

在 Android 4.1 及更低版本上，开发人员选项屏幕默认可用。在 Android 4.2 及更高版本上，执行以下操作：

1) 打开设置应用程序。

2) 滚动到底部并选择关于手机。

3) 打开软件信息

4) 滚动到底部并点击内部版本号 7 次（点击几下后您会看到一个工具提示提示您打开）。

5) 现在应该可以从“设置”屏幕访问开发人员选项。

6) 向下滚动并启用 USB 调试。

将手机插入计算机，打开 Chrome，然后在地址栏中输入“chrome://inspect”。

您应该能够连接到手机并开始调试：

https://developers.google.com/web/tools/chrome-devtools/remote-debugging/webviews

于 2020-03-07T20:38:46.597 回答