Bootstrap

通过高德 JS API 实现H5端定位

实现步骤:

1、安装 amap-jsapi-loader 插件

npm install amap-jsapi-loader

2、对定位组件进行封装

gb-location组件
<script lang="ts" setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import {ref,defineExpose} from 'vue';

let map = ref(null);
const emit = defineEmits(['success']);


function initMap() {
  console.log('initMap')
  window._AMapSecurityConfig = {
    securityJsCode: '高德安全密钥', // 安全密钥
  };
  AMapLoader.load({
    key: '高德开发者Key', // 申请好的Web端开发者Key,首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
    plugins: [
      'AMap.Geolocation',
    ], //需要使用的的插件列表,
;