uni-app 接入高德地图案例

第一步：注册高德地图开发者账号 地址：https://lbs.amap.com/

第二步：创建自己的应用 （我这里是小程序的）

 第三步：下载相关sdk文件，导入amap-wx.js到项目中

 第四步：创建AMapWX对象
    方式一：

       

    方式二：

  第四步：代码编写

 

/**  
 * map 用到的属性 
 * @param width map宽度
 * @param height map高度
 * @param latitude 中心纬度
 * @param longitude 中心经度
 * @param scale 缩放级别，取值范围为5-18
 * @param markers 标记点 
 * @param show-location 显示带有方向的当前定位点
 * @param markertap 点击标记点时触发
 * */         

  第五步：效果

点击marker显示callout

 

第二部分：针对下面博友问的怎么连接点。

1.代码编写

data() {
   return {
         markers: [{}, {}, {}],
   poisdatas: [{}, {}, {}],
   title: 'map',
         latitude: 30.208487,
         longitude: 120.21202,
         SRC: '111111111111',
         polyline: [{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
           points: [{ 
               latitude: 30.208487,
               longitude: 120.21202
             },
             {
               latitude: 30.209403,
               longitude: 120.213845
            },
          ],
               color: "#000000", //设置连接的线的颜色
                width: 2, //线的宽度
                dottedLine: true, //线是否是虚线
                arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
           }],

      }
},

 // 绑定polyline数组

2.效果

 

这个链接是是有效的，我试过啊。
源码地址：https://pan.baidu.com/s/1Wf3b2YpuaJjE7aaDkEgawA

密码：w3mk
gitlab源码地址
https://git.lug.ustc.edu.cn/sunshine_0707/map

我这里是小程序，是在微信开发者工具上显示的，不是app啊，你们自己注意点这个啊。