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

郭宝

于 2024-11-22 16:03:47 发布

阅读量306

点赞数

分类专栏： Web前端文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/qq_35366269/article/details/143976235

版权

Web前端专栏收录该内容

282 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

实现步骤：

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',
    ], //需要使用的的插件列表，