Question

在我的网站上我有两个面板，左侧是地址，右侧是谷歌地图。我想在没有页面刷新的情况下点击特定地址后加载谷歌地图。请帮帮我。

Answer 1

你应该通过Javascript实现这个，算法将是这样的：

根据默认位置显示地图（例如您的城市和足够的缩放级别）
带有要搜索和地址的文本框的表单
点击“搜索按钮”进行地理编码并获取该地址的lat，lon的事件
根据地理编码服务响应通过Javascript重新设置地图的中心
在地理编码服务返回的位置添加标记。

希望这会有所帮助

PD您现在如何使用面板查询地图？

Answer 2

地理编码这里的地址是关于如何去做的链接 https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingRequests

然后这样做 map.setMap（的latLng）其中map是您的全局地图对象和latLng是从地理编码库

获得的坐标

Answer 3

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>

var geocoder;

var map;

function initialize() {

  geocoder = new google.maps.Geocoder();

  var latlng = new google.maps.LatLng(-34.397, 150.644);

  var mapOptions = {zoom: 8,center: latlng

  }

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

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);

   }

  });

}


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



    </script>

 <input id="address" type="textbox" value="New Delhi, India">

      <input type="button" value="Geocode" onclick="codeAddress()">

点击不同的地址后，每次加载不同的谷歌地图

3 个答案: