獲取鼠標與鼠標移動的座標上的路線

在一個普通的谷歌地圖，我可以獲取和使用下面的代碼顯示我的mousepoint的地理座標：獲取鼠標與鼠標移動的座標上的路線

google.maps.event.addListener(map, "mousemove", function(event) { 
    document.getElementById('message').innerHTML = 
    'Geographical Coordinates: ' + event.latLng.lat() + ', ' + event.latLng.lng(); 
});

如果我計算使用谷歌的方向API的路線和將鼠標移動到顯示的路線上，「mousemove」事件不會被觸發。當鼠標指針位於路徑上時，如何獲得座標？

我有一個運行示例3210。當你用鼠標跟隨路線時，座標不會更新。

來源

2012-09-03 gianclaudio

可以張貼一些代碼，嘗試jsfiddle.net – kzhen

我在由一個小例子[jsfiddle.net] （http://jsfiddle.net/BYBK8/1/） – gianclaudio

我知道將一個mouseover事件添加到路由本身的唯一方法是繪製多段線（以便您可以訪問它），然後向它添加一個mouseover事件。

Example

來源

2012-09-03 17:10:42 geocodezip

對不起，我沒有在我的例子中包含渲染選項'draggable：true'。使用'suppressPolylines：true'選項，路線不會被拖動。 – gianclaudio

我不認爲你將能夠獲得鼠標懸停和可拖動方向上的鼠標座標。 – geocodezip

這是一個例子，在光標位置移動引導的工具提示：

google.maps.event.addListener(poly,"mousemove",function(e){ 

     var _tooltipPolys = $("#tooltipPolys"); 
     if(_tooltipPolys.length == 0) { 
      _tooltipPolys = $(' \ 
       <div id="tooltipPolys" class="tooltip top" role="tooltip"> \ 
        <div class="tooltip-arrow"></div> \ 
        <div class="tooltip-inner"></div> \ 
       </div> \ 
      '); 
      $("body").append(_tooltipPolys); 
      $("div.tooltip-inner", _tooltipPolys).text(this.title); 
      _tooltipPolys.css({ 
       "opacity": ".9", 
       "position":"absolute" 
      }); 
     } 

     var pageX = event.pageX; 
     var pageY = event.pageY; 
     if (pageX === undefined) { 
      pageX = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
      pageY = event.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
     } 

     // Update the current tooltip position each time the cursor moves 
     _tooltipPolys.css({ 
      "top":(pageY - _tooltipPolys.height() - 10)+"px", 
      "left":(pageX - (_tooltipPolys.width()/2))+"px" 
     }); 
    });

來源

2015-07-05 11:28:04 rapomon

獲取鼠標與鼠標移動的座標上的路線

回答

相關問題