Question

我知道对于很多人来说这是一个普遍的问题。

我正在一个项目中显示google map上mysql表中的位置数据。我做了很多研究，尝试了几种不同的方法，但都没有成功。我尝试过的最新方法是将mysql表导出到.xml文件，然后将.xml文件用作地图数据的来源。

我碰到了一篇文章：Using MySQL and PHP with Google Maps，并据我所知按照说明进行操作，但是地图未显示，因此显然我也无法从.xml文件中提取数据并显示它作为地图上的标记。

谁能看一下代码，然后告诉我我所缺少的内容吗？

以下是地图文件的代码：

<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Using MySQL and PHP with Google Maps</title>
<style>
<span class="metadata-marker" style="display: none;" data-region_tag="css"></span>      /* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 100%;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
</head>
<html>
<body>
<span class="metadata-marker" style="display: none;" data-region_tag="html-body"></span>    
<div id="map"></div>

<script>
<span class="metadata-marker" style="display: none;" data-region_tag="script-body"></span>      
var customLabel = {
    restaurant: {
      label: 'R'
    },
    bar: {
      label: 'B'
    }
  };

    function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(-33.863276, 151.207977),
      zoom: 12
    });
    var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP or XML file
      downloadUrl('http://localhost/includes/mapmarkers.xml', 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 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 text = document.createElement('text');
          text.textContent = address
          infowincontent.appendChild(text);
          var icon = customLabel[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            label: icon.label
          });
          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() {}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCjHDiJ8u_P8lKfjF8rhjxFjLPsO0ivg-M&callback=initMap">
</script>

这是mapmarkers.xml文件的内容：

<?xml version='1.0' ?><markers><marker id="8" name="Buena Ropa!" address="Brodie St, Rydalmere NSW 2116" lat="-33.815521" lng="151.026642" type="" /><marker id="7" name="Perfect Fit" address="Darley Rd, Randwick NSW 2031" lat="-33.903557" lng="151.237732" type="" /><marker id="6" name="Trish &amp; Tash" address="Lincoln St, Lane Cove West NSW 2066" lat="-33.812222" lng="151.143707" type="" /><marker id="5" name="Fashiontasia" address="Braidwood Dr, Prestons NSW 2170" lat="-33.944489" lng="150.854706" type="" /><marker id="4" name="The Legacy" address="Charlotte Ln, Chatswood NSW 2067" lat="-33.796669" lng="151.183609" type="" /><marker id="3" name="Dress Code" address="Glenview Avenue, Revesby, NSW 2212" lat="-33.949448" lng="151.008591" type="" /><marker id="2" name="BeeYourself Clothing" address="Thalia St, Hassall Grove NSW 2761" lat="-33.729752" lng="150.836090" type="" /><marker id="1" name="Heir Apparel" address="Crowea Pl, Frenchs Forest NSW 2086" lat="-33.737885" lng="151.235260" type="" /><marker id="9" name="Coxcomb and Lily Boutique" address="Ferrers Rd, Horsley Park NSW 2175" lat="-33.829525" lng="150.873764" type="" /><marker id="10" name="Moda Couture" address="Northcote Rd, Glebe NSW 2037" lat="-33.873882" lng="151.177460" type="" /></markers>

需要帮助在Google Map上显示mysql数据

0 个答案: