Question

我尝试根据我的数据库使用带有自定义标记的Google Maps API。我在桌面浏览器上打开它似乎很正常......

但是当我在手机浏览器上打开时（在这种情况下，我使用最新iOS的iPhone）我没有加载的标记。

以下是 index.html

的代码

<!DOCTYPE html>
<html>
  <head>
  <title>My Maps</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link href="css/dmg.css" rel="stylesheet">
  </head>
  <body>
  <div id="map"></div>
  <script src="js/map-2.js"></script></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=SDgfdvcydhjf5jtj&callback=initMap">
  </script>
  </body>
  </html>

以下是我的 dmg.css

#map {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: 100%;
  width: 100%;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

地图2.js

var customIcons = {
  L: {
    icon: './assets/markericon/led.png'
  }
};

        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -6.898499, lng: 107.612930},
          zoom: 8,
          styles: [
                  {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
                  {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
                  {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
                  {
                    featureType: 'administrative.locality',
                    elementType: 'labels.text.fill',
                    stylers: [{color: '#D77C63'}]
                  },
                  {
                    featureType: 'poi',
                    elementType: 'labels.text.fill',
                    stylers: [{color: '#D77863'}]
                  },
                  {
                    featureType: 'poi.park',
                    elementType: 'geometry',
                    stylers: [{color: '#263c3f'}]
                  },
                  {
                    featureType: 'poi.park',
                    elementType: 'labels.text.fill',
                    stylers: [{color: '#6b9a76'}]
                  },
                  {
                    featureType: 'road',
                    elementType: 'geometry',
                    stylers: [{color: '#38414e'}]
                  },
                  {
                    featureType: 'road',
                    elementType: 'geometry.stroke',
                    stylers: [{color: '#212a37'}]
                  },
                  {
                    featureType: 'road',
                    elementType: 'labels.text.fill',
                    stylers: [{color: '#B39CB0'}]
                  },
                  {
                    featureType: 'road.highway',
                    elementType: 'geometry',
                    stylers: [{color: '#735954'}]
                  },
                  {
                    featureType: 'road.highway',
                    elementType: 'geometry.stroke',
                    stylers: [{color: '#1f2835'}]
                  },
                  {
                    featureType: 'road.highway',
                    elementType: 'labels.text.fill',
                    stylers: [{color: '#F39B9B'}]
                  },
                  {
                    featureType: 'transit',
                    elementType: 'geometry',
                    stylers: [{color: '#2f3948'}]
                  },
                  {
                    featureType: 'transit.station',
                    elementType: 'labels.text.fill',
                    stylers: [{color: '#D76363'}]
                  },
                  {
                    featureType: 'water',
                    elementType: 'geometry',
                    stylers: [{color: '#17263c'}]
                  },
                  {
                    featureType: 'water',
                    elementType: 'labels.text.fill',
                    stylers: [{color: '#515c6d'}]
                  },
                  {
                    featureType: 'water',
                    elementType: 'labels.text.stroke',
                    stylers: [{color: '#17263c'}]
                  }
                ]
        });
        var infoWindow = new google.maps.InfoWindow;

          downloadUrl('http://localhost/demographic-maps/php/php_xml.php', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var nama = markerElem.getAttribute('nama');
              var alamat = markerElem.getAttribute('alamat');
              var type = markerElem.getAttribute('type');
              var link = markerElem.getAttribute('link');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lalat')),
                  parseFloat(markerElem.getAttribute('lolong')))};

              var html = "<b>" + nama + "</b><br>" + alamat + "</b><br>" + type
                         + "</b><br>"
                         + "<form action='" + link + "'><input type='submit' value='Lihat Sekitar'/></form>";

              var icon = customIcons[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: icon.icon
              });

              map.addListener('center_changed', function() {
              // 3 seconds after the center of the map has changed, pan back to the
              // marker.
              window.setTimeout(function() {
                map.panTo(marker.getKoordinat());
              }, 3000);
              });

                marker.addListener('click', function() {
                infoWindow.setContent(html);
                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() {}

最后一个是我的php到xml pharser php_xml.php

<?php
require("dbase.php");

function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','&lt;',$htmlStr);
$xmlStr=str_replace('>','&gt;',$xmlStr);
$xmlStr=str_replace('"','&quot;',$xmlStr);
$xmlStr=str_replace("'",'&#39;',$xmlStr);
$xmlStr=str_replace("&",'&amp;',$xmlStr);
return $xmlStr;
}

// Opens a connection to a MySQL server
$connection=mysql_connect ('localhost', $username, $password);
if (!$connection) {
  die('Not connected : ' . mysql_error());
}

// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Select all the rows in the markers table
$query = "SELECT * FROM proyek_led";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Start XML file, echo parent node
echo '<markers>';

// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  // Add to XML document node
  echo '<marker ';
  echo 'nama="' . parseToXML($row['nama']) . '" ';
  echo 'alamat="' . parseToXML($row['alamat']) . '" ';
  echo 'lalat="' . $row['lan'] . '" ';
  echo 'lolong="' . $row['lng'] . '" ';
  echo 'type="' . $row['type'] . '" ';
  echo 'link="'.$row['link'].'" ';
  echo '/>';
}

// End XML file
echo '</markers>';

?>

标记未在移动浏览器上显示

0 个答案: