查詢谷歌地圖

我想創建一個頁面，用戶輸入一個地方，我搜索這個地方，我搜索屬於我的數據庫中的所有對象，我也搜索所有在一個英里的地方。我已經創建了一個可以讓我尋找與自動完成和點的地方使用此代碼地圖上的結構：查詢谷歌地圖

function initialize() { 
    var myCoordsLenght = 6; 
    var mapOptions = { 
    center: new google.maps.LatLng(46.018151,8.956521), 
    zoom: 17 
    }; 

    var map = new google.maps.Map(document.getElementById('map-canvas'), 
    mapOptions); 

    var input = /** @type {HTMLInputElement} */(
     document.getElementById('pac-input')); 


    var autocomplete = new google.maps.places.Autocomplete(input); 
    autocomplete.bindTo('bounds', map); 

    var infowindow = new google.maps.InfoWindow(); 


    var marker = new google.maps.Marker({ 
    map: map, 
    draggable: true 
    }); 


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


    google.maps.event.addListener(marker, 'dragend', function(evt){ 

    document.getElementById('latitude').value= evt.latLng.lat().toFixed(myCoordsLenght); 
    document.getElementById('longitude').value = evt.latLng.lng().toFixed(myCoordsLenght); 

}); 




    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
    infowindow.close(); 
    marker.setVisible(false); 
    var place = autocomplete.getPlace(); 
    if (!place.geometry) { 
     return; 
    } 

    // If the place has a geometry, then present it on a map. 
    if (place.geometry.viewport) { 
     map.fitBounds(place.geometry.viewport); 
    } else { 
     map.setCenter(place.geometry.location); 
     map.setZoom(17); // Why 17? Because it looks good. 
    } 
    marker.setIcon(/** @type {google.maps.Icon} */({ 
     url: place.icon, 
     size: new google.maps.Size(71, 71), 
     origin: new google.maps.Point(0, 0), 
     anchor: new google.maps.Point(17, 34), 
     scaledSize: new google.maps.Size(35, 35), 

    })); 
    marker.setPosition(place.geometry.location); 
    marker.setVisible(true); 



    document.getElementById('latitude').value= place.geometry.location.lat(); 
    document.getElementById('longitude').value = place.geometry.location.lng(); 


    var address = ''; 
    if (place.address_components) { 
     address = [ 
     (place.address_components[0] && place.address_components[0].short_name || ''), 
     (place.address_components[1] && place.address_components[1].short_name || ''), 
     (place.address_components[2] && place.address_components[2].short_name || '') 
     ].join(' '); 
    } 

    infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address); 
    infowindow.open(map, marker); 
    }); 


} 

google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    </head> 
    <body> 
    <input id="pac-input" class="controls" type="text" 
     placeholder="Enter a location"> 
    <div id="type-selector" class="controls"> 

     <label for="latitude">Latitude:</label> 
    <input id="latitude" type="text" value="" /> 
    <label for="longitude">Longitude:</label> 
    <input id="longitude" type="text" value="" /> 


    </div> 
    <div id="map-canvas" style="width: 500px; height: 400px;"></div> 
    </body> 
</html>

但在這一點上我怎麼運行一個查詢將返回我想要的對象並更新地圖？

感謝所有

來源

2014-01-22 Simo

請定義*搜索屬於該地點的所有對象在我的分貝*。要查詢您的數據庫中特定範圍內的位置，請在此處查看我的答案http://stackoverflow.com/a/21043061/1238965您的問題還應該標記爲您使用的後端語言和數據庫。 – MrUpsidown

[MySQL大圓距離（Haversine公式）]的可能重複（http://stackoverflow.com/questions/574691/mysql-great-circle-distance-haversine-formula） – geocodezip

可能的重複[radius根據緯度/經度搜索]（http://stackoverflow.com/questions/15628794/radius-search-by-latitude-longitude） – geocodezip

你需要發現你已經在地圖上畫出的圓圈對象的範圍（這是很不幸的矩形）。它傳遞給你的服務器端，並使用類似查詢數據庫：

SELECT * FROM yourtable WHERE lat BETWEEN a AND c AND lng between b AND d

其中A和B是你頂左座標，c，d爲您的右下角。（more information available here）。

既然你已經在你的邊界框內有所有的對象，你將需要將它們傳回到你的前端並確定它們是否在你的半徑內。有關更多信息，請參閱this answer，即完成！

來源

2014-01-22 10:41:43 Swires

查詢谷歌地圖

回答

相關問題