前端vue地图自动定位当前位置

最新推荐文章于 2024-09-06 16:12:22 发布

张可.

最新推荐文章于 2024-09-06 16:12:22 发布

阅读量2.3k

点赞数 1

文章标签： vue.js 前端 javascript 定位

本文链接：https://blog.csdn.net/Zzzzzzzzzzzke/article/details/121927269

版权

该博客介绍了如何在Vue.js项目中结合高德地图API，通过申请高德地图的key并引入相关文件，实现在前端页面自动获取并显示用户当前位置的功能。详细步骤和关键代码在内容中有详述。

摘要由CSDN通过智能技术生成

先到高的开放平台申请key

在index.html引入高德地图文件

<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script src="https://webapi.amap.com/maps？v=1.4.15&key='key值'&plugin=AMap.DistrictSearch"></script>
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

详细看下面代码

<template>
  <div>
    <van-popup
      v-model="showPoPuP3"
      position="top"
      :style="{ height: '50%' }"
      @opened="wancheng"
    >
      <div id="containers" class="containers"></div>
    </van-popup>
    <van-cell-group>
      <van-field
        v-model="lonLat"
        required
        clearable
        label="位置"
        left-icon&