第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

Google Maps JS API v3 - 簡單的多標(biāo)記示例

Google Maps JS API v3 - 簡單的多標(biāo)記示例

尚方寶劍之說 2019-05-22 15:14:22
Google Maps JS API v3 - 簡單的多標(biāo)記示例谷歌地圖Api相當(dāng)新的。我有一系列數(shù)據(jù)，我想循環(huán)并繪制在地圖上?？雌饋硐喈?dāng)簡單，但我發(fā)現(xiàn)的所有多標(biāo)記教程都非常復(fù)雜。讓我們使用谷歌網(wǎng)站上的數(shù)據(jù)數(shù)據(jù)作為例子：var locations = [  ['Bondi Beach', -33.890542, 151.274856, 4],  ['Coogee Beach', -33.923036, 151.259052, 5],  ['Cronulla Beach', -34.028249, 151.157507, 3],  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],  ['Maroubra Beach', -33.950198, 151.259302, 1]];我只是想繪制所有這些點(diǎn)，并在單擊時彈出一個infoWindow以顯示名稱。
查看完整描述

4 回答

?
GCT1015

TA貢獻(xiàn)1827條經(jīng)驗 獲得超4個贊

我想我會把它放在這里，因為對于那些開始使用谷歌地圖API的人來說它似乎是一個受歡迎的著陸點(diǎn)。在客戶端呈現(xiàn)的多個標(biāo)記可能是許多地圖應(yīng)用程序性能下降的結(jié)果。很難進(jìn)行基準(zhǔn)測試，修復(fù)并且在某些情況下甚至確定存在問題（由于瀏覽器實現(xiàn)差異，客戶端可用的硬件，移動設(shè)備，列表繼續(xù)）。

開始解決此問題的最簡單方法是使用標(biāo)記群集解決方案?；舅枷胧菍⒌乩砩舷嗨频奈恢梅纸M到顯示點(diǎn)數(shù)的組中。當(dāng)用戶放大地圖時，這些組會展開以顯示下方的各個標(biāo)記。

也許最簡單的實現(xiàn)是markerclusterer庫?；緦崿F(xiàn)如下（在庫導(dǎo)入之后）：

<script type="text/javascript">
  function initialize() {
    var center = new google.maps.LatLng(37.4419, -122.1419);

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: center,
      mapTypeId: google.maps.MapTypeId.ROADMAP    });

    var markers = [];
    for (var i = 0; i < 100; i++) {
      var location = yourData.location[i];
      var latLng = new google.maps.LatLng(location.latitude,
          location.longitude);
      var marker = new google.maps.Marker({
        position: latLng      });
      markers.push(marker);
    }
    var markerCluster = new MarkerClusterer(map, markers);
  }
  google.maps.event.addDomListener(window, 'load', initialize);</script>

標(biāo)記而不是直接添加到地圖中的標(biāo)記將添加到數(shù)組中。然后將此數(shù)組傳遞給庫，該庫為您處理復(fù)雜計算并附加到地圖。

這些實現(xiàn)不僅大大提高了客戶端的性能，而且在許多情況下，它們還可以實現(xiàn)更簡單，更簡潔的UI，并且更容易在更大規(guī)模上消化數(shù)據(jù)。

其他實施可從Google獲得。

希望這有助于一些更新的映射細(xì)微差別。


查看完整回答
反對 回復(fù) 2019-05-22
  • 4 回答
  • 0 關(guān)注
  • 778 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號