Получить карту и вид улицы с адреса в PHP-переменной! - PullRequest
Новая
       34

Получить карту и вид улицы с адреса в PHP-переменной!

1 голос
/ 12 апреля 2010

У меня есть PHP-переменная с именем $ go_Adress, которая содержит адрес, необходимый для получения карты и вида улицы. Как я могу это сделать? Я создал ключ API, но я не знаю, как это сделать!

Надеюсь, что вы можете помочь.

Ответы [ 2 ]

2 голосов
/ 12 апреля 2010

Я только что ответил на другой вопрос в Картах Google , и я думаю, что я могу использовать тот же пример здесь.

Следующий пример может помочь вам начать работу. Все, что вам нужно сделать, это изменить переменную JavaScript userLocation на адрес, который вы указали в переменной php. 

<!DOCTYPE html>
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps API Demo</title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false"
            type="text/javascript"></script> 
  </head> 
  <body onunload="GUnload()"> 

    <div id="map_canvas" style="width: 400px; height: 300px"></div> 

    <script type="text/javascript"> 

    var userLocation = 'London, UK';

    if (GBrowserIsCompatible()) {
       var geocoder = new GClientGeocoder();
       geocoder.getLocations(userLocation, function (locations) {         
          if (locations.Placemark)
          {
             var north = locations.Placemark[0].ExtendedData.LatLonBox.north;
             var south = locations.Placemark[0].ExtendedData.LatLonBox.south;
             var east  = locations.Placemark[0].ExtendedData.LatLonBox.east;
             var west  = locations.Placemark[0].ExtendedData.LatLonBox.west;

             var bounds = new GLatLngBounds(new GLatLng(south, west), 
                                            new GLatLng(north, east));

             var map = new GMap2(document.getElementById("map_canvas"));

             map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
             map.addOverlay(new GMarker(bounds.getCenter()));
          }
       });
    }
    </script> 
  </body> 
</html>

Приведенный выше пример отображает карту, подобную приведенной ниже:

Render google map in based on selected location

Возможно, вам придется заменить статический: 

var userLocation = 'London, UK';

... с: 

var userLocation = '<?php echo $go_Adress; ?>';

... как Флетчер предложил в другом ответе.

Обратите внимание, что карта не будет отображаться, если клиентский геокодер Google не сможет получить координаты с адреса. Возможно, вы захотите узнать, как справиться с этой ситуацией.

Что касается API-ключа, вам необходимо добавить его в качестве параметра к <script> src, который вызывает API-интерфейс Maps, как показано в «Привет, мир» Google Maps .

UPDATE:

Я обновляю приведенный выше пример для использования объекта Панорама улиц . Я надеюсь, что этот пример не требует пояснений, и он направляет вас в правильном направлении: 

<!DOCTYPE html>
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps API Demo - Street View</title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false"
            type="text/javascript"></script> 
  </head> 
  <body onunload="GUnload()"> 

    <div id="map_canvas" style="width: 400px; height: 300px"></div> 

    <script type="text/javascript"> 

    var userLocation = 'London, UK';

    if (GBrowserIsCompatible()) {
       var geocoder = new GClientGeocoder();
       geocoder.getLocations(userLocation, function (locations) {         
          if (locations.Placemark)
          {
             var north = locations.Placemark[0].ExtendedData.LatLonBox.north;
             var south = locations.Placemark[0].ExtendedData.LatLonBox.south;
             var east  = locations.Placemark[0].ExtendedData.LatLonBox.east;
             var west  = locations.Placemark[0].ExtendedData.LatLonBox.west;

             var bounds = new GLatLngBounds(new GLatLng(south, west), 
                                            new GLatLng(north, east));

             new GStreetviewPanorama(document.getElementById("map_canvas"), 
                                     { latlng: bounds.getCenter() });
          }
       });
    }
    </script> 
  </body> 
</html>

Скриншот из приведенного выше примера:

Google Maps API Demo - Street View

2-е ОБНОВЛЕНИЕ:

Вы можете включить как просмотр улиц, так и холст карты, "объединив" два приведенных выше примера следующим образом: 

<!DOCTYPE html>
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps API Demo - Street View with Map</title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false"
            type="text/javascript"></script> 
  </head> 
  <body onunload="GUnload()"> 

    <div id="pano" style="width: 400px; height: 200px"></div> 
    <div id="map_canvas" style="width: 400px; height: 200px"></div> 

    <script type="text/javascript"> 

    var userLocation = 'London, UK';

    if (GBrowserIsCompatible()) {
       var geocoder = new GClientGeocoder();
       geocoder.getLocations(userLocation, function (locations) {         
          if (locations.Placemark)
          {
             var north = locations.Placemark[0].ExtendedData.LatLonBox.north;
             var south = locations.Placemark[0].ExtendedData.LatLonBox.south;
             var east  = locations.Placemark[0].ExtendedData.LatLonBox.east;
             var west  = locations.Placemark[0].ExtendedData.LatLonBox.west;

             var bounds = new GLatLngBounds(new GLatLng(south, west), 
                                            new GLatLng(north, east));

             var map = new GMap2(document.getElementById("map_canvas"));

             map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
             map.addOverlay(new GMarker(bounds.getCenter()));

             new GStreetviewPanorama(document.getElementById("pano"),
                                     { latlng: bounds.getCenter() })
          }
       });
    }
    </script> 
  </body> 
</html>

Снимок экрана для просмотра улиц с картой:

Google Maps API Demo - Street View with Map

3-е ОБНОВЛЕНИЕ :

В Google Maps API нет прямого метода связывания движений вида улицы с картой. Поэтому это должно быть обработано вручную. В следующем примере красный маркер можно перетаскивать, а при падении он соответственно перемещает вид улицы. Кроме того, каждый раз, когда обновляется вид улицы, маркер также обновляется на карте.

Чтобы попробовать этот пример, убедитесь, что вы вставили ключ API в параметры <script> src и попробовали его из домена, где вы зарегистрировали ключ. В противном случае, похоже, что события не работают должным образом. 

<!DOCTYPE html>
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps API Demo - Street View with Map</title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false"
            type="text/javascript"></script> 
  </head> 
  <body onunload="GUnload()"> 

    <div id="pano" style="width: 400px; height: 200px"></div> 
    <div id="map_canvas" style="width: 400px; height: 200px"></div> 

    <script type="text/javascript"> 

    var userLocation = 'Copenhagen, Denmark';

    if (GBrowserIsCompatible()) {
       var geocoder = new GClientGeocoder();

       geocoder.getLocations(userLocation, function (locations) {         
          if (locations.Placemark)
          {
             var north = locations.Placemark[0].ExtendedData.LatLonBox.north;
             var south = locations.Placemark[0].ExtendedData.LatLonBox.south;
             var east  = locations.Placemark[0].ExtendedData.LatLonBox.east;
             var west  = locations.Placemark[0].ExtendedData.LatLonBox.west;

             var bounds = new GLatLngBounds(new GLatLng(south, west), 
                                            new GLatLng(north, east));

             var map = new GMap2(document.getElementById("map_canvas"));

             map.setCenter(bounds.getCenter(), 14);

             map.addOverlay(new GStreetviewOverlay());

             var marker = new GMarker(bounds.getCenter(), { draggable: true });
             map.addOverlay(marker);                                

             var streetView = new GStreetviewPanorama(document.getElementById("pano"));

             streetView.setLocationAndPOV(bounds.getCenter()); 

             GEvent.addListener(marker, "dragend", function(latlng) {
                streetView.setLocationAndPOV(latlng);
             });

             GEvent.addListener(streetView, "initialized", function(location) {
                marker.setLatLng(location.latlng);
                map.panTo(location.latlng);
             });
          }
       });
    }
    </script> 
  </body> 
</html>

Скриншот приведенного выше примера:

Google Maps API Demo - Street View with Map

Получение представления о улице, работающего с картой, может быть темой другого вопроса переполнения стека, так как есть довольно много соображений.

0 голосов
/ 12 апреля 2010

Вам нужно будет включить файл javascript, который использует объект GClientGeocoder, как в этом примере:

http://code.google.com/apis/maps/documentation/services.html#Geocoding_Object

Javascript необходимо будет передать через интерпретатор PHP, который вставляет адрес в переменную javascript.

Итак, для приведенного выше примера 

var myAddress = '<?php echo $go_Adress; ?>';
showAddress(myAddress);

Но сначала я рекомендую показать очень простую карту.

http://code.google.com/apis/maps/documentation/introduction.html

...