记录：谷歌地图google map api实现基本测距功能
测距
demo-代码
<eteral:html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<title>title>
<style>
#btn {
cursor: pointer;
width: 100%;
height: 30px;
line-height: 30px;
}
#btn:hover {
background-color: red;
}
#clear {
position: fixed;
top: 30px;
left: 300px;
}
#context {
width: 200px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #FFF;
position: absolute;
display: none;
padding: 5px;
box-sizing: border-box;
}
style>
<script src="谷歌地图api url">
script>
head>
<body>
<div id="map_canvas" style="left: 0; top: 0; width: 100%; height: 100%; position: absolute;">div>
<div id="context">
<div id="btn">测量距离div>
div>
<script>
window.onload = function () {
initialize()
}
let map
function initialize() {
let CenterLatlng = new google.maps.LatLng(39.921988, 116.417854)
let mapOptions = {
zoom: 11,
center: CenterLatlng,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, //道路
google.maps.MapTypeId.HYBRID, //卫星图+地名
google.maps.MapTypeId.SATELLITE, //卫星
'localMap'
]
},
panControl: true, //平移插件
zoomControl: true, //缩放插件
mapTypeControl: true, //地图类型插件
scaleControl: true, //比例插件
streetViewControl: false, //街景插件
overviewMapControl: true //缩略图插件
}
let lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 4,
strokeColor: 'rgba(255,0,255,1)'
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions)
map.setMapTypeId(google.maps.MapTypeId.HYBRID) //指定显示道路地图
map.setOptions({
draggable: true
})
let onOff = false
let marker
let line
let marker2
let all = []
let btn = document.querySelector('#btn')
let clear = document.querySelector('#clear')
btn.addEventListener('click', () => {
if (onOff) {
onOff = false
btn.innerHTML = '测量距离'
google.maps.event.clearListeners(map, 'click')
all.forEach((item) => {
item.setMap(null)
})
all = []
} else {
onOff = true
btn.innerHTML = '清除测量距离'
google.maps.event.addListener(map, 'click', function (event) {
if (!onOff) {
return
}
//获取点击的经纬度
let lat1 = event.latLng.lat()
let lng1 = event.latLng.lng()
//声明谷歌坐标
let Latlng1 = new google.maps.LatLng(lat1, lng1)
//声明谷歌标记并加入到地图
marker = new google.maps.Marker({
position: Latlng1,
map: map,
title: ""
})
all.push(marker)
let i = google.maps.event.addListener(map, 'click', function (event) {
if (!onOff) {
return
}
//获取点击的经纬度
let lat2 = event.latLng.lat()
let lng2 = event.latLng.lng()
//声明谷歌坐标
let Latlng2 = new google.maps.LatLng(lat2, lng2)
//使用repeat属性，每隔20px重复一次
line = new google.maps.Polyline({
path: [Latlng1, Latlng2],
strokeOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '20px'
}],
map: map
})
all.push(line)
//声明谷歌标记并加入到地图
marker2 = new google.maps.Marker({
position: Latlng2,
map: map,
title: "marker2"
})
all.push(marker2)
let lat = [] //纬度
let lng = [] //精度
lat.push(Latlng1.lat())
lat.push(Latlng2.lat())
lng.push(Latlng1.lng())
lng.push(Latlng2.lng())
//算俩点的距离
let R = 6378137
let dLat = (lat[1] - lat[0]) * Math.PI / 180
let dLng = (lng[1] - lng[0]) * Math.PI / 180
let a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat[0] * Math.PI / 180) * Math
.cos(lat[
1] * Math.PI / 180) * Math.sin(dLng / 2) * Math.sin(dLng / 2)
let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
let d = R * c
//信息窗口
let html = "终点距离：" + Math.round(d) + "米"
let iw = new google.maps.InfoWindow({
content: html
})
iw.open(map, marker2)
i.remove()
all.forEach((item) => {
item.addListener('click', function () {
iw.open(map, item)
})
})
})
})
}
})
let iw = null
let mapOverlay = new google.maps.OverlayView()
mapOverlay.setMap(map)
google.maps.event.addListener(map, 'click', () => {
document.querySelector("#context").style.display = 'none'
})
google.maps.event.addListener(map, 'zoom_changed', () => {
document.querySelector("#context").style.display = 'none'
})
google.maps.event.addListener(map, 'drag', () => {
document.querySelector("#context").style.display = 'none'
})
document.onclick = function(event){
if (event.target.getAttribute('id') !== 'context') {
document.querySelector("#context").style.display = 'none'
}
}
google.maps.event.addListener(map, 'rightclick', function (event) {
let currentLatLng = event.latLng;
console.log(event, event.latLng)
let p = mapOverlay.getProjection().fromLatLngToContainerPixel(event.latLng)
let x = p.x
let y = p.y
let con = document.querySelector("#context")
con.style.display = 'none'
let mapDiv = map.getDiv()
con.style.display = 'block'
console.log(con.style)
if ( x > (mapDiv.clientWidth - 200)) {
x = mapDiv.clientWidth - 200
}
if ( y > (mapDiv.clientHeight - 40)) {
y = mapDiv.clientHeight - 40
}
con.style.top = y + 'px'
con.style.left = (x + 0) + 'px'
con.oncontextmenu = (e) => {
return false
}
// return false
})
}
script>
body>
eteral:html>