2017-12-19 8 views
1

私はGoogleマップを表示するWebページを開発しています。マーカーを持つマップ内。それはドラッグ可能ではありません。マップの中央に固定されています。今私はマーカーの経度と緯度を置いて欲しい。マップはドラッグ可能です。マーカー位置の場所を変更するとき、私は正確な経度と緯度を取得したい。私は以下のコードを使用していますが、動作しておらず、エラーを表示していません。Googleマップ内のマーカーの位置を取得するためのjsコード

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> 

です。私を助けてください。

答えて

3

あなたがマップオブジェクトに直接'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は緯度経度されたオブジェクトを、その結果を得ていないhttps://developers.google.com/maps/documentation/javascript/3.exp/reference#LatLng

+0

参照してください。緯度はf()を示しています。 – Joe

+0

'getCenter()'はLatLngオブジェクトを返しますので、lat/lngを簡単に取得できます。私の答えが – beaver

+0

に更新されていることを確認してください。 – Joe

関連する問題