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

最新推荐文章于 2025-04-01 09:00:00 发布
汪同学丶
最新推荐文章于 2025-04-01 09:00:00 发布
阅读量3.2k
点赞数
分类专栏：地图相关：MAPBOX+GOOGLEMAP+高德MAP 文章标签：测距
本文链接：https://blog.csdn.net/weixin_44402694/article/details/100153100
版权
地图相关：MAPBOX+GOOGLEMAP+高德MAP 专栏收录该内容
12 篇文章
订阅专栏
测距

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 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 = "<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 = 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>