在google地图上拖拽Marker事件

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

nowdown

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

阅读量1k

点赞数

分类专栏： WEB 文章标签：移动开发 xhtml javascript ViewUI

本文链接：https://blog.csdn.net/nowdown/article/details/84724820

版权

WEB 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript与Google Maps API结合，实现地图上的Marker点拖拽交互功能，详细讲解了相关代码实现和事件处理过程。

摘要由CSDN通过智能技术生成


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