在google地图上拖拽Marker事件

来源：互联网发布：2017年美工新手编辑：程序博客网时间：2024/05/01 10:01
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>    <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:"logo.png",          map: map,          draggable: true        });        google.maps.event.addListener(marker, "mouseover", function() {                            marker.setImage('logo.png');                            });         google.maps.event.addListener(marker, "mouseout", function() {                            marker.setImage('logo.png');                                            });         // 更新当前的位置信息        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>  </head><body><div id="mapCanvas" style="height: 600px"></div><div id="markerStatus">1</div><div id="info">2</div><div id="address">3</div></body></html>