• 高德地图API使用教程

    高德地图API使用教程

    开发前准备

    获取key值和相关安全密钥

    • 进入高德开放平台
      https://lbs.amap.com/
      在这里插入图片描述
    • 登录后，打开我的应用（无账号要先注册）
      在这里插入图片描述
    • 打开我的应用，创建新应用，填入创建的名称和选择应用类型
      在这里插入图片描述
      在这里插入图片描述
    • 按需填入自己的名称及服务平台，域名白名单可不填
      在这里插入图片描述
      在这里插入图片描述
    • 这就获取到了key值和相关安全密钥
      在这里插入图片描述
    • 回到首页后，点击开发支持，可查看教程
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述

    简单使用

     window._AMapSecurityConfig = {
    securityJsCode: "e7949ee6421d41dcb86f0be390297524"
  };
  AMapLoader.load({
    key: "申请好的Web端开发者Key，首次调用 load 时必填", // 
    version: "2.0" // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  })
    .then(AMap => {
    })

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    需求开发

    h5范围打卡-vue3

    在这里插入图片描述

    <script setup lang="ts" name="informationList">
import { showToast } from "vant";
import { ref, onMounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let circle = ref(null); //圆形存放
let btnStatus = ref<boolean>(false); // 活动签到按钮状态
const ClockLngLat = ["传入的经度", "传入的维度"];
let marker = ref(null); // 标点
let locationLngLat = ref([]); //自己当前定位


onMounted(() => {
  // 获取位置坐标
  drawCircle();
});
// 初始化打卡点
const drawCircle = () => {
  window._AMapSecurityConfig = {
    securityJsCode: "e7949ee6421d41dcb86f0be390297524" //申请的密钥，现在的版本必须加密钥咯~
  };
  AMapLoader.load({
    key: "83146d89a638bd73dd676e6771dd2139", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    // resizeEnable: true,
    plugins: [
      "AMap.Geolocation", //定位
      "AMap.Circle", //圆形
      "AMap.Marker", //标记点
      "AMap.GeometryUtil" //通用的函数库
    ] // 需要使用的的插件列表
  }).then(AMap => {
    //设置地图容器id
    const map = new AMap.Map("serviceSiteMap", {
      viewMode: "3D", //是否为3D地图模式
      zoom: 16, //初始化地图级别
      center: ClockLngLat //初始化地图中心点位置
    });
    //判断地图是否有圆形
    if (circle) {
      //清除地图所有圆形跟标记点
      map.remove(circle);
      map.remove(marker);
    }
    //绘制圆形
    circle = new AMap.Circle({
      center: ClockLngLat, // 圆心位置
      radius: 200, // 圆半径 米
      fillColor: "rgba(103,182,255)", //圆形填充颜色
      fillOpacity: 0.3, //透明度
      strokeColor: "#5898ff", //描边颜色
      strokeWeight: 1 // 描边宽度
    });
    //地图添加圆形
    map.add(circle);
    // 获取位置坐标
    const geolocation = new AMap.Geolocation({
      enableHighAccuracy: true, // 是否使用高精度定位，默认：true
      timeout: 5000 // 设置定位超时时间，默认：无穷大
    });
    geolocation.getCurrentPosition((status: string, result: any) => {
      if (status == "complete") {
        locationLngLat.value = [result.position.lng, result.position.lat];
        btnStatus.value = false;
        //本地位置点添加标记点
       const marker = new AMap.Marker({
          map: map, //要显示该marker的地图对象
          position: locationLngLat.value, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', //图标显示
          topWhenClick: true //鼠标点击时marker是否置顶，默认false
        });
        marker.setMap(map); //将点添加至图片
      } else {
        btnStatus.value = true;
        showToast("请确定是否已打开定位权限"); //注意！谷歌目前定位不行！！！！
      }
    });
  });
};
// 打卡事件
const isClockAdd = () => {
  AMapLoader.load({}).then(AMap => {
    // contains 判断 p 是否在 this.circle圆形 里面
    const isPoint = circle.contains(locationLngLat.value);
    const circleCen = circle.getCenter();
    if (isPoint) {
        //打卡成功后的逻辑
    } else {
      //AMap.GeometryUtil.distance 计算两点之间的距离   减去  圆形半径 500米
      var distance =
        Math.round(AMap.GeometryUtil.distance(locationLngLat.value, circleCen)) - 500;
      showToast("打卡失败,您距离打卡地点还有" + distance + "米");
    }
  });
};
</script>

<template>
  <div class="mapCheck">
    <van-nav-bar title="活动打卡" left-text="返回" left-arrow @click-left="router.go(-1)" />
    <div id="serviceSiteMap"></div>
    <van-button type="primary" class="btnMap" @click="isClockAdd" :disabled="btnStatus">{{ route?.params?.status=='1'? "活动签到":'活动签退' }}</van-button>
  </div>
</template>


<style scoped lang="less">
.mapCheck {
  overflow: hidden;
  #serviceSiteMap {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 88vh;
  }
  .btnMap {
    width: 80%;
    height: 8vw;
    background: #057fdd;
    color: #fff;
    font-size: 15px;
    margin: auto;
    position: fixed;
    left: 10%;
    bottom: 60px;
    border-radius: 6px;
    z-index: 999999;
    opacity: 1;
  }
}
</style>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132

    地图选点-vue3

    在这里插入图片描述

      <div id="container"></div>
 ..
 const getMap = () => {
  window._AMapSecurityConfig = {
    securityJsCode: "e7949ee6421d41dcb86f0be390297524"
  };
  AMapLoader.load({
    key: "83146d89a638bd73dd676e6771dd2139", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0" // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  })
    .then(AMap => {
      const map = new AMap.Map("container", {
        //设置地图容器id
        viewMode: "3D", //是否为3D地图模式
        zoom: 12, //初始化地图级别
        resizeEnable: true,
        center: [104.055467, 30.542967]
        // merchantDetails.value?.serviceSites[0].longitude,
        // merchantDetails.value?.serviceSites[0].dimension
        // ] //初始化地图中心点位置
      });
      map.on("click", function (e) {
        map.clearMap();
        regeoCode([e.lnglat.getLng(), e.lnglat.getLat()], AMap, map);
      });
    })
    .catch(e => {
      console.log(e);
    });
  //为地图注册click事件获取鼠标点击出的经纬度坐标
};
const regeoCode = (position: any, AMap, map) => {
  AMap.plugin("AMap.Geocoder", () => {
    const geocoder = new AMap.Geocoder({
      city: "010", //城市设为北京，默认：“全国”
      radius: 1000 //范围，默认：500
    });
    geocoder.getAddress(position, function (status, result) {
      if (status === "complete" && result.regeocode) {
        var address = result.regeocode.formattedAddress;
        const name = new AMap.Marker({
          // icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
          position: position,
          content: `
    ${address}
    `    ,
          offset: new AMap.Pixel(-40, 5)
        });
        const marker = new AMap.Marker({
          icon:
            "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
          position: position,
          offset: new AMap.Pixel(-26, -54)
        });
        name.setMap(map);
        marker.setMap(map);
        activityAddress.value = address;
        longitude.value=position[0]
        dimension.value=position[1]

        // document.getElementById('address').value = address;
      } else {
        console.log("根据经纬度查询地址失败");
      }
    });
  });
};
 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
  • 相关阅读:
    类和对象(7)：初始化列表
    Nacos 集群搭建
    反射和注解
    YOLO V1学习笔记
    Docker 安装Redis 无法使用配置文件设置密码问题
    计算机毕业设计之java+javaweb社区共享食堂信息系统
    Jenkins CI/CD 持续集成专题四 Jenkins服务器IP更换
    华为再次入选2022年Gartner® SIEM魔力象限
    【python】HTTP压力测试过程中遇到的问题与解决方案
    十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！
  • 原文地址：https://blog.csdn.net/weixin_43787651/article/details/132711685