uniapp小程序使用高德地图步骤

最新推荐文章于 2025-10-29 11:47:30 发布

原创

最新推荐文章于 2025-10-29 11:47:30 发布 · 3.9k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #小程序

以下是在uniapp中使用高德地图的步骤：

首先需要在高德地图官网申请一个属于自己的高德地图key。

在uniapp项目中安装高德地图插件，可以使用以下命令进行安装：

npm install --save uni-simple-router
npm install --save uview-ui
npm install --save uview-ui

在需要使用高德地图的页面中引入高德地图插件

import amap from '@/components/amap/amap.vue'

4.在页面中使用高德地图插件：

<template>
  <view>
    <amap :key="key" :longitude="longitude" :latitude="latitude" :markers="markers"></amap>
  </view>
</template>

<script>
export default {
  data() {
    return {
      key: 'your amap key',
      longitude: 116.397428,
      latitude: 39.90923,
      markers: [{
        id: 1,
        longitude: 116.397428,
        latitude: 39.90923,
        iconPath: '/static/images/location.png',
        wid