【微信小程序 + map组件】自定义地图气泡？原生气泡？如何抉择？

前言

在微信小程序中使用地图组件 - map组件，业务需求当中需要显示标记点，气泡等，怎么实现？

首先明确，你是单个气泡显示，还是多个气泡显示；

其次明确，气泡中的内容是多行，还是单行，涉不涉及到更多的图标+文字；

再次明确，机型适配要求是否严格（IOS、Android、鸿蒙、PC端）。

好的，明确了以上的几点，我们来分别看看，原生气泡和自定义的气泡如何使用、以及优劣点。

如果你还不知道，如何引入地图组件，那么请参考下面这篇文章：
【微信小程序 + 高德地图API 】键入关键字搜索地址，获取经纬度等

如果你需要找寻map组件的文章，这里有文章地址：
地图 / map

文章目录

前言
- 一、原生气泡
- - - [1.callout 属性](#1.callout 属性)
    - 2.如何使用呢？（写部分代码哦～）
    - [3. 设备兼容](#3. 设备兼容)
- 二、自定义气泡
- - - 1.customCallout属性
    - [2. 使用方法](#2. 使用方法)
    - [3. cover-view的使用说明](#3. cover-view的使用说明)
- 三、综上所述

一、原生气泡

1.callout 属性

2.如何使用呢？（写部分代码哦～）

typescript 复制代码

<map :markers="markers"></map>

上面这段代码有变量 markers，聪明的你已经在 <script> </script> 中声明了这个变量。接下来就是给markers这个数组的每个item项加相关的属性。

typescript 复制代码

// cur_ls 是你请求接口返回的arr值
markers.value = cur_ls.map((spot, index) => ({
      id: spot.id,
      latitude: spot.latitude,
      longitude: spot.longitude,
      title: spot.name,
      width: 32,
      height: 32, 
      count: 0,
      iconPath: '这是你的icon资源地址',
      anchor: { x: 0.5, y: 1 }, // 底边中点
      callout: { // 这个属性就是原生的气泡了
        content: spot.name,
        color: '#333333',
        fontSize: 13,
        padding: 4,
        borderRadius: 4,
        display: 'ALWAYS',
        bgColor: '#FFFFFF',
        textAlign: 'center',
        anchorY: 0,
        anchorX: 0,
      }
    }))

这样你可以尽情的DIY了，如果忘记了marker的属性，自己去看一下哈。贴心的博主已经给你贴出来了------ 就是我！！！！！！！！

（也许你会上下滑动，看到这里，你已经会使用原生气泡了，聪明的你别忘记收藏+点赞+关注！）

3. 设备兼容

当你遇到要求比较严格的产品，或者测试同学（有要求，是好事啊哈哈，别问，我一开始也不知道，后来被问到才去看的 Q:-(），会发现IOS上显示的气泡内边距和安卓的不一致，IOS的偏大，安卓正常。

IOS，如图：
安卓，如图：

怎么解决呢？

思路：聪明的你知道微信小程序中，如何获取设备信息了。那么只需要记录当前设备是什么，根据设备来设置不同的数值。

代码如下：

typescript 复制代码

markers.value = cur_ls.map((spot, index) => ({
      id: spot.id,
      latitude: spot.latitude,
      longitude: spot.longitude,
      title: spot.name,
      width: 32,
      height: 32, 
      count: 0,
      iconPath: '这是你的icon资源地址',
      anchor: { x: 0.5, y: 1 },
      callout: {
        content: spot.name,
        color: '#333333',
        fontSize: 13,
        padding: globalStore.isAndroid ? 8 : 4, // 这里就举一个例子，有涉及到数值的如果设备显示不一致，都可以参考这个解决办法。如果有更好的办法，请留言！！！我要学！！！
        borderRadius: 4,
        display: 'ALWAYS',
        bgColor: '#FFFFFF',
        textAlign: 'center',
        anchorY: 0, 
        anchorX: 0,
      }
    }))

槽点：渲染为什么不兼容！！！我都已经用原生了！！！强大的微信开发者们！！！

其余的也不多说了，基本的都能做，自定义的不能做而已。

二、自定义气泡

1.customCallout属性

2. 使用方法

<script></script> 中的使用：

typescript 复制代码

markers.value = cur_ls.map((spot, index) => ({
      id: spot.id,
      latitude: spot.latitude,
      longitude: spot.longitude,
      title: spot.name,
      width: 32,
      height: 32, 
      count: 0,
      iconPath: '这是你的icon资源地址',
      anchor: { x: 0.5, y: 1 },
      customCallout: { // 按照需求设置一下就行
       anchorY: 64,
       anchorX: 0,
       display: 'ALWAYS',
      },
    }))

<template></template> 中的使用：

typescript 复制代码

// 按照需求绘制你的气泡
<cover-view slot="callout">
	<cover-view v-for="item in markers" :key="item.id" :marker-id="item.id">
		// 继续用 cover-view 标签绘制
	</cover-view>
</cover-view>

3. cover-view的使用说明

文档直通车：视图容器/cover-view
【注意】自定义气泡会遇到的问题：

宽度不会自动适应，width: fit-content 这个属性不生效。
- 如果要实现超过某个宽度省略字符，那么你需要自己用 slice(0,n) 截取字符串（和你的需求确认）；
- 如果要实现，自动适应宽度，能告诉你，我没办法，因为我使用 display: inline-block; 之后，遇到下面这个问题（你有更好的解决办法，可以留言讨论）。
宽度自动适应后，地图上渲染不稳定。
- 单个气泡没什么问题；
- 多个气泡同时显示，气泡的宽度会取最长的宽度显示（其实都不是太稳定，但大部分时候都是这样，少数是正常的适应宽度）

三、综上所述

回顾前言的条件：

1.首先明确，你是单个气泡显示，还是多个气泡显示；

2.其次明确，气泡中的内容是多行，还是单行，涉不涉及到更多的图标+文字；

3.再次明确，机型适配要求是否严格（IOS、Android、鸿蒙、PC端）。

原生气泡：
- 单行文字 + 单个气泡显示；
- 单行文字 + 多个气泡显示；
- 不可拓展
自定义气泡：
- 自定义样式 + 单个气泡显示；
- 自定义样式 + 多个气泡显示；
- 可拓展

【注意】

气泡和标记点的显示，都要注意数据量的有多少，超过50个，大部分机型都会卡住（小程序直接卡住）