详解UniApp地图结合高德地图实现多端marker点击弹出框功能

2023-02-12 21:58:09

UniApp 中的强强联手：利用高德地图打造出色地图应用

在移动开发领域，地图应用已成为不可或缺的一部分。对于那些希望在小程序和 APP 中无缝集成地图功能的开发者来说，UniApp 和高德地图的组合是一个理想的选择。本文将深入探究如何在 UniApp 中集成高德地图，并逐步指导您完成添加标记、实现标记点击弹出框等操作。

一、UniApp 地图简介

UniApp 地图是一款跨平台地图组件，可同时在小程序和 APP 上运行。其特点包括：

跨平台： 无需二次开发，即可同时支持小程序和 APP。
功能丰富： 提供定位、导航、标记、测距等一系列功能。
简单易用： 只需几行代码即可完成地图的初始化和使用。

二、高德地图简介

高德地图是中国领先的数字地图服务提供商，其 API 丰富且免费。其特点包括：

数据准确： 提供准确的定位和导航服务。
功能丰富： 包括定位、导航、标记、测距等多种功能。
免费使用： 开发者可免费使用其 API 开发地图应用。

三、在 UniApp 中集成高德地图

要将高德地图集成到 UniApp 项目中，需要：

安装高德地图插件： 运行 npm install @amap/uni-amap --save 命令。
配置高德地图秘钥： 在 main.js 文件中添加代码，设置 Android 和 iOS 的秘钥。
初始化高德地图： 在需要使用地图的页面中，使用 new AMap.Map() 方法初始化地图。

四、添加标记

在高德地图上添加标记非常简单：

创建一个 AMap.Marker 对象。
设置标记位置、标题和内容。
将标记添加到地图中，使用 marker.setMap(this.map) 方法。

五、实现标记点击弹出框功能

要实现标记点击弹出框功能：

为标记添加点击事件，使用 marker.on('click', () => {...}) 方法。
在事件处理程序中，使用 uni.showModal() 方法弹出模态框，显示标记的标题和内容。

六、示例代码

以下示例演示如何在 UniApp 中使用高德地图并实现标记点击弹出框功能：

// 在 main.js 中配置高德地图秘钥
uni.getSystemInfo({
  success: function (res) {
    if (res.platform === 'android') {
      uni.setStorageSync('amapKey', '您的高德地图Android秘钥');
    } else if (res.platform === 'ios') {
      uni.setStorageSync('amapKey', '您的高德地图iOS秘钥');
    }
  }
});

// 在需要使用地图的页面中初始化高德地图
onLoad() {
  this.map = new AMap.Map(this.$refs.map, {
    resizeEnable: true,
    zoom: 16,
    center: [116.397428, 39.90923]
  });

  // 添加标记
  this.marker = new AMap.Marker({
    position: [116.397428, 39.90923],
    title: '北京',
    content: '北京市，简称京，是中华人民共和国的首都'
  });
  this.marker.setMap(this.map);

  // 为标记添加点击事件
  this.marker.on('click', () => {
    // 弹出框提示
    uni.showModal({
      title: this.marker.getTitle(),
      content: this.marker.getContent()
    });
  });
}

常见问题解答

1. 如何获取当前位置？

uni.getLocation({
  type: 'gcj02',
  success: function (res) {
    console.log(res.longitude, res.latitude);
  }
});

2. 如何进行路线导航？

uni.openLocation({
  latitude: 39.90923,
  longitude: 116.397428,
  name: '北京',
  address: '北京市海淀区'
});

3. 如何在标记上添加自定义图标？

this.marker.setIcon('https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png');

4. 如何在地图上显示多个标记？

let markers = [];
for (let i = 0; i < 10; i++) {
  let marker = new AMap.Marker({
    position: [116.397428 + i, 39.90923 + i],
    title: '标记' + i,
    content: '内容' + i
  });
  marker.setMap(this.map);
  markers.push(marker);
}

5. 如何在地图上绘制多边形或折线？

let polygon = new AMap.Polygon({
  path: [[116.397428, 39.90923], [116.397428, 39.91923], [116.407428, 39.91923], [116.407428, 39.90923]],
  strokeColor: '#FF33FF',
  strokeOpacity: 1,
  strokeWeight: 3,
  fillColor: '#FF99FF',
  fillOpacity: 0.5
});
polygon.setMap(this.map);