google map v3 实现拖动得到坐标和坐标详细地址

最近的项目有要用google map v3 所以，看来多次文档和demo 实现了一些东西，话不多说，上代码，后面附文件

 

 

 

 

<script type="text/javascript">
var geocoder = new google.maps.Geocoder();

function geocodePosition(pos) {
  geocoder.geocode({
    latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {
      updateMarkerAddress(responses[0].formatted_address);
    } else {
      updateMarkerAddress('无法确定地址在这个位置。');
    }
  });
}

function updateMarkerStatus(str) {
  document.getElementById('markerStatus').innerHTML = str;
}

function updateMarkerPosition(latLng) {
  document.getElementById('info').innerHTML = [
    latLng.lat(),
    latLng.lng()
  ].join(', ');
}

function updateMarkerAddress(str) {
  document.getElementById('address').innerHTML = str;
}

function initialize() {
  var latLng = new google.maps.LatLng(31.1933370274183, 121.43890661621094);
  var map = new google.maps.Map(document.getElementById('mapCanvas'), {
    zoom: 11,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var marker = new google.maps.Marker({
    position: latLng,
    title: 'Point A',
	icon:"pred.gif",
    map: map,
    draggable: true
  });
  google.maps.event.addListener(marker, "mouseover", function() {

				marker.setImage('pred.gif');

				}); 
  google.maps.event.addListener(marker, "mouseout", function() {

				marker.setImage('pgreen.gif');
				
				}); 
  // 更新当前的位置信息
  updateMarkerPosition(latLng);
  geocodePosition(latLng);
  
  // 添加拖动事件监听器
  google.maps.event.addListener(marker, 'dragstart', function() {
    updateMarkerAddress('正在搜索...');
  });
  
  google.maps.event.addListener(marker, 'drag', function() {
    updateMarkerStatus('正在搜索...');
    updateMarkerPosition(marker.getPosition());
  });
  
  google.maps.event.addListener(marker, 'dragend', function() {
    updateMarkerStatus('搜索结束');
    geocodePosition(marker.getPosition());
  });
}

// 加载载应用程序。
google.maps.event.addDomListener(window, 'load', initialize);
</script>

 

评论

2 楼 jiabin_007 2015-06-12  

写的非常好，但是。。文件呢？

1 楼 hzfeibao 2012-05-11  

关注一下，我最近也要用到谷歌地图