高德地图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 => {
    })

需求开发

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>

地图选点-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("根据经纬度查询地址失败");
      }
    });
  });
};