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

Map 每次点击不同的地址后加载不同的谷歌地图,map,Map,在我的网站上,我有两个面板,左边是Adress,右边是GoogleMap。 我想加载一个谷歌地图,一旦我点击了一个特定的地址没有页面刷新。 请帮助我。您应该通过Javascript实现这一点,算法如下: 根据默认位置(例如您所在的城市)显示地图,并将其放大到适当的水平 带有用于搜索和地址的文本框的表单 点击搜索按钮进行地理编码并获取该地址的lat、lon的事件 根据地理代码服务响应,通过Javascript重新设置地图中心 在从地理编码服务返回的位置上添加标记。 希望这有帮助 PD您现在如何使用

在我的网站上,我有两个面板,左边是Adress,右边是GoogleMap。 我想加载一个谷歌地图,一旦我点击了一个特定的地址没有页面刷新。
请帮助我。

您应该通过Javascript实现这一点,算法如下:

根据默认位置(例如您所在的城市)显示地图,并将其放大到适当的水平 带有用于搜索和地址的文本框的表单 点击搜索按钮进行地理编码并获取该地址的lat、lon的事件 根据地理代码服务响应,通过Javascript重新设置地图中心 在从地理编码服务返回的位置上添加标记。 希望这有帮助


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

地理编码此处的地址是有关如何进行的链接

那就这样做吧 map.setMaplatLng 其中map是全局映射对象 latLng是从地理代码库获得的坐标

<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()">