vue3大屏项目，自定义高颜值地图，踩坑之旅！

前端

2023-02-06 15:04:30

Vue3 大屏项目中的地图开发：踩坑之旅与自定义指南

序言

在 Vue3 大屏项目中，地图往往扮演着至关重要的角色。然而，地图开发并非易事，在这趟旅程中，我遇到了诸多陷阱和障碍。本文将分享我踩过的坑，并提供详尽的指南，助力你在 Vue3 项目中自定义高颜值地图，避免我曾遭遇的困难。

一、踩坑之旅

1. Marker 自定义

自定义 Marker 样式本应是一件轻而易举的事，但现实并非如此。我苦苦尝试了各种图片路径，却徒劳无功，直到我意识到：Marker 的 Icon 必须是一个图像地址，而不是路径。这一发现让我恍然大悟。

2. Label 自定义

同样，Label 的自定义也让我苦恼不已。我设置了各式各样的内容和样式，但始终无法改变其外观。最终，我发现 Label 的内容必须是一个字符串，而不是对象。这个看似简单的要求却让我浪费了不少时间。

3. InfoBox 自定义

InfoBox 是一个附加在 Marker 上的信息框，我也遇到了类似的自定义问题。尝试了各种设置后，我终于明白 InfoBox 的内容也必须是一个字符串，而不是对象。这一发现再次提醒了我注重细节的重要性。

4. Polyline 自定义

Polyline 用于绘制折线，它也让我经历了自定义的坎坷之路。我不断调整样式，却始终无法改变其外观。最后，我意识到 Polyline 的样式必须是一个对象，而不是字符串。这一认知让我不禁感叹，在开发中，每一个细节都至关重要。

5. DrivingRoute 自定义

DrivingRoute 用于显示驾车路线，它也曾让我头疼不已。无论我如何调整样式，它都始终保持原样。直到我发现 DrivingRoute 的样式也必须是一个对象，而不是字符串，我才恍然大悟，解决了这个困扰我许久的难题。

二、自定义指南

1. Marker

Icon：设置 Marker 的图标为一个图像地址。
大小和位置：通过设置 marker.size 和 marker.position 属性来调整 Marker 的大小和位置。
动画：可以通过 marker.enableAnimation 设置动画效果。

2. Label

内容：设置 Label 的 content 属性为一个字符串，用于显示文本信息。
样式：通过设置 Label 的 style 属性来调整 Label 的外观，包括字体、颜色、大小等。

3. InfoBox

内容：设置 InfoBox 的 content 属性为一个字符串，用于显示信息。
样式：通过设置 InfoBox 的 style 属性来调整 InfoBox 的外观，包括标题、内容、大小等。

4. Polyline

样式：设置 Polyline 的 style 属性为一个对象，用于调整 Polyline 的外观，包括颜色、宽度、透明度等。
路径：通过设置 Polyline 的 path 属性来定义折线路径。

5. DrivingRoute

样式：设置 DrivingRoute 的 style 属性为一个对象，用于调整 DrivingRoute 的外观，包括颜色、宽度、透明度等。
起点和终点：通过设置 DrivingRoute 的 startPosition 和 endPosition 属性来指定起点和终点。

三、代码示例

// 创建一个自定义 Marker
const marker = new BMap.Marker(new BMap.Point(116.404, 39.915), {
  icon: new BMap.Icon('/assets/images/marker.png', new BMap.Size(20, 20))
});

// 创建一个自定义 Label
const label = new BMap.Label('标记', {
  offset: new BMap.Size(20, 20),
  style: {
    color: '#fff',
    fontSize: '12px',
    fontWeight: 'bold'
  }
});

// 创建一个自定义 InfoBox
const infoBox = new BMap.InfoBox(map, '<div>详细的信息</div>', {
  title: '标题',
  width: 200,
  height: 100
});

// 创建一个自定义 Polyline
const polyline = new BMap.Polyline([
  new BMap.Point(116.399, 39.915),
  new BMap.Point(116.405, 39.921)
], {
  strokeColor: '#00ff00',
  strokeWeight: 5,
  strokeOpacity: 0.5
});

// 创建一个自定义 DrivingRoute
const drivingRoute = new BMap.DrivingRoute(map, {
  renderOptions: {
    lineColor: '#0000ff',
    lineWidth: 5,
    opacity: 0.8
  },
  policy: BMAP_DRIVING_POLICY_LEAST_TIME
});