谷歌地图开发文档

1. 申请谷歌地图密钥

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

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

1. 引入

<script src="https://maps.googleapis.com/maps/api/js?key=密钥&language=en"></script>

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 () {.......
}<script src="https://maps.googleapis.com/maps/api/js?key=密钥&callback=initMap&libraries=places&language=en"></script>

代码块②经纬度格式化

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

代码块③地图标记

        mapMarkerData.forEach(function (v, i) {var icon = {url: v.icon, // urlscaledSize: 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_idvar 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.地址自动填充

<input id="addressAutocomplete"  type="text" />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如下图

效果图如下：