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.在页面中使用高德地图插件： 

 

  
    
  



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为高德地图插件的提供商。

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/da6686782f.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐