uniApp里面怎么用高德-猿码集

1. 简介

uniApp作为一款跨平台框架，可以编写一份代码，发布到多个平台，其中包含了对高德地图的集成。通过uniMap组件和高德地图JavaScript API的结合，可以实现地图相关的功能。

2. 集成高德地图

2.1. 获取高德Key

集成高德地图需要申请高德Key，详情可以参考高德地图官网。申请成功后，需要将Key配置到uni-app的manifest.json文件中，如下：

{
  "app": {
    "key": "your app key",
    "plugins": {
      "myPlugin": {
        "version": "1.0.0",
        "provider": "uni-app"
      }
    }
  }
}

以及在pages.json文件中引用高德地图组件：

"usingComponents": {
  "uniMap": "@dcloudio/uni-map"
}

2.2. 引入高德地图JS API

uni-app默认没有引入高德地图JS API，需要手动引入。可以在static目录下创建一个js文件夹，将高德地图JS API下载到该文件夹中。然后在需要使用地图的页面的vue文件中引入：

import { Map } from '../../static/js/amap-wx.js';

其中，amap-wx.js是高德地图JS API的文件名，根据实际情况修改即可。

3. 基本使用

3.1. 显示地图

在页面中添加uniMap组件，并设置宽度和高度即可显示地图：

<template>
  <view>
    <uniMap :latitude="latitude" :longitude="longitude" :markers="markers" :covers="covers" :polyline="polyline" :circles="circles" style="width: 100%; height: 300px;"></uniMap>
  </view>
</template>

其中，latitude和longitude是地图的中心点经纬度。markers、covers、polyline和circles分别表示地图上的标记、覆盖物、折线和圆等。

3.2. 获取用户位置

可以使用uni.getLocation方法获取用户位置信息：

uni.getLocation({
  type: 'gcj02',
  success: res => {
    this.latitude = res.latitude;
    this.longitude = res.longitude;
  },
  fail: error => {
    uni.showToast({
      title: '获取位置信息失败',
      icon: 'none'
    });
  }
});

其中，type表示定位类型，gcj02是国家测绘局标准，返回的是加密后的坐标信息。

3.3. 添加标记

可以使用markers属性在地图上添加标记：

this.markers = [{ id: 1, latitude: this.latitude, longitude: this.longitude, title: '我的位置', iconPath: '/static/images/location.png', width: 20, height: 20, callout: { content: '这是我的位置', fontSize: 14, bgColor: '#ffffff', padding: 10, borderRadius: 10, display: 'ALWAYS' }

}];

其中，id是标记的唯一标识，latitude和longitude是标记的经纬度，title是标记的标题，iconPath是标记的图标路径，width和height是图标的尺寸，callout表示标记的气泡，其中content是气泡的内容，fontSize是字体大小，bgColor是背景色，padding是内边距，borderRadius是边框圆角，display表示气泡的显示策略。

3.4. 添加覆盖物

可以使用covers属性在地图上添加覆盖物：

this.covers = [{
  id: 2,
  latitude: this.latitude + 0.01,
  longitude: this.longitude,
  iconPath: '/static/images/circle.png',
  rotate: 0,
  alpha: 0.8,
  width: 50,
  height: 50
}];

其中，id是覆盖物的唯一标识，latitude和longitude是覆盖物的经纬度，iconPath是覆盖物的图标路径，rotate是旋转角度，alpha是透明度，width和height是尺寸。

3.5. 添加折线

可以使用polyline属性在地图上添加折线：

this.polyline = [{
  points: [{
      latitude: this.latitude,
      longitude: this.longitude
    },
    {
      latitude: this.latitude + 0.01,
      longitude: this.longitude + 0.01
    }
  ],
  color: '#ff0000',
  width: 5,
  dottedLine: true,
  arrowLine: true,
  borderColor: '#0000ff'
}];

其中，points是折线的坐标点，color是颜色，width是宽度，dottedLine表示是否虚线，arrowLine表示是否带箭头，borderColor表示边框颜色。

3.6. 添加圆

可以使用circles属性在地图上添加圆：

this.circles = [{
  latitude: this.latitude,
  longitude: this.longitude,
  radius: 1000,
  color: '#00ff00',
  fillColor: '#00ff00',
  strokeWidth: 2
}];

其中，latitude和longitude是圆心坐标，radius是半径，color是边框颜色，fillColor是填充颜色，strokeWidth是边框宽度。

4. 结语

通过uni-app和高德地图的结合，可以很方便地实现地图相关的功能，包括显示地图、获取用户位置、添加标记、覆盖物、折线和圆等。我们可以根据实际需求，选择相应的API进行开发。

uniApp里面怎么用高德