前端页面如何获取高德地图

最新推荐文章于 2023-02-02 17:07:46 发布

空城三梦

最新推荐文章于 2023-02-02 17:07:46 发布

阅读量362

点赞数

分类专栏：地图

本文链接：https://blog.csdn.net/m0_48068420/article/details/118378837

版权

地图专栏收录该内容

3 篇文章 0 订阅

订阅专栏

首先需要获取高德地图 api，下面的网址可以获取，具体获取教程百度可得

https://console.amap.com/dev/index

获取地图代码操作

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  //引入高德地图的js和key，怎么拿到key自己百度
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=放key位置"></script>
  <style type="text/css">
    #app{
      width: 600px;
      height: 400px;
    }
  </style>
</head>

<body>
//建立一个容器显示地图
  <div id="app"></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) 
        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('app', {
          resizeEnable: true,
          center: mapSet, // 地图标记title
          zoom: 17 // 地图视图缩放级别,数值越大越精确
        })
        const marker = new AMap.Marker({
          position: map.getCenter()
        })
        marker.setMap(map)

		//如果需要添加标记点，可编辑以下代码
		//创建一个标记点
          //var marker1 = new AMap.Marker({
          // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            //position: new AMap.LngLat(116.44927, 39.9584), 
            //title: "位置标题"
          //});
          // 将创建的点标记添加到已有的地图实例：
          //map.add(marker1);
      })
 
      AMap.event.addListener(geolocation, 'error', e => {
        console.log(e) // 定位失败触发
      })
    })
  }
</script>
</body>
</html>

空城三梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端页面如何获取高德地图

首先需要获取高德地图 api，下面的网址可以获取，具体获取教程百度可得https://console.amap.com/dev/index获取地图代码操作<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title></title> //引入高德地图的js和key，怎么拿到key自己百度 <script type="tex.
复制链接

扫一扫