pc端使用高德地图api获取当前位置的经纬度

最新推荐文章于 2024-05-21 17:04:51 发布

小样还想跑

最新推荐文章于 2024-05-21 17:04:51 发布

阅读量2.8k

点赞数 1

文章标签：街景地图 js html

本文链接：https://blog.csdn.net/weixin_45356397/article/details/106239217

版权

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <title>地图测试文件</title>
    <style type="text/css">
      #container {
        width: 300px;
        height: 180px;
      }
    </style>
  </head>
  <body>

    <div id="container"></div>
    <button type="button" onclick="btn()">点我获取经纬度</button>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=key"></script>
    <script type="text/javascript">
      var map = new AMap.Map('container');

      function getLocation() {
        return new Promise((resolve, reject) => {
          AMap.plugin('AMap.Geolocation', function() {
            var geolocation = new AMap.Geolocation({
              // 是否使用高精度定位，默认：true
              enableHighAccuracy: true,
              // 设置定位超时时间，默认：无穷大
              timeout: 10000,
              // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
              buttonOffset: new AMap.Pixel(10, 20),
              //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
              zoomToAccuracy: true,
              //  定位按钮的排放位置,  RB表示右下
              buttonPosition: 'RB'
            })

            geolocation.getCurrentPosition()
            AMap.event.addListener(geolocation, 'complete', onComplete)
            AMap.event.addListener(geolocation, 'error', onError)
            function onComplete(data) {
              resolve(data)
            }
            function onError(data) {
              console.log(data)
              reject(data)
            }
          })
        })
      }
        //点击事件 es6语法
      const btn = async () => {
        let result = await getLocation()
        console.log(result)
      }
      //点击事件es5语法
      function btn() {
        getLocation().then(res => {
          console.log(res)
        })
      }
    </script>
  </body>
</html>

小样还想跑

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
pc端使用高德地图api获取当前位置的经纬度

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <title>地图测试文件</title> <style type="text/css"> #container {
复制链接

扫一扫