测距

demo-代码

<!DOCTYPE html>
<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 class="btn"><button id="btn">开启测距</button></div> --><div id="context"><div id="btn">测量距离</div></div><script>window.onload = function () {initialize()}let mapfunction 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 = falselet markerlet linelet marker2let all = []let btn = document.querySelector('#btn')let clear = document.querySelector('#clear')btn.addEventListener('click', () => {if (onOff) {onOff = falsebtn.innerHTML = '测量距离'google.maps.event.clearListeners(map, 'click')all.forEach((item) => {item.setMap(null)})all = []} else {onOff = truebtn.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 = 6378137let dLat = (lat[1] - lat[0]) * Math.PI / 180let dLng = (lng[1] - lng[0]) * Math.PI / 180let 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 = "<div>终点距离：" + Math.round(d) + "米</div>"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 = nulllet 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.xlet y = p.ylet 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>

记录：谷歌地图google map api实现基本测距功能相关推荐

Google 地图 google map api / 地图有关
第一种效果:可搜索,可以计算参考: http://www.ditu123.com/main/google_map_api.html#The_Hello_World_of_Google_Maps 代码 ...
谷歌地图-Google Map
谷歌地图谷歌地图[1][2]是 Google 公司提供的电子地图服务,包括局部详细的卫星照片.此款服务可以提供含有全球城市政区和交通以及商业信息的矢量地图.不同分辨率的卫星照片和可以用来显示地形和等 ...
如何采用离线的 Google Map API 加载离线谷歌地图的方法
原文转自:http://www.arceyes.com/bbs/thread-18476-1-1.html 如何采用离线的 Google Map API 加载离线谷歌地图的方法一.下载示例数据这里 ...
【转】在你的博客中添加Google地图(Use Google Map API On Your Bolg)
在你的博客中添加Google地图(Use Google Map API On Your Bolg) *+申请一组 Google Maps API Key 在使用 Google Maps API 之前, ...
主流电子地图API比较 google map api, mapabc ,yahoo地图
主流电子地图API比较 Google Maps API : Google Maps API 基于Google Maps,能够使用 JavaScript 将 Google Maps 嵌入网页中.API ...
android手机安装时缺少google map api 的解决方法
有些android手机,机器里没有com.google.android.maps.jar这个包. 所以当开发使用了google map api的程序时,即使在模拟器上没有问题,但是在真机上无法安装 ...
google map Api接口整理
Google Map Api接口整理一:基本知识: 1. 使用谷歌地图 API 的第一步就是要注册一个 API 密钥,需要注意一下两点: 1.如果使用 API 的页面还没有发布,只是在本地调试,可以 ...
Google Map API v3 - 设置边界和中心
本文翻译自:Google Map API v3 - set bounds and center I've recently switched to Google Maps API V3. 我最近切换到 ...
Google Map Api for Android
Google Map Api for Android 项目需要使用了谷歌的地图api,总结一下. 先上几个图一.项目介绍 1.点击搜索附近的公园这个展示的可以点击地图的任意位置获取经纬度,并标记M ...

记录：谷歌地图google map api实现基本测距功能

测距

记录：谷歌地图google map api实现基本测距功能相关推荐

最新文章

热门文章