谷歌地图开发使用记录 Google Maps

谷歌地图开发文档

1. 申请谷歌地图密钥

可参考此链接https://blog.csdn.net/edsoki/article/details/123391685

https://www.wppop.com/get-google-api-key.html

1. 引入

2. 创建挂载地图的节点

3.地图渲染

代码块①初始化地图

function initMap() {
        var myLatlng = getLatLng(
            `{{ section.settings.first_lat }}`, `{{ section.settings.first_long }}`);
        var mapProp = {
            center: myLatlng,
            zoom: Number(`{{ section.settings.first_zoom }}`),
            mapId: "{{ section.settings.mapId }}",
            // mapTypeId: google.maps.MapTypeId.ROADMAP,
            fullscreenControl: false,
            streetViewControl: false,
            streetViewControlOptions: {
                position: google.maps.ControlPosition.LEFT_BOTTOM
            },
            mapTypeControl: false,
            panControl: false,
            zoomControl: false,
            zoomControlOptions: {
                position: google.maps.ControlPosition.LEFT_CENTER
            }
        };
        map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    }
    google.maps.event.addDomListener(window, 'load', initMap);

初始化地图方式1

如图：

初始化地图方式2

function initMap () {
    .......
}

代码块②经纬度格式化

    function getLatLng(lat, long) {
        return new google.maps.LatLng(lat, long)
    }

代码块③地图标记

        mapMarkerData.forEach(function (v, i) {
            var icon = {
                url: v.icon, // url
                scaledSize: new google.maps.Size(30, 30), // scaled size
            };
            var marker = new google.maps.Marker({
                position: getLatLng(v.lat, v.long),
                map: map,
                icon: icon
            });
            marker.addListener('click', function () {
                map.setZoom(14);
                map.setCenter(marker.getPosition());
                var targetClass = '.test-ride-map-wrapper aside #' + v.shop_id
                var targetOffset = $(targetClass).position().top;
                $('.test-ride-map-wrapper .list-wrapper ul li').removeClass('on')
                $(targetClass).addClass('on')
                $('.test-ride-map-wrapper aside').animate({
                    scrollTop: targetOffset
                }, 500);
            });

        })

代码块④监听街景打开关闭事件

google.maps.event.addListener(map.getStreetView(), 'visible_changed', function(){
    if (this.getVisible()) {
      $('.custom-zoom-button-wrap').hide()
      if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
      console.log('M端不隐藏')
      } else {
        $('.test-ride-map-wrapper .list-wrapper').hide()
      }
     } else {
        $('.custom-zoom-button-wrap').show()
        $('.test-ride-map-wrapper .list-wrapper').show()
      }
})

4. 打开街景方法自定义打开街景方法

const fenway = { lat: 40.5843125, lng: -73.8201448 };
const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano"),
    {
    position: fenway,
    pov: {
      heading:  307.67,
      pitch: 0,
    },
    }
    );
map.setStreetView(panorama);

5. 关闭街景方法

map.getStreetView().setVisible(false);

6. 地图经纬度获取步骤

7. 地图街景经纬度取值步骤

8. 使用api查询指定地点经纬度

function geocode(request) {
    geocoder.geocode(request).then((result) => {
      const { results } = result;
      console.log({
            lat:results[0].geometry.location.lat(),
            lng:results[0].geometry.location.lng()
      })
    }).catch((e) => {
        alert("Geocode was not successful for the following reason: " + e);
    });
}

9. 移除地图marker标记

function setAllMap(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
  }
}

function clearMarkers() {
  setAllMap(null);
}

10.地址自动填充

function initMap() {
    let places = new google.maps.places.Autocomplete(
        document.getElementById('addressAutocomplete')
    );
    google.maps.event.addListener(places, 'place_changed', function () {
        console.log(places) // places里面包含所需要信息
    });
}

places如下图

效果图如下：