申请谷歌地图密钥
可参考此链接https://blog.csdn.net/edsoki/article/details/123391685
https://www.wppop.com/get-google-api-key.html
引入
![](https://img-blog.csdnimg.cn/img_convert/3fe33b4f6b55f660da9a5bb8629e54a8.png)
<script src="https://maps.googleapis.com/maps/api/js?key=密钥&language=en"></script>
2. 创建挂载地图的节点
![](https://img-blog.csdnimg.cn/img_convert/6d7f6c3f9331ccdcff244223035c506e.png)
3.地图渲染
![](https://img-blog.csdnimg.cn/img_convert/cc08adc30f40ed3f06b386c191546461.png)
代码块①初始化地图
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
如图:
![](https://img-blog.csdnimg.cn/img_convert/e486f120c47f652bb55ee55a4ea92675.png)
初始化地图方式2
function initMap () {
.......
}
<script src="https://maps.googleapis.com/maps/api/js?key=密钥&callback=initMap&libraries=places&language=en"></script>
![](https://img-blog.csdnimg.cn/img_convert/15f1f96f900e40b91ce7f15b29001504.png)
代码块②经纬度格式化
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. 地图经纬度获取步骤
![](https://img-blog.csdnimg.cn/img_convert/d8f14702b1f1f038d7cbd07c52bd9609.png)
7. 地图街景经纬度取值步骤
![](https://img-blog.csdnimg.cn/img_convert/fcb1ed2a01265dd74049f4a672d2184e.png)
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如下图
![](https://img-blog.csdnimg.cn/img_convert/b943be329ebfcdd4afb6f760119aeed1.png)
效果图如下:
![](https://img-blog.csdnimg.cn/img_convert/c70b5364c4dc60bee8c3bb19c3334ef9.png)