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

時間 2019-12-12

標籤關於谷歌 google maps javascript api 學習分享欄目 Chrome 简体版

原文原文鏈接

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

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

加載谷歌API並插入頁面java

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, centered at Uluru
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 4, center: uluru});
  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
   
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap">
    </script>
  </body>
</html>

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

<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>
 <script>
var locations = [
        {lat: -31.563910, lng: 147.154312},
        {lat: -33.718234, lng: 150.363181},
        {lat: -33.727111, lng: 150.371124},
        {lat: -33.848588, lng: 151.209834},
        {lat: -33.851702, lng: 151.216968},
        {lat: -34.671264, lng: 150.863657},
        {lat: -35.304724, lng: 148.662905},
        {lat: -36.817685, lng: 175.699196},
        {lat: -36.828611, lng: 175.790222},
        {lat: -37.750000, lng: 145.116667},
        {lat: -37.759859, lng: 145.128708},
        {lat: -37.765015, lng: 145.133858},
   
      ]
  // 遍歷全部座標點並添加
var markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
          });
        });

        // 添加聚類標籤 imagePath：標籤圖片樣式
        var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
      }
</script>

若是須要對聚類標籤進行樣式修改，能夠使用：web

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做爲自定義標籤。json

初始化渲染完地圖後，須要對地圖的交互動做進行監聽api

自我認爲常常用到的動做事件：async

bounds-changed：界面發生變化
center-changed：中心點發生變化
click：單擊
dbclick:雙擊
drag:拖動
heading-changed:標題改變
maptypeid：地圖樣式改變
mousemove：在地圖中移動
rightclick:高度點擊
zoom-changed:地圖高度發生改變

添加事件：學習

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

標記點添加事件：google

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。