查找所選地點的最近標記Google Maps API？

我需要爲我在文本框中輸入的地方突出顯示所有最近的標記。我正在通過我的KML上傳標記。但問題是，查找所選地點的最近標記Google Maps API？

我能夠突出顯示的區域，但標記不要讓她強調

。請找到我嘗試過的代碼。

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>test123</title> 
    <link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet"> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script> 
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script> 
<script type="text/javascript"> 

     var side_bar_html = ""; 
     var marker_lat; 
     var marker_lng; 
     var kml; 
     // arrays to hold copies of the markers and html used by the side_bar 
     // because the function closure trick doesnt work there 
     var gmarkers = []; 

     // global "map" variable 
     var map = null; 
     var circle = null; 
     var geocoder = new google.maps.Geocoder(); 
     function initialize() { 
      var center = new google.maps.LatLng(28.019440, -17.382813); //set map center 
      var mapOptions = { 
       zoom: 3, //set default zoom level 
       center: center, 
       mapTypeId: google.maps.MapTypeId.ROADMAP //set default map type(ROADMAP,SATELLITE,HYBRID,TERRAIN) 
      }; 

      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); //***ORIGINAL*** 
      var mcOptions = {gridSize: 50, maxZoom: 15}; 

      var markerclusterer = new MarkerClusterer(map, [], mcOptions); 
      var infoWindow = new google.maps.InfoWindow({maxWidth: 800}); 

      var myParser = new geoXML3.parser({//*** ORIGINAL: only {map: map}); 
       map: map, singleInfoWindow: true, 
       createMarker: function(placemark) { 
        //Constructing marker for each Placemark node, and then add it to the markclustere 
      var point = placemark.latlng; 
        // var point = new google.maps.LatLng(placemark.point.lat, placemark.point.lng); 
        var marker = new google.maps.Marker({position: point}); 

        google.maps.event.addListener(marker, "click", function() { 
         marker_lat = marker.getPosition().lat(); 
         marker_lng = marker.getPosition().lng(); 
         infoWindow.close(); 
         infoWindow.setOptions({maxWidth: 800}); 
         var content = "<strong>" + placemark.name + "</strong><br>" + placemark.description; 
         infoWindow.setContent(content); 
         infoWindow.open(map, marker); 
        }); 
        markerclusterer.addMarker(marker); 
       } 
      }); 
      //kml=myParser.parse('atlanta.kml'); 
      myParser.parse('atlanta.kml'); 
     } 

     function makeSidebar() { 
       side_bar_html = ""; 
       for (var i=0; i < gmarkers.length; i++){ 
       if (map.getBounds().contains(gmarkers[i].getPosition())) { 
        // add a line to the side_bar html 
        side_bar_html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].title + '<\/a><br>'; 
       } 
       } 
       // put the assembled side_bar_html contents into the side_bar div 
       document.getElementById("side_bar").innerHTML = side_bar_html; 
      } 



     function codeAddress() { 
      var address = document.getElementById('address').value; 
      var radius = parseInt(document.getElementById('radius').value, 10)*1000; 
      geocoder.geocode({ 'address': address}, function(results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
       side_bar_html = ""; 
       // map.setCenter(results[0].geometry.location); 
       var searchCenter = results[0].geometry.location; 
       alert(kml); 
       getNearest(kml,marker_lat,marker_lng); 
       /* 
       var marker = new google.maps.Marker({ 
        map: map, 
        position: results[0].geometry.location 
       }); 
       */ 
       if (circle) circle.setMap(null); 
       circle = new google.maps.Circle({center:searchCenter, 
               radius: radius, 
               fillOpacity: 0.35, 
               fillColor: "#FF0000", 
               map: map}); 
       var bounds = new google.maps.LatLngBounds(); 
       var foundMarkers = 0; 
       for (var i=0; i<gmarkers.length;i++) { 
        if (google.maps.geometry.spherical.computeDistanceBetween(gmarkers[i].getPosition(),searchCenter) < radius) { 
        bounds.extend(gmarkers[i].getPosition()) 
        gmarkers[i].setMap(map); 
        // add a line to the side_bar html 
        side_bar_html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].title + '<\/a><br>'; 
        foundMarkers++; 
        } else { 
        gmarkers[i].setMap(null); 
        } 
       } 
       // put the assembled side_bar_html contents into the side_bar div 
       //document.getElementById("side_bar").innerHTML = side_bar_html; 
       if (foundMarkers > 0) { 
        map.fitBounds(bounds); 
      } else { 
        map.fitBounds(circle.getBounds()); 
       } 
       // makeSidebar(); 
       google.maps.event.addListenerOnce(map, 'bounds_changed', makeSidebar); 

       } else { 
       alert('Geocode was not successful for the following reason: ' + status); 
       } 
      }); 
      } 

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

    // A function to create the marker and set up the event window function 
     function createMarker(latlng, name, html) { 
      var contentString = html; 
      var marker = new google.maps.Marker({ 
       position: latlng, 
       // map: map, 
       title: name, 
       //name: name, 
       zIndex: Math.round(latlng.lat()*-100000)<<5 
       }); 

      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.setContent(contentString); 
       infowindow.open(map,marker); 
       }); 
      // save the info we need to use later for the side_bar 
      gmarkers.push(marker); 
      // add a line to the side_bar html 
      side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>'; 
     } 

     function getNearest(kml, lat, lng) { 
      var result = []; 
      //we can easily skip document/placemark/point 
      var coords = kml.getElementsByTagName('coordinates'); 
      for (var i=0;i<coords.length;i++) { 
       var points = coords[i].textContent.split(','); 
       if ((Math.abs(points[0]-lat)<0.1) && (Math.abs(points[1]-lng)<0.1)) { 
        result.push(new google.maps.LatLng(points[0], points[1])); 
       } 
      } 
      return result; 
     } 



     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
</head> 


<body> 

    <table border="1"> 
     <tr> 
     <td> 
    <div id="map-canvas" style="height:600px; width:600px"></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> 
    <div> 
     <input id="address" type="textbox" value="Atlanta"> 
     <input type="button" value="Geocode" onclick="codeAddress()"><br> 
     <input id="radius" type="textbox" value="50"> kilometers 
    </div> 
</body> 
</html>

下面是我的KML

<?xml version='1.0' encoding='UTF-8'?> 
<kml xmlns='http://www.opengis.net/kml/2.2'> 
    <Document> 
     <name>Untitled layer</name> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Marta Station</name> 
      <Point> 
       <coordinates>-84.38641000000001,33.750331,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Arts Center Station</name> 
      <Point> 
       <coordinates>-84.38712499999997,33.789283,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Ashby Station</name> 
      <Point> 
       <coordinates>-84.41755599999999,33.756289,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>avondale marta station</name> 
      <Point> 
       <coordinates>-84.28206699999998,33.775099,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Bankhead Station</name> 
      <Point> 
       <coordinates>-84.428677,33.77206,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Brookhaven Station</name> 
      <Point> 
       <coordinates>-84.33914700000003,33.86025,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Buckhead Station</name> 
      <Point> 
       <coordinates>-84.36729600000001,33.847874,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Chamblee Station</name> 
      <Point> 
       <coordinates>-84.305949,33.887911,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Civic Center Station</name> 
      <Point> 
       <coordinates>-84.38750399999998,33.766245,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>College Park Station</name> 
      <Point> 
       <coordinates>-84.44701600000002,33.651381,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Decatur Station</name> 
      <Point> 
       <coordinates>-84.29690699999998,33.77444,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Dome-GWCC-Philips Arena-CNN Station</name> 
      <Point> 
       <coordinates>-84.39775900000001,33.75633,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Doraville Station</name> 
      <Point> 
       <coordinates>-84.28089299999999,33.902966,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Dunwoody MARTA Station</name> 
      <Point> 
       <coordinates>-84.34497499999998,33.920753,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>East Lake Station</name> 
      <Point> 
       <coordinates>-84.312611,33.765062,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Marta East Point</name> 
      <Point> 
       <coordinates>-84.44032099999998,33.678097,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Edgewood-Candler Park South Parking Lot</name> 
      <Point> 
       <coordinates>-84.33961999999997,33.761972,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Forsyth St @ 5 Points Marta</name> 
      <Point> 
       <coordinates>-84.39219100000003,33.75423,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Garnett Station</name> 
      <Point> 
       <coordinates>-84.395513,33.748938,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Georgia State Station</name> 
      <Point> 
       <coordinates>-84.385404,33.749866,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Hamilton E Holmes Station</name> 
      <Point> 
       <coordinates>-84.46804099999997,33.754627,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Indian Creek Station</name> 
      <Point> 
       <coordinates>-84.22925499999997,33.769212,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Inman Park-Reynoldstown Station</name> 
      <Point> 
       <coordinates>-84.35262,33.757317,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Kensington Station</name> 
      <Point> 
       <coordinates>-84.25223599999998,33.772472,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>King Memorial Station</name> 
      <Point> 
       <coordinates>-84.37588099999999,33.749978,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Lakewood-ft McPherson Station</name> 
      <Point> 
       <coordinates>-84.42930000000001,33.700629,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Lenox Station</name> 
      <Point> 
       <coordinates>-84.35785399999997,33.845137,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Lindbergh Center Station</name> 
      <Point> 
       <coordinates>-84.36922600000003,33.823608,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Medical Center Station</name> 
      <Point> 
       <coordinates>-84.35127,33.911593,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Midtown Station</name> 
      <Point> 
       <coordinates>-84.38665700000001,33.780737,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>North Avenue Station</name> 
      <Point> 
       <coordinates>-84.38707399999998,33.771935,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>North Springs Station</name> 
      <Point> 
       <coordinates>-84.357235,33.945416,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Oakland City Station</name> 
      <Point> 
       <coordinates>-84.42527899999999,33.71726400000001,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Peachtree Center Station</name> 
      <Point> 
       <coordinates>-84.387564,33.759532,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Sandy Springs Transit Station</name> 
      <Point> 
       <coordinates>-84.35135200000002,33.4,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>Vine City Station</name> 
      <Point> 
       <coordinates>-84.40434800000003,33.756612,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>West End Station</name> 
      <Point> 
       <coordinates>-84.41296699999998,33.73584,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Placemark> 
      <styleUrl>#icon-503-FF8277</styleUrl> 
      <name>West Lake Station</name> 
      <Point> 
       <coordinates>-84.446503,33.75347,0.0</coordinates> 
      </Point> 
     </Placemark> 
     <Style id='icon-503-FF8277'> 
      <IconStyle> 
       <color>ff7782FF</color> 
       <scale>1.1</scale> 
       <Icon> 
        <href>http://www.gstatic.com/mapspro/images/stock/503-wht-blank_maps.png</href> 
       </Icon> 
      </IconStyle> 
     </Style> 
    </Document> 
</kml>

來源

2014-01-09 sTg

[（在XML文件中從數據）最近的標記（http://www.geocodezip.com /v3_MW_example_map3_closestMarker_geocode.html），您可以設想使用第三方解析，如[geoxml3]（https://code.google.com/p/geoxml3/）或[geoxml-v3]（https://code.google.com/p/geoxml-v3 /）從你的KML（而不是當前的「Mike Williams'屬性格式」XML）加載標記 – geocodezip

你是什麼意思，但標記不突出顯示？你爲什麼認爲他們應該是？ – geocodezip

@geocodezio，_你是什麼意思，但標記沒有被突出顯示？「，確切地說是令人困惑 - 但選擇將其理解爲」如何放置那些最近的標記「 – davidkonrad

我不能用我的眼睛解密代碼:)不要確切地知道，當事情是假設happend。但是，我救了你的KML文件，kml.kml，以模擬天生你曾經接受它：

$.ajax({ 
    url: 'kml.kml', 
    success : function(kml) { 
     console.log(getNearest(kml, -84.44, 33.65)); 
    } 
});

功能getNearest解析KML和返回google.maps.LatLng的代表最近點的數組（靠近基於值lat和lng，中心值。

function getNearest(kml, lat, lng) { 
    var result = []; 
    //we can easily skip document/placemark/point 
    var coords = kml.getElementsByTagName('coordinates'); 
    for (var i=0;i<coords.length;i++) { 
     var points = coords[i].textContent.split(','); 
     if ((Math.abs(points[0]-lat)<0.1) && (Math.abs(points[1]-lng)<0.1)) { 
      result.push(new google.maps.LatLng(points[0], points[1])); 
     } 
    } 
    return result; 
}

在上面的情況下，在問題使用KML，它返回8個latLngs你現在可以作爲用於繪製「hgihlighted」標記物的鹼使用的陣列。

enter image description here

來源

2014-01-09 15:19:33 davidkonrad

這是我的函數，用於計算在公里兩點之間的距離：

unction distance(lat1, lng1, lat2, lng2) { 
     var radlat1 = Math.PI * lat1/180; 
     var radlat2 = Math.PI * lat2/180; 
     var radlon1 = Math.PI * lng1/180; 
     var radlon2 = Math.PI * lng2/180; 
     var theta = lng1 - lng2; 
     var radtheta = Math.PI * theta/180; 
     var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta); 
     dist = Math.acos(dist); 
     dist = dist * 180/Math.PI; 
     dist = dist * 60 * 1.1515; 

     //Get in in kilometers 
     dist = dist * 1.609344; 

     return dist; 
    }

來源

2015-03-31 15:04:35

查找所選地點的最近標記Google Maps API？

回答

相關問題