1.vue中使用高德地图定位

最新推荐文章于 2025-07-16 12:59:52 发布

原创

最新推荐文章于 2025-07-16 12:59:52 发布 · 1.3w 阅读

14 ·

CC 4.0 BY-SA版权

本文详述了在Vue项目中使用高德地图JS API进行定位的步骤，包括注册获取API key，引入API，实现高精度和逆向解析定位，并提供了完整代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录在vue项目中使用高德地图js API的过程

首先注册账号申请key

项目中引入api

在开发文档中的“准备”目录中复制api，引入vue项目的index.html中，替换key
项目主要使用的是定位服务，在菜单中找到定位的api写到项目App.vue中,让页面一加载就获取定位信息、

<template>
  <div id="app">

    <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'app',
    created() {
      this.getLocation()
    },
    methods: {
      getLocation() {
        AMap.plugin('AMap.Geolocation', function () {
          var geolocation = new AMap.Geolocation({
            // 是否使用高精度定位，默认：true
            enableHighAccuracy: true,
            // 设置定位超时时间，默认：无穷大
            timeout: 10