0

我正在尝试在 php 中创建一个应用程序，该应用程序在谷歌地图上显示多个标记，并允许用户在单击地图上的任意位置时获取最近的标记。我尝试了以下代码。但它不起作用。有人可以帮忙吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps Javascript API v3 Example: Loading clustered data from an XML</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false"></script> 
<style type="text/css">
html, body { height: 100%; } 
</style>
<script type="text/javascript"> 
//<![CDATA[

      var side_bar_html = ""; 
      var gmarkers = []; 
      var map = null;
      var markerclusterer = null;

function createMarker(latlng, name, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        // map: map,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

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

    gmarkers.push(marker);

    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}

function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}

function initialize() {

var myOptions = {
    zoom: 12,
    center: new google.maps.LatLng(8.491118,76.949840),
    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);
      google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });

  google.maps.event.addListener(map, 'click', find_closest_marker);

  downloadUrl("marker.xml", function(doc) {
  map.markers = [];
        var xmlDoc = xmlParse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {

          var lat = parseFloat(markers[i].getAttribute("Lat"));
          var lng = parseFloat(markers[i].getAttribute("Longt"));
          var point = new google.maps.LatLng(lat,lng);

          var hname = markers[i].getAttribute("Hname");
              var Phone = markers[i].getAttribute("Phone");

          var html="<b>"+hname+"</b><br>"+Phone;

          var marker = createMarker(point,hname+" "+Phone,html);
        }
        markerCluster = new MarkerClusterer(map, gmarkers);
        document.getElementById("side_bar").innerHTML = side_bar_html;
      });
    }

var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
  });

function find_closest_marker( event ) {
    var closestMarker = -1;
    var closestDistance = Number.MAX_VALUE;
    for( i=0;i<gmarkers.length; i++ ) {
        var distance = google.maps.geometry.spherical.computeDistanceBetween(gmarkers[i].getPosition(),event.latLng);
        if ( distance < closestDistance ) {
            closestMarker = i;
            closestDistance = distance;
        }
    }
    map.setCenter(gmarkers[closestMarker].getPosition());
    if (map.getZoom() < 16) map.setZoom(16);
    google.maps.event.trigger(gmarkers[closestMarker], 'click');
}


    </script> 
  </head> 
<body style="margin:0px; padding:0px;" onload="initialize()">     
<table border="1"> 
      <tr> 
        <td> 
           <div id="map_canvas" style="width: 550px; height: 450px"></div> 
        </td> 
        <td valign="top" > 
           <div id="side_bar" style="width:300px;height:450px; text-decoration: underline; color: #4444ff; overflow:auto;"></div> 
        </td> 
      </tr> 
    </table> 
   </body> 
</html>

标记.xml

<markers>
<marker Hname="CHC Anchuthengu" Lat="8.6734310" Longt="76.7581770"/>
<marker Hname="PHC Perumathura" Lat="8.6218640" Longt="76.7975220"/>
<marker Hname="PHC Keezhattingal" Lat="8.6982130" Longt="76.7915000"/>
<marker Hname="PHC Azhoor" Lat="8.6408080" Longt="76.8252470"/>
</markers>
4

1 回答 1

1

您需要创建 map.markers 数组（这部分未测试）：

 downloadUrl("phpsqlajax_genxml.php", function(data) {
    map.markers = [];
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var hname = markers[i].getAttribute("Hname");
      var Phone = markers[i].getAttribute("Phone");
      var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("Lat")), parseFloat(markers[i].getAttribute("Longt")));
      var html = "<b>" + hname + "<br/>" + Phone + "</b>";
    var type = "bar";
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      });
      map.markers.push(marker);
      bindInfoWindow(marker, map, infoWindow, html);
    }
  });

我建议使用几何库 computeDistanceBetween 函数

function find_closest_marker( event ) {
    var closestMarker = -1;
    var closestDistance = Number.MAX_VALUE;
    for( i=0;i<map.markers.length; i++ ) {
        var distance = google.maps.geometry.spherical.computeDistanceBetween(gmarkers[i].getPosition(),event.latLng);
        if ( distance < closestDistance ) {
            closestMarker = i;
            closestDistance = distance;
        }
    }
    allert(map.markers[closestMarker].title);
}

工作示例

于 2013-08-10T16:24:05.577 回答