欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

在google地图上拖拽Marker事件

程序员文章站 2022-03-17 16:14:15
...
<!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>