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

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

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

  2. 在uniapp项目中安装高德地图插件,可以使用以下命令进行安装:

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

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

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',
        width: 50,
        height: 50
      }]
    }
  }
}
</script>

其中,key为你在高德地图官网申请的key,longitude和latitude为地图的中心点坐标,markers为标记点的信息。 

5.在manifest.json文件中添加高德地图插件的配置: 

{
  "mp-weixin": {
    "plugins": {
      "amap": {
        "version": "1.0.0",
        "provider": "wx92c75a9e3b8e6c8e"
      }
    }
  }
}

 其中,provider为高德地图插件的提供商。

  • 19
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值