在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>
上一篇： 3.9折！腾讯视频VIP会员年卡大促：98元手慢无
下一篇： Win10专业版如何删除输入法记忆