小工具知识网

当前位置: 首页 > 行业知识 > uniapp小程序使用高德地图步骤

行业知识

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

2026-11-02 20:13:57 来源:互联网转载

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

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

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

    npm install --save uni-simple-routernpm install --save uview-uinpm install --save uview-ui
  3. 在需要使用高德地图的页面中引入高德地图插件

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

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

 

        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      }]    }  }}

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

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

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

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

上一篇:魔性拼音怎么写?

下一篇:小叶榕树换土秘籍,轻松操作,绿植重获新生!