2013-10-01 33 views
-1

嗨有人知道如何通過類型上使用PHP或Javascript谷歌地圖獲取經緯度?PHP谷歌地圖獲取經緯度按類型

例如,我想在這個位置的所有餐廳:

位置英國,德文

類型餐廳

它應該返回餐廳的名字,緯度經度

任何幫助,將不勝感激:)

+0

此另一個例子是: 位置:英國 類型:機場 –

+0

這是[Places API的(https://開頭developers.google.com/places/)。但是,它不會返回_all_位置(除非它被限制在一個小區域內)。它將返回200個位置(雷達搜索)或多達60個位置,並以20個組爲單位提供更多信息。 – geocodezip

回答

0

HTML和JS

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <link href="default.css" 
     rel="stylesheet"> 
    <title>Places search box</title> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script> 
    <script> 
function initialize() { 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    var defaultBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(-33.8902, 151.1759), 
     new google.maps.LatLng(-33.8474, 151.2631)); 
    map.fitBounds(defaultBounds); 

    var input = /** @type {HTMLInputElement} */(document.getElementById('target')); 
    var searchBox = new google.maps.places.SearchBox(input); 
    var markers = []; 

    google.maps.event.addListener(searchBox, 'places_changed', function() { 
    var places = searchBox.getPlaces(); 

    for (var i = 0, marker; marker = markers[i]; i++) { 
     marker.setMap(null); 
    } 

    markers = []; 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0, place; place = places[i]; i++) { 
     var image = { 
     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(25, 25) 
     }; 

     var marker = new google.maps.Marker({ 
     map: map, 
     icon: image, 
     title: place.name, 
     position: place.geometry.location 
     }); 

     markers.push(marker); 

     bounds.extend(place.geometry.location); 
    } 

    map.fitBounds(bounds); 
    }); 

    google.maps.event.addListener(map, 'bounds_changed', function() { 
    var bounds = map.getBounds(); 
    searchBox.setBounds(bounds); 
    }); 
} 

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

    </script> 
    <style> 
     #target { 
     width: 345px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="panel"> 
     <input id="target" type="text" placeholder="Search Box"> 
    </div> 
    <div id="map-canvas"></div> 
    </body> 
</html> 

和CSS

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

#map-canvas, #map_canvas { 
    height: 100%; 
} 

@media print { 
    html, body { 
    height: auto; 
    } 

    #map-canvas, #map_canvas { 
    height: 650px; 
    } 
} 

#panel { 
    position: absolute; 
    top: 5px; 
    left: 50%; 
    margin-left: -180px; 
    z-index: 5; 
    background-color: #fff; 
    padding: 5px; 
    border: 1px solid #999; 
} 

這裏指FOR MORE! GOOGLE PLACES

1

入住這

$(function() { 
     var lat = 44.88623409320778, 
      lng = -87.86480712897173, 
      latlng = new google.maps.LatLng(lat, lng), 
      image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png'; 

     //zoomControl: true, 
     //zoomControlOptions: google.maps.ZoomControlStyle.LARGE, 

     var mapOptions = { 
      center: new google.maps.LatLng(lat, lng), 
      zoom: 13, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      panControl: true, 
      panControlOptions: { 
       position: google.maps.ControlPosition.TOP_RIGHT 
      }, 
      zoomControl: true, 
      zoomControlOptions: { 
       style: google.maps.ZoomControlStyle.LARGE, 
       position: google.maps.ControlPosition.TOP_left 
      } 
     }, 
     map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions), 
      marker = new google.maps.Marker({ 
       position: latlng, 
       map: map, 
       icon: image 
      }); 

     var input = document.getElementById('searchTextField'); 
     var autocomplete = new google.maps.places.Autocomplete(input, { 
      types: ["geocode"] 
     }); 

     autocomplete.bindTo('bounds', map); 
     var infowindow = new google.maps.InfoWindow(); 

     google.maps.event.addListener(autocomplete, 'place_changed', function (event) { 
      infowindow.close(); 
      var place = autocomplete.getPlace(); 
      if (place.geometry.viewport) { 
       map.fitBounds(place.geometry.viewport); 
      } else { 
       map.setCenter(place.geometry.location); 
       map.setZoom(17); 
      } 

      moveMarker(place.name, place.geometry.location); 
      $('.MapLat').val(place.geometry.location.lat()); 
      $('.MapLon').val(place.geometry.location.lng()); 
     }); 
     google.maps.event.addListener(map, 'click', function (event) { 
      $('.MapLat').val(event.latLng.lat()); 
      $('.MapLon').val(event.latLng.lng()); 
      infowindow.close(); 
        var geocoder = new google.maps.Geocoder(); 
        geocoder.geocode({ 
         "latLng":event.latLng 
        }, function (results, status) { 
         console.log(results, status); 
         if (status == google.maps.GeocoderStatus.OK) { 
          console.log(results); 
          var lat = results[0].geometry.location.lat(), 
           lng = results[0].geometry.location.lng(), 
           placeName = results[0].address_components[0].long_name, 
           latlng = new google.maps.LatLng(lat, lng); 

          moveMarker(placeName, latlng); 
          $("#searchTextField").val(results[0].formatted_address); 
         } 
        }); 
     }); 

     function moveMarker(placeName, latlng) { 
      marker.setIcon(image); 
      marker.setPosition(latlng); 
      infowindow.setContent(placeName); 
      //infowindow.open(map, marker); 
     } 
    }); 

工作演示fiddle