關于谷歌Google Maps JavaScript API 的學習與分享

silenceboy 發布于2019-08-23 18:09 / 2972人閱讀

摘要：最近參與頁面插入谷歌地圖的項目，因此在此分享下我的學習經驗，第一次寫，請多擔待首先，講下項目的需求，在網頁進行點擊產品列表，渲染對應的地圖信息以及對應的詳情信息，并且修改谷歌固有標簽以及點擊標簽出現，展示詳細信息以及對應的產品。

最近參與頁面插入谷歌地圖API的項目，因此在此分享下我的學習經驗，第一次寫，請多擔待！

首先，講下項目的需求，在網頁進行點擊產品列表，渲染對應的地圖信息以及對應的詳情信息，并且修改谷歌固有標簽以及點擊標簽出現model，展示詳細信息以及對應的產品。

加載谷歌API并插入頁面



  
    
  
  
    My Google Maps Demo

并且公司需要我們在地圖高度變高時，需要對標簽進行統計，正好Google maps api中正好有對這一方面進行設計，就是‘Marker Clustering’ 【標記聚類】

如果需要對聚類標簽進行樣式修改，可以使用：

map.data.Setstyle(function(){
          var magitude = featrue.getProperty("map");
          return {
             icon:getCircle(magitude);
            
          }
});
function gitCircle(magitude){
         var circle = {
               path:google.maps.Symbolpath.CIRCLE,
               scale:magnitude,
         };
         return circle;
  }

gitCircle() 繪制了一個自定義的圓形，并且回調會maps作為自定義標簽。

初始化渲染完地圖后，需要對地圖的交互動作進行監聽

自我認為經常用到的動作事件：

bounds-changed：界面發生變化

center-changed：中心點發生變化

click：單擊

dbclick:雙擊

drag:拖動

heading-changed:標題改變

maptypeid：地圖樣式改變

mousemove：在地圖中移動

rightclick:高度點擊

zoom-changed:地圖高度發生改變

添加事件：

map.addListener("dbclick",function(){})

標記點添加事件：

markers.map(function(v){
    v.addListener("click",function(){})
})

刪除事件：[removeListener]

并且項目中有一需求，需要對詳細地址進行轉換為經緯度，因此需要采用Google Maps Geocoding API請求接口

將地址信息轉換為經緯度：

$.get("https://maps.googleapis.com/maps/api/geocode/json?address="地址信息"&key=YOUR_API_KEY"，(data)=>{
        latLng = data.results[0].geomety.location
})

將經緯度轉換為地址信息

$.get("https://maps.googleapis.com/maps/api/geocode/json?latlng=經度,緯度&key=YOUR_API_KEY",=>(data){
     inWhere = data.plus_code.compound_code 
})

以上是我在一個小項目中主要參考的google maps API 以及 Google Maps Geocoding API 的地方

具體文檔：
google maps API

Google Maps Geocoding API

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104742.html

關于谷歌Google Maps JavaScript API 的學習與分享

摘要：最近參與頁面插入谷歌地圖的項目，因此在此分享下我的學習經驗，第一次寫，請多擔待首先，講下項目的需求，在網頁進行點擊產品列表，渲染對應的地圖信息以及對應的詳情信息，并且修改谷歌固有標簽以及點擊標簽出現，展示詳細信息以及對應的產品。最近參與頁面插入谷歌地圖API的項目，因此在此分享下我的學習經驗，第一次寫，請多擔待！首先，講下項目的需求，在網頁進行點擊產品列表，渲染對應的地圖信息以及對...

HackerShell 2019-08-02 15:20 評論0 收藏0
谷歌服務：Google Maps JavaScript API

摘要：使用前準備能訪問外網，有賬戶。進入開發者控制臺谷歌開發者控制臺創建項目初次需要創建一個項目，作為使用的依托。我們創建名為的項目，進入后再選擇和服務模塊。密鑰是使用的必須的標識符，可以多地多方使用。的很多服務不是靜態的可以與對比。使用前準備能訪問外網，有Google賬戶。進入開發者控制臺谷歌開發者控制臺 showImg(https://segmentfault.com/img/b...

since1986 2019-08-22 17:01 評論0 收藏0
谷歌地圖 API 開發之新建地圖

摘要：最近項目用到谷歌地圖，但是看谷歌文檔，對于國人來說，還是比較吃力的，網上找資料也并沒有太多的資料，所以就想分享給大家。顯示了整個地球地圖的完全縮放。最近項目用到谷歌地圖，但是看谷歌api文檔，對于國人來說，還是比較吃力的，網上找資料也并沒有太多的資料，所以就想分享給大家。但是因為本人太懶了，每次研究技術完事時間一久就忘了，更別提分享了，在朋友的鼓勵支持之下，重新開始寫博客，共享給大家...

Winer 2019-08-22 10:34 評論0 收藏0
谷歌地圖 API 添加形狀

摘要：谷歌地圖形狀官網簡介您可以向地圖添加各種形狀。移除園如需移除地圖中的圓，請調用方法，并傳遞作為其自變量。將形狀設置為可拖動默認情況下，在地圖上繪制的形狀位置固定。最近加班真是累成狗啊，天天10點以后下班。還有其他的事情，總之都是要死要死的感覺，苦逼的程序員。谷歌地圖形狀官網：https://developers.google.com... 簡介您可以向地圖添加各種形狀。形狀是地圖上...

xiaoxiaozi 2019-08-21 14:21 評論0 收藏0