`
osacar
  • 浏览: 209663 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

在google地图上拖拽Marker事件

    博客分类：
  • WEB
阅读更多 
<!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>
分享到：
| Google Map标注多个地点，并且设置在最佳视 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics