Question

我正在开发一个显示谷歌地图的网页。在具有标记的地图中。它不能拖动。它固定在地图的中心。现在我想要放置标记的经度和纬度。可拖动的地图。当改变标记位置的位置时，我想获得精确的经度和纬度。我使用了以下代码，但没有工作，也没有显示错误。

google.maps.event.addListener(marker, 'dragend', function(a) { 
    console.log(a);
});

完整的代码是

map.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src * gap: ws: https://ssl.gstatic.com;style-src * 'unsafe-inline' 'self' data: blob:;script-src * 'unsafe-inline' 'unsafe-eval' data: blob:;img-src * data: 'unsafe-inline' 'self' content:;">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>Hello World</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script>

    </head>

    <script type="text/javascript">     
    function initialize() {
    var mapOptions = {
      zoom: 14,
      center: new google.maps.LatLng(52.5498783, 13.425209099999961),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      disableDefaultUI: true
    };
    map = new google.maps.Map(document.getElementById('map_canvas'),
        mapOptions);
    $('<div/>').addClass('centerMarker').appendTo(map.getDiv())
         //do something onclick
        .click(function(){
           var that=$(this);
           if(!that.data('win')){
            that.data('win',new google.maps.InfoWindow({content:'this is the center'}));
            that.data('win').bindTo('position',map,'center');
           }
           that.data('win').open(map);
        });
    }

    var marker = new google.maps.Marker({

    });

    google.maps.event.addDomListener(window, 'load', initialize);

      google.maps.event.addListener(marker, 'dragend', function(a) {
    console.log(a);
    });

    </script>

    <body>
    <div id="map_canvas"></div>

    <style>
    body,html,#map_canvas{height:100%;margin:0;}
    #map_canvas .centerMarker{
    position:absolute;
    /*url of the marker*/
    background:url(http://maps.gstatic.com/mapfiles/markers2/marker.png) no-repeat;
    /*center the marker*/
    top:50%;left:50%;
    z-index:1;
    /*fix offset when needed*/
    margin-left:-10px;
    margin-top:-34px;
    /*size of the image*/
    height:34px;
    width:20px;
    cursor:pointer;
}
    </style>

    </body>

    </html>

如何解决问题。请帮帮我。

Answer 1

您可以直接在地图对象上收听'center_changed'事件，然后使用getCenter()方法读取中心坐标：

google.maps.event.addListener(map, 'center_changed', function(a) {
    var cx = map.getCenter();
    console.log('center_changed', cx.lat(),cx.lng());
});

更新：cx是LatLng对象，请参阅https://developers.google.com/maps/documentation/javascript/3.exp/reference#LatLng

用于获取谷歌地图中标记位置的js代码无法正常工作

1 个答案: