在
Vue3项目中
使用百度地图API实现添加多条自定义路径（贴图线）的功能，可以按照以下步骤进行：
1
. **引入
百度地图API**：在
项目的`index
.html`文件中引入
百度地图API。
2
. **创建地图组件**：在
Vue组件中创建一个容器用于显示地图。
3. **初始化地图**：在
Vue组件的生命周期钩子中初始化
百度地图。
4
. **添加自定义路径**：
使用百度地图的`Polyline`类添加多条自定义路径。
以下是一个详细的示例代码：
```html
<!-- index
.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Vue3百度地图示例</title>
<script type="text/
javascript" src="https://api
.map
.baidu
.com/api?v=
3.0&ak=您的密钥"></script>
</head>
<body>
<div id="app"></div>
<!-- 引入
Vue3 -->
<script src="https://unpkg
.com/
vue@
3/dist/
vue.global
.js"></script>
<!-- 引入主应用文件 -->
<script src="src/main
.js"></script>
</body>
</html>
```
```
javascript
// src/main
.js
const { createApp } =
Vue;
createApp({
data() {
return {
map: null,
paths: [
{
points: [
{ lng: 116
.404, lat:
39
.915 },
{ lng: 116
.405, lat:
39
.916 },
{ lng: 116
.406, lat:
39
.917 }
],
color: &#
39;red&#
39;
},
{
points: [
{ lng: 116
.407, lat:
39
.918 },
{ lng: 116
.408, lat:
39
.919 },
{ lng: 116
.409, lat:
39
.920 }
],
color: &#
39;blue&#
39;
}
]
};
},
mounted() {
this
.initMap();
},
methods: {
initMap() {
this
.map = new BMap
.Map("map"); // 创建地图实例
const point = new BMap
.Point(116
.404,
39
.915); // 创建点坐标
this
.map
.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
this
.map
.enableScrollWheelZoom(true); // 启用滚轮放大缩小
this
.paths
.forEach(path => {
const polyline = new BMap
.Polyline(
path
.points
.map(point => new BMap
.Point(point
.lng, point
.lat)),
{ strokeColor: path
.color, strokeWeight: 2, strokeOpacity: 1 }
);
this
.map
.addOverlay(polyline);
});
}
}
})
.mount(&#
39;#app&#
39;);
```
```html
<!-- src/App
.vue -->
<template>
<div id="app">
<div id="map" style="width: 100%; height: 500px;"></div>
</div>
</template>
<script>
export default {
name: &#
39;App&#
39;
};
</script>
<style>
#map {
width: 100%;
height: 500px;
}
</style>
```
在这个示例中，我们首先在`index
.html`中引入了
百度地图API和
Vue3。然后在`main
.js`中创建了一个
Vue应用，并在`mounted`生命周期钩子中初始化了地图。最后，我们
使用`Polyline`类添加了两条自定义路径。
扫一扫
3832
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
