谷歌地圖多邊形懸停點擊

我不是很編碼（除HTML和CSS）經驗豐富，我試圖創建一個街區地圖領域的定製多邊形，其亮點上空盤旋，並點擊，造就了當一個小圖像和其他信息。基本上我試圖重新創建你在http://www.redoakrealty.com/east-bay-ca-neighborhoods/看到的結果......我想知道他們是如何創建它的，我假設他們使用谷歌地圖API來創建這個，但我不知道如何去做。我會很感激你對他們如何創建它的想法，以及如何創建相同的東西。謝謝......這似乎也是很多其他人嘗試創建或想出如何創建的東西。谷歌地圖多邊形懸停點擊

來源

2013-11-15 alvarezcyberx

的地圖API是在這裏：https://developers.google.com/maps/documentation/javascript/examples/polygon-arrays

似乎在紙面上相當簡單，但可能在實踐中更復雜。

在API中，你可以看到幾件事，第一：

// Define the LatLng coordinates for the polygon. 
    var triangleCoords = [ 
    new google.maps.LatLng(25.774252, -80.190262), 
    new google.maps.LatLng(18.466465, -66.118292), 
    new google.maps.LatLng(32.321384, -64.75737) 
];

這些都是coordinatess，有隻有三個總所以它形成了一個三角形。形狀自動完成，你只需要找到/輸入座標。 triangleCoords在這種情況下是分配給該組值的名字，你會在下一行再次使用這個名稱這裏

// Construct the polygon. 
bermudaTriangle = new google.maps.Polygon({ 
paths: triangleCoords, 
strokeColor: '#FF0000', 
strokeOpacity: 0.8, 
strokeWeight: 3, 
fillColor: '#FF0000', 
fillOpacity: 0.35 
});

在那裏你看到路徑：trianglecoords，使用可以在這裏定製覆蓋。最後

// Add a listener for the click event. 
google.maps.event.addListener(bermudaTriangle, 'click', showArrays);

更改單擊事件的懸停/鼠標懸停事件（不知道哪個，我沒有這樣做我自己，但現在看來似乎是兩個中的一個）。你可以讓它在懸停和單擊事件中工作，再次，不太確定它是如何完成的，但肯定是可能的。

function showArrays(event) { 

//Javascript & Jquery goes here, probably the more challenging part to implement. 

}

來源

2013-11-15 01:27:34 GSimon

以下是如何實現此目的的完整簡單示例。爲了簡單起見，它僅顯示以經度/緯度（0,0）爲中心的平方作爲演示。

<html> 
    <head> 
     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&amp;sensor=false"></script> 
     <script type="text/javascript"> 
      function init() { 
       // STEP 1: Create a map in the map div. 
       var mapDiv = document.getElementById('map'); 
       var map = new google.maps.Map(mapDiv, { 
        center: new google.maps.LatLng(0.0, 0.0), 
        zoom: 5 
       }); 

       // STEP 2: Create a polygon - in this case a red square centred at (0, 0). You'd want to create a polygon per neighbourhood. 
       var polygon = new google.maps.Polygon({ 
        map: map, 
        paths: [ 
         new google.maps.LatLng(-1.0, -1.0), 
         new google.maps.LatLng(-1.0, +1.0), 
         new google.maps.LatLng(+1.0, +1.0), 
         new google.maps.LatLng(+1.0, -1.0) 
        ], 
        strokeColor: '#ff0000', 
        strokeOpacity: 0.8, 
        strokeWeight: 2, 
        fillColor: '#ff0000', 
        fillOpacity: 0.5 
       }); 

       // STEP 3: Listen for clicks on the polygon. 
       google.maps.event.addListener(polygon, 'click', function (event) { 
        alert('clicked polygon!'); 
       }); 
       // STEP 4: Listen for when the mouse hovers over the polygon. 
       google.maps.event.addListener(polygon, 'mouseover', function (event) { 
        // Within the event listener, "this" refers to the polygon which 
        // received the event. 
        this.setOptions({ 
         strokeColor: '#00ff00', 
         fillColor: '#00ff00' 
        }); 
       }); 
       // STEP 5: Listen for when the mouse stops hovering over the polygon. 
       google.maps.event.addListener(polygon, 'mouseout', function (event) { 
        this.setOptions({ 
         strokeColor: '#ff0000', 
         fillColor: '#ff0000' 
        }); 
       }); 
      }; 
     </script> 
     <style> 
      #map { 
       width: 300px; 
       height: 200px; 
      } 
     </style> 
    </head> 
    <body onload="init();"> 
     <div id="map"></div> 
    </body> 
</html>

基本上，你做以下（每個點點對應於JavaScript代碼編號評論）：

創建地圖。
在地圖上爲您的每個社區繪製多邊形。
對於每個多邊形，添加一個「click」事件的偵聽器。只要您點擊多邊形，就會調用偵聽器函數。在這裏，我只是顯示一個警報 - 你可以做任何你喜歡的事情。
對於每個多邊形，請爲「鼠標懸停」事件添加偵聽器。只要鼠標懸停在多邊形上，就會調用偵聽器函數。在處理程序中，更改多邊形的筆觸並將顏色填充爲不同的顏色。
對於每個多邊形，爲「mouseout」事件添加一個偵聽器。只要鼠標停在多邊形上方，就會調用偵聽器函數。在處理程序中，更改多邊形的筆觸並將顏色填充回其原始值。

希望這一切纔有意義。如果您想了解更多信息，Google Maps JavaScript API reference是查找所有相關詳細信息的地方。您可能還需要花些時間看一些examples，特別是simple-polygon和simple-event的例子。

來源

2013-11-15 01:46:41 Mac

谷歌地圖多邊形懸停點擊

回答

相關問題