html引入高德地图-实时定位

1.注册账号

2.控制台-应用管理-我的应用

创建新应用

添加应用详情：

选择js-web

  <!-- https://lbs.amap.com/  高德地图开放平台

1.注册账号 得到key 放到 Thiskey
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=Thiskey"></script>
-->

html页面：

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>地图Demo</title>
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=key"></script>
  <!-- https://lbs.amap.com/  高德地图开放平台

1.注册账号 得到key 放到 Thiskey
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=Thiskey"></script>
-->

  <style type="text/css">
 
    #wrapper {
      width: 1500px;
      height: 800px;
    }
  </style>
</head>

<body>

  <div align="center">
  <div id="wrapper"></div>

</div>



<script type="text/javascript">
  window.onload = function () {


    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', e => {
        console.log(e) 
        // 定位成功之后做的事 // 定位成功之后再定位处添加一个marker
        console.log(e.position.lat)
        console.log(e.position.lng)

        var mapSet = []

        mapSet[1] = e.position.lat
        mapSet[0] = e.position.lng
        
        console.log(mapSet)


        var map = new AMap.Map('wrapper', {
          resizeEnable: true,
          center: mapSet, // 地图标记title
          zoom: 12 // 地图视图缩放级别
        })
        const marker = new AMap.Marker({
          position: map.getCenter()
        })
        marker.setMap(map)
      })

      AMap.event.addListener(geolocation, 'error', e => {
        console.log(e) // 定位失败做的事
      })
    })



  }



</script>

</body>
</html>

王君99

发布了339 篇原创文章 · 获赞 58 · 访问量 9万+

私信关注

html引入高德地图-实时定位

猜你喜欢