在google地图上拖拽Marker事件

最新推荐文章于 2023-12-06 15:16:32 发布

KingBoxing

最新推荐文章于 2023-12-06 15:16:32 发布

阅读量5.4k

点赞数

文章标签： google function xhtml html

本文链接：https://blog.csdn.net/aaa1117a8w5s6d/article/details/7881368

版权

<!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>

KingBoxing

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
在google地图上拖拽Marker事件

var geocoder = new google.maps.Geocoder(); function geocodePosition(pos) { geocoder.geocode({ latLng: pos }, function(responses) { if (responses && res
复制链接

扫一扫