Question

我使用下面的代码在google地图中显示多个标记，效果很好。

var locations = [
        [51.481383, -3.114967, 'UK', 'Cardiff'],
        [52.362393, 4.893379, 'NL', 'Amsterdam'],
        [48.852314, 2.350089, 'FR', 'Paris'],
        [40.18884, -3.716812, 'SP', 'Madrid'],
        [53.800651, -4.064941, 'IT', 'Rome'],
        [42.041134, 1.889648, 'SP', 'Costa Brava'],
        [37.014581, -7.933888, 'PT', 'Algarve'],
        [28.358776, -14.05426, 'PT', 'Fuerteventura'],
        [29.046854, -13.589973, 'SP', 'Lanzarote']
    ];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 3,
  center: new google.maps.LatLng(40.92, 1.25),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

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

var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][0], locations[i][1]),
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][3]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

现在我的问题是，

在此代码中，手动添加位置。但我有添加搜索框的功能，并按位置搜索（地址）这意味着我必须将地址位置转换为lat-long值。

那么任何人都可以扩展这段代码吗？

Answer 1

使用Google Geocoding API

请参阅此exmaple

码

 var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }

<body onload="initialize()">
 <div id="map_canvas" style="width: 320px; height: 480px;"></div>
  <div>
    <input id="address" type="textbox" value="Sydney, NSW">
    <input type="button" value="Encode" onclick="codeAddress()">
  </div>
</body>

如何在php中谷歌地图转换纬度和经度的任何地址？

1 个答案:

码