我尝试过什么？

地址为410 Walker Street Lowell MA 01851

我使用这个网站。 http://www.gpsvisualizer.com/geocode

抓住它的位置，我得到了这个

42.635507, -71.328928

然后我将它们包含在我的HTML中我是从https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map

获得的

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map-canvas {
        width: 500px;
        height: 400px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
      function initialize() {
        var mapCanvas = document.getElementById('map-canvas');
        var mapOptions = {
          center: new google.maps.LatLng(42.635507, -71.328928),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

问题

因为我的应用程序中有很多用户。对我来说，手动完成它是很难的 - 一个接一个。我想对我应用程序中所有页面上的所有地址进行dynamically generate。

根据我尝试的内容，有人可以帮我或者给我一些暗示吗？
你能告诉我我错过了什么吗？
这背后的逻辑是什么？
我是否需要为此下载特定的软件包或插件？

对所有涉及这篇文章的人thanks！

Answer 1

您可以使用Google地图地理编码服务解码您的地址：

https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple?hl=pt-br

var geocoder = new google.maps.Geocoder();

function codeAddress(address) {
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var latlng = results[0].geometry.location; // this is what you want
      alert(latlng)
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

使用LatLng值，您可以使用它来使地图居中

map.setCenter(latlng);

甚至画一个标记

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

但深入研究你的样本。您可能只需要插入一个指向您从PHP获得的地址的嵌入iframe。首先，您需要生成API Key，然后将其用作以下示例：

<iframe
    width="600"
    height="450"
    frameborder="0" style="border:0"
    src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
      &q=<? echo "YOUR ADDRESS FROM PHP"?>
      &attribution_source=Google+Maps+Embed+API">
 </iframe>

Answer 2

urlencode使用PHP获取地理代码数据。这还将验证地址格式是否正确，并在需要时提供格式正确的地址。我提供了一个自定义地址格式用于显示目的。如果地址不能进行地理编码，那么它就会重新提交要重新提交的地址。

您可能错过了在该位置放置标记。

    $address = urlencode'410 Walker Street Lowell MA 01851');

    $url = 'http://maps.googleapis.com/maps/api/geocode/json?address=' . urlencode($formatted_address) . '&sensor=false';
    $data = @file_get_contents($url);
    $data = json_decode($data,true);
    $tLat = $data['results']['0']['geometry']['location']['lat'];
    $tLng = $data['results']['0']['geometry']['location']['lng'];
    $formatted_address = $data['results']['0']['formatted_address'];
    $address_components = array();
    $address_components = $data['results']['0']['address_components'];
    foreach ($address_components as $key => $val){
      if ($val['types'][0] == 'route'){
        $route = addslashes($val['short_name']);
      }
      elseif ($val['types'][0] == 'locality'){
        $locality = addslashes($val['short_name']);
      }
      elseif ($val['types'][0] == 'postal_code'){
        $postal_code = $val['long_name'];
      }
      elseif ($val['types'][0] == 'street_number'){
        $street_number = addslashes($val['long_name']);
      }
    }


    if (strlen($street_number) > 0){ 
      echo "$addr$customer<div id=\"map\"></div>";
      <script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
      <script>
      var map;
      function initialize() {
      directionsDisplay = new google.maps.DirectionsRenderer();
      var cntr = new google.maps.LatLng($tLat, $tLng);
      var mapOptions = {zoom:15,mapTypeId: google.maps.MapTypeId.ROADMAP,center: cntr}
      map = new google.maps.Map(document.getElementById('map'), mapOptions);
      var marker = new google.maps.Marker({position: cntr,map: map,title:"xxxxxxxxx"});

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

      }
    else{
      echo "<p id=\"addr\">$formatted_address <form action=\"addressCheck.php\"  method=\"post\" ><button id=\"sub\" value=\" Edit and Re-Submit \"> Edit and Re-Submit </button><input class=\"txt\" type=\"text\" name=\"addr\" value=\"$address\" /></form>";  
     }

Answer 3

您希望在用户输入其位置后获取位置信息？试试这个代码片段，可能对你有点帮助

$(document).ready(function () {
    var map_options = {
        center: new google.maps.LatLng(-2.548926, 118.0148634),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), map_options);

    var input = document.getElementById("keyword");
    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo("bounds", map);

    var marker = new google.maps.Marker({
        map: map,
        zoom:14,
        animation: google.maps.Animation.BOUNCE
    });

    google.maps.event.addListener(autocomplete, "place_changed", function () {
        var place = autocomplete.getPlace();

        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(15);
        }

        marker.setPosition(place.geometry.location);
    });

    google.maps.event.addListener(map, "click", function (event) {
        marker.setPosition(event.latLng);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<div id="map_canvas" style="width:530px; height:250px"></div>
<label for="keyword">Location :</label>
<input type="text" class="span6" name="keyword" id="keyword">

如何动态地将地址与Google Map集成？

我尝试过什么？

问题

3 个答案: