1. 首页
  2. 问答
  3. 从一个PHP变量的地址获取地图和街景！

从一个PHP变量的地址获取地图和街景！

2010-04-12 86 views

回答

2

我刚刚回答了another question on Google Maps，我想我可以在这里使用相同的例子。

以下示例可帮助您入门。您需要做的就是使用您的php变量中的地址更改JavaScript变量userLocation。

<!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; ?>';

... as Fletcher suggested in another answer.

请注意，如果Google Client-side Geocoder无法从地址中检索坐标，地图将不会显示。你可能想看看如何处理这种情况。

至于API密钥，您需要将其作为参数添加到调用Maps API的<script>src，如The "Hello, World" of Google Maps中所示。

UPDATE：

我更新上述例子使用Street View Panorama对象。我希望的例子是不言自明的，而且它可以让你在正确的方向前进：

<!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日更新：

的谷歌地图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

掌握地图工作很好的街景可能是另一个堆栈溢出问题的话题，因为有相当多的因素，使。

来源

2010-04-12 19:55:46

+0

是否有可能让你同时拥有一个谷歌地图和谷歌的街景来创建它，当你向前走在街上查看地图follws :)？ – 2010-04-12 20:32:39

+0

这个截图很棒，它是我想要的。如果你能使上面提到的有关使街道视图移动的东西能让你成为我书中的预言者:) – 2010-04-12 20:44:16

+0

@丹尼斯：嘿嘿......是的，Google地图API并未直接提供这些信息，但通过收听一些活动绝对有可能。让我试试看... – 2010-04-12 20:50:52

0

您将需要包括它使用的GClientGeocoder对象在这个例子中的JavaScript文件：

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

来源

2010-04-12 19:56:17

+0

我有这张地图，它全部与丹尼尔的代码一起工作..现在的问题是获得一个街景视图框显示相同的地址 - 我该怎么做？ – 2010-04-12 20:13:18

+0

@丹尼斯：我已经更新了我的答案，修改了原始示例以呈现街景全景图。我希望它能帮助你开始。 – 2010-04-12 20:27:25

相关问题

 相关问题