簡體   English   中英

Google Maps API v3-多個標記,多個信息窗口,3個圖標

[英]Google maps api v3 - multiple markers, multiple infowindows, 3 icons

我想制作“ WiFi地圖”,但這樣做有問題,我想要3個OPEN / WEP / WPA圖標,以及很多標記,每個標記都有自己的信息窗口,頂部只有1個信息窗口,所以當我將單擊#1,然后單擊#2,然后#1將隱藏。 如果我將使用XXXX標記,則在縮小地圖時它們會出現問題,有可能使某處的許多標記都不會在縮小中顯示,而在放大時顯示嗎?

我在MySQL數據庫中擁有有關網絡的所有信息,因此在PHP中將像在官方google maps document / v3 / overlays.html#ComplexIcons <-上的教程中一樣輕松地顯示它,因此,例如

  var nodes = [
['WKKOZ',50.192843,18.967801,nodewep,1],
['airlive',50.193056,18.967974,nodeopen,2],
['Zurawia-3',50.198398,18.974723,nodeopen,3],
['siec dol',50.19303,18.96796,nodewep,4],
['KP_8_1',50.193092,18.96801,nodewep,5],
['Natalia',50.19286,18.967812,nodewpa,6],
['Z104',50.192591,18.967588,nodewep,7],
['D2',50.192499,18.96876,nodewep,8],
['Niesia',50.192474,18.968239,nodewpa,9],
['boolean',50.192539,18.967545,nodewpa,10],
['neostrada_0d65',50.192179,18.96758,nodewep,11],
['neostrada_2d38',50.192216,18.96761,nodewep,12],
['Belkin_G_Wireless_9B7BF7',50.192191,18.969261,nodeopen,13],
['Trans_FijPn',50.1939,18.979565,nodeopen,14],
['dlinklis',50.193113,18.968024,nodewpa,15]

請幫我!:)

順便說一句:我的MySQL數據庫的格式為http://wklej.to/7Puw/html

我想您是在問如何在地圖上放置大量標記,這些標記在較高的縮放級別下會被隱藏。 這稱為標記聚類。

有一些Javascript庫在客戶端實現集群化,並且很容易集成到現有的mashup中:

  • MarkerClusterer-其用於混搭,發現它易於集成,並帶有一組不錯的默認圖標。
  • ClusterMarker-我還沒有使用過,但似乎功能不錯。

您還可以閱讀這篇博客文章 ,它討論了各種替代方法,或者這篇博客文章討論了有關服務器端集群的細節。

我最近經歷了完全相同的問題,並在Sean Vieira的幫助下設法解決了大部分問題。

這個問題的答案在這里: 在帶有自己的信息窗口的地圖上顯示多個標記

您的方案的不同之處在於,您只需在數組中添加一個附加字段,即可在其中指定要使用的標記的URL路徑。

然后,在循環創建標記時(從var marker = new google.maps.Marker開始),可以從數組中為icon變量調用值。

由於您只有三種圖標類型,並且我假設您將從數據庫中填充記錄,因此您需要測試訪問點的類型,然后在該位置寫入標記類型的相關URL路徑( ASP而不是PHP專家,因此請原諒使用術語write是不正確的)。

我的解決方案無法完全處理信息窗口。 一旦打開它們,它們將保持打開狀態,除非用戶手動關閉。 我已經看到解決方案可以在新的解決方案關閉時關閉其他解決方案,但是還沒有實現它們。

我知道這是一個老問題,但是當我有一個答案的時候,我會寫給后代看看:)

信息窗口問題的解決方案可以很容易地解決。 創建一個名為currentWindow的全局變量。 每當用戶按下標記時,事件監聽器都會檢查currentWindow = infoWindow。 如果不是,則關閉currentWindow並將其設置為新的信息窗口。 純凈而簡單,只需記住還要打開新的信息窗口。

暫無
暫無

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

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