当前位置: 代码迷 >> Web前端 >> google 地图 v3 实现拖动得到坐标和坐标详细地址
  详细解决方案

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

热度:43   发布时间:2012-09-05 15:19:34.0
google map v3 实现拖动得到坐标和坐标详细地址

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


如果你有什么不懂得或者讨论的请加群:150508281

?

?

?

<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>
?
1 楼 hzfeibao 2012-05-11  
关注一下,我最近也要用到谷歌地图
  相关解决方案