javascript - 结合谷歌地图（基本的 Javascript 问题）

Question

希望有人能在这里指出一些非常明显的东西（我根本不知道 Javascript）。基本上我有两张地图，一张根据通过 PHP 传递的地址进行地理编码，另一张将位置列表从 MySQL DB 拉到 XML 文件中。

两张地图都可以完美隔离。但是，我需要将它们组合起来，因此一张地图标记了 XML 文件中的位置，并且还显示了地理编码标记。这两者结合的代码如下：

<script>
  var customLabel = {
    restaurant: {
      label: 'R'
    },
    bar: {
      label: 'B'
    }
  };

  var geocoder;
var address ="<?php
foreach ($records as $record)
{
    print htmlspecialchars($record['Address']);
}
?>";

 /// Start of XML Lookup Map

    function initialize() {
    var map = new google.maps.Map(document.getElementById('map_canvas'), {
      center: new google.maps.LatLng(-33.863276, 151.207977),
      zoom: 6
    });


    var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP or XML file
      downloadUrl('test.php', 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
          });


          var circle = new google.maps.Circle({
            map: map,
            radius: 200000,    // 10 miles in metres
            fillColor: '#AA0000'
            });
            circle.bindTo('center', marker, 'position');





        });
      });
    }

  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() {}

  /// End of XML Lookup Map

  /// Start of Geocoding Map

  function initialize() {
 geocoder = new google.maps.Geocoder();
 var latlng = new google.maps.LatLng(-34.397, 150.644);
 var myOptions = {
  zoom: 7,
  center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: 
google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
if (geocoder) {
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
      map.setCenter(results[0].geometry.location);

        var infowindow = new google.maps.InfoWindow(
            { content: '<b>'+address+'</b>',
              size: new google.maps.Size(150,50)
            });

        var markerz = new google.maps.Marker({
            position: results[0].geometry.location,
            map: map, 
            title:address
        }); 



    // Add circle overlay and bind to marker
    var circle = new google.maps.Circle({
      map: map,
      radius: 200000,    // 10 miles in metres
      fillColor: '#AA0000'
    });
    circle.bindTo('center', markerz, 'position');


        google.maps.event.addListener(marker, markerz, 'click', function() {
            infowindow.open(map,marker);
        });

      } else {
        alert("No results found");
      }
    } else {
      alert("Geocode was not successful for the following reason: " + 
status);
    }
  });
 }
}

  /// End of Geocoding Map

</script>

任何指导表示赞赏！

标签： javascriptgoogle-mapsgoogle-maps-api-3

Answer 1

谢谢@John Smith，解决了这个问题。在下面发布工作代码。这将允许在一张地图上查找和固定地理编码地址，以及通过 PHP 从 XML 文件中提取和固定纬度/经度坐标。

 <script>
  var customLabel = {
    restaurant: {
      label: 'R'
    },
    bar: {
      label: 'B'
    },
    stockingcenter: {
      label: 'S'
    }
  };

  var geocoder;
var address ="<?php
foreach ($records as $record)
{
print htmlspecialchars($record['Address__c']);
}
?>";

 /// Start of XML Lookup Map

    function initialize() {
    var map = new google.maps.Map(document.getElementById('map_canvas'), {
      center: new google.maps.LatLng(51.5477187, -0.3150843),
      zoom: 6
    });


    var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP or XML file
      downloadUrl('test.php', 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() {}

  /// End of XML Lookup Map


   /// Start of Geocoding Map


       geocoder = new google.maps.Geocoder();
        var myOptions = {
                         zoom: 6};

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
     if (geocoder) {
        geocoder.geocode( { 'address': address}, function(results, status) {
           if (status == google.maps.GeocoderStatus.OK) {
             if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
               map.setCenter(results[0].geometry.location);

            var infowindow = new google.maps.InfoWindow(
              { content: '<b>'+address+'</b>',
                size: new google.maps.Size(150,50)
              });

    var markerz = new google.maps.Marker({
        position: results[0].geometry.location,
        map: map, 
        title:address
    }); 



// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
  map: map,
  radius: 200000,    // 10 miles in metres
  fillColor: '#4e63a1'
});
circle.bindTo('center', markerz, 'position');


    google.maps.event.addListener(markerz, 'click', function() {
        infowindow.open(map,markerz);
    });

  } else {
    alert("No results found");
  }
} else {
  alert("Geocode was not successful for the following reason: " + 
status);
}
});
}
}

/// End of Geocoding Map
</script>