將鼠標懸停在多邊形上（顯示文本）

我在Google地圖上製作了幾個多邊形。現在，我想爲多邊形添加一個鼠標懸停（和鼠標懸停），以便當您將鼠標懸停在多邊形上時，您可以看到該區域的名稱。當你鼠標移出的名字消失（比如當你將鼠標懸停在按鈕在瀏覽器中）將鼠標懸停在多邊形上（顯示文本）

var map; 
var infoWindow; 

function initialize() { 
    var myLatLng = new google.maps.LatLng(50.88111111111, 3.889444444444); 
    var myOptions = { 
     zoom: 12, 
     center: myLatLng, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 

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

    var polyCoords = [ 
     verwissel(3.869506,50.906449), 
     verwissel(3.869654,50.905664), 
     verwissel(3.869934,50.904131), 
     verwissel(3.870310,50.902717), 
     verwissel(3.870471,50.901559), 
    ]; 

    poly = new google.maps.Polygon({ 
     paths: HerzeleCoords, 
     strokeColor: "#FF0000", 
     strokeOpacity: 0.8, 
     strokeWeight: 3, 
     fillColor: "#FF0000", 
     fillOpacity: 0.35 
    }); 

    google.maps.event.addListener(Poly, "mouseover", function(showtext("polyname")); 
google.maps.event.addListener(Poly, "mouseover", function(do not show text anymore);

這是我認爲它會是什麼樣子，但我不知道它是如何工作的。

來源

2012-05-23 Lode Vlaeminck

下面是一個例子：http://jsfiddle.net/tcfwH/304/

不完全一樣，瀏覽器工具提示，但文本可樣式。我正在使用MarkerWithLabel。每個標記用於其多邊形的名稱。切換多行框在CSS中更改white-space: nowrap。還有InfoBox作爲工作選項，但我發現使用比MarkerWithLabel複雜得多。

的事件偵聽器根據鼠標位置移動MarkerWithLabel各地：

google.maps.event.addListener(poly, "mousemove", function(event) { 
    marker.setPosition(event.latLng); 
    marker.setVisible(true); 
    }); 
    google.maps.event.addListener(poly, "mouseout", function(event) { 
    marker.setVisible(false); 
    });

來源

2012-05-23 15:49:31

嘿Heitor！我如何能夠使這些多邊形的點擊監聽器工作？試圖像： google.maps.event.addListener（聚4-，「點擊」，函數（）{ location.href = 「/ some_url.htm」; }）; 但被點擊的聚不拾起... 謝謝，如果你可以幫助！ – user1051849

我創建了一個沒有MooTools的更新小提琴，因爲它沒有必要做這個工作。 – Mike

我沒有在各種瀏覽器中測試這一點，但在Chrome它的伎倆對我來說：調用包含股利地圖「map_canvas」。另外，爲了讓每個多邊形都有自己的標題，請將屬性'sourceName'設置爲多邊形的標題。

 \t perimeter.addListener('mouseover',function(){ 
 
      var map_canvas = document.getElementById("map_canvas"); 
 
      map_canvas.title = this.sourceName; 
 
     }); 
 
    \t perimeter.addListener('mouseout',function(){ 
 
      var map_canvas = document.getElementById("map_canvas"); 
 
      map_canvas.removeAttribute('title'); 
 
     });

來源

2017-05-21 13:38:26

將鼠標懸停在多邊形上（顯示文本）

回答

相關問題