簡體   English   中英

在標記點擊事件上顯示緯度和經度

[英]Displaying Latitude and Longitude on Marker click event

我想根據標記位置提醒緯度和經度值。 我無法做到。

我最近開始學習谷歌地圖api。 請幫幫我。

在下面的代碼中,我的標記正在不同位置之間正確移動,但沒有顯示其緯度和經度值。

<html>
 <head>
<base href="<%=basePath%>">
   <style type="text/css">
      #map_canvas {
      height: 430px;
      width: 980px;
      position: static;
      top: 100px;
      left: 200px;
   }
 </style>

 <script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
 </script>

<script type="text/javascript">
var marker;

function initialize() {
    var latlng = new google.maps.LatLng(18.9647, 72.8258);

    var myOptions = {
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: false,
        mapTypeControl: false
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);


      google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(event.latLng);
    });

    function placeMarker(location) {
        if (marker == undefined){
            marker = new google.maps.Marker({
                position: location,
                map: map,
                animation: google.maps.Animation.DROP
            });
        }
        else{
            marker.setPosition(location);
        }
        map.setCenter(location);

        google.maps.event.addListener(marker, "click", function (event) {
                alert(this.position);
        });
       }

       }             

     </script>
      </head>


    <body onload="initialize()">
       <div id="map_canvas" style="1500px; 1000px"></div>
         </body>
        </html>

您不希望為顯示事件創建單獨的事件 - 使其成為創建(或移動)標記的代碼的一部分,如下所示:

function placeMarker(location) {
    if (marker == undefined){
        marker = new google.maps.Marker({
            position: location,
            map: map,
            animation: google.maps.Animation.DROP
        });
    }
    else{
        marker.setPosition(location);
    }
    map.setCenter(location);
    alert(marker.position);
}

不是使用alert ,而是通過遵循此答案中給出的鏈接獲得更加美麗的效果,以獲得非常酷的工具提示效果。 絕對值得一看 - 答案鏈接教程和演示。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM