vue3使用百度地图实现个性化地图和轨迹-编程知识

vue3使用百度地图实现个性化地图和轨迹

最终效果如图：
在这里插入图片描述

步骤如下：

一、百度地图在vue3中的引入

1.首先在百度地图开发中心中申请ak（不多介绍）
2.两种引入方式：在 index.html 中直接引入；使用npm导包。（我使用的是npm导包，但是我试了直接引入的，也是可以的）

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=应用AK"></script>

3.若不想带有百度地图水印，可在 index.html 中使用以下代码去掉

 <style type="text/css">.BMap_cpyCtrl {display: none;}</style><style type="text/css">.anchorBL{display:none;}</style>

4.在 index.html 中引入路书和聚合点

  <!-- 路书功能 --><script type="text/javascript" src="https://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script><!-- 聚合点 --><script type="text/javascript" src="//api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script><script type="text/javascript"  src="//api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>

5.index.html页面最终如图：
在这里插入图片描述

二、页面内容

1.一个有宽高的div和自定义信息窗口

 <div style="width: 800px;height: 600px" id="containerGL">...<div ref="customInfoWindow" class="custom-info-window" v-show="showTap">自定义的信息窗口内容{{onedata}}</div>

2.新建异步加载文件并引入页面
我是在api/baidumapApi里新建bmgl.js文件

在这里插入图片描述
bmgl.js内容

const ak = '你的ak'/**
* 异步加载百度地图
* @returns {Promise}
* @constructor
*/
export function loadBaiDuMap() {return new Promise(function (resolve, reject) {try {console.log('BMap is defined:', BMapGL === undefined || BMapGL)resolve(BMapGL)} catch (err) {window.init = function () {resolve(BMapGL)}let script = document.createElement('script')script.type = 'text/javascript'script.src = `http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`script.onerror = rejectdocument.body.appendChild(script)}})
}

在页面引入：

import { loadBaiDuMap } from "@/api/baidumapApi/bmgl.js"

3.自定义图标并创建标注

           //点数据let cityData = ref([{ enitInt: 121.46374, enitLat: 31.22581, name: '人民广场', online: 1 },{ enitInt: 121.44566, enitLat: 31.22389, name: '静安寺', online: 0 },{ enitInt: 121.4832, enitLat: 31.23843, name: '外滩', online: 1 },])// 创建点cityData.value.forEach(item => {let myIcon1 = new BMapGL.Icon('../../../../../src/assets/images/onLine.png', new BMapGL.Size(40, 40));let myIcon2 = new BMapGL.Icon('../../../../../src/assets/images/noOnLine.png', new BMapGL.Size(40, 40));const point = new BMapGL.Point(item.enitInt, item.enitLat)// 创建标注let marker = new BMapGL.Marker(point, { icon: item.online == 1 ? myIcon1 : myIcon2 });// 将标注添加到地图中map.addOverlay(marker)//点击标注事件marker.addEventListener('click', (e: any) => {let infoWindow = new BMapGL.InfoWindow(customInfoWindow.value, {maxWidth: 350,minWidth: 350,closeOnClick: true})marker.openInfoWindow(infoWindow)showTap.value = truelngdata.value = item.enitIntlatdata.value = item.enitLataddrName.value = item.namevedioVisible.value = true})})

4.创建轨迹线

         //轨迹线var paths = [];cityData.value.forEach(item => {const point = new BMapGL.Point(item.enitInt, item.enitLat)paths.push(point)}）//添加折线const polyline = new BMapGL.Polyline(paths,{enableEditing: false,//是否启用线编辑，默认为falseenableClicking: true,//是否响应点击事件，默认为trueicons: [],strokeWeight: '2',//折线的宽度，以像素为单位strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1strokeColor: "#416EBF" //折线颜色});map.addOverlay(polyline);

5.个性化地图样式

去官网上下载自己的个性地图

①登录官网后，点击"控制台–特色服务平台–个性化地图"，在该页面可以找到地图模板，选择适合你需求的模板并发布样式。这样你就能在"我的地图"中找到该地图。
在这里插入图片描述
②复制JSON文件（也可以将JSON文件下载到本地，此方法自行搜索）

③在map里使用

        // 本地个性化地图，通过JSON文件的方式获取var styleJson =[{"featureType": "land","elementType": "geometry","stylers": {"visibility": "on","color": "#091220ff"}
！！！！！                
！！！！！此处json太长，进行了省略，请自行去官网复制
！！！！！},{"featureType": "scenicspots","elementType": "labels.text.stroke","stylers": {"color": "#ffffff00"}}]map.setMapStyleV2({ styleJson: styleJson })

三、最终地图代码

<template>
<div style="width: 100%;height: 100%;" id="containerGL"></div>
<div ref="customInfoWindow" class="custom-info-window" v-show="showTap">{{ addrName }}{{ lngdata }}{{ latdata }}</div>
</template>......onMounted(() => {initMap()
})
//是否展示窗口信息
const showTap = ref(false)
const customInfoWindow = ref(null)
//定义坐标字段
const lngdata = ref('')
const latdata = ref('')
const addrName = ref('')
//点数据
let cityData = ref([{ enitInt: 121.46374, enitLat: 31.22581, name: '人民广场', online: 1 },{ enitInt: 121.44566, enitLat: 31.22389, name: '静安寺', online: 0 },{ enitInt: 121.4832, enitLat: 31.23843, name: '外滩', online: 1 },
])
//初始化地图
function initMap() {// 传入密钥获取地图回调。loadBaiDuMap().then((BMapGL: any) => {// 创建地图实例let map = new BMapGL.Map("containerGL", { enableMapClick: false });// 本地个性化地图，通过JSON文件的方式获取var styleJson =[{"featureType": "land","elementType": "geometry","stylers": {"visibility": "on","color": "#091220ff"}
！！！！！                
！！！！！此处json太长，进行了省略，请自行去官网复制
！！！！！},{"featureType": "scenicspots","elementType": "labels.text.stroke","stylers": {"color": "#ffffff00"}}]map.setMapStyleV2({ styleJson: styleJson })// 添加比例尺控件map.addControl(new BMapGL.ScaleControl({anchor: "BMAP_ANCHOR_BOTTOM_LEFT",offset: new BMapGL.Size(20, -10),}));// 设置地图允许的最大最小级别map.setMinZoom(5)map.setMaxZoom(20)// 添加缩放控件map.addControl(new BMapGL.ZoomControl({anchor: "BMAP_ANCHOR_BOTTOM_RIGHT",offset: new BMapGL.Size(10, 10),}))map.disableDoubleClickZoom() //阻止双击放大// 保存地图map.value = map// 创建点坐标 axios => res 获取的初始化定位坐标const point = new BMapGL.Point(121.46374, 31.22581)// 初始化地图，设置中心点坐标和地图级别map.centerAndZoom(point, 15)//开启鼠标滚轮缩放map.enableScrollWheelZoom(true)//轨迹线var paths = [];cityData.value.forEach(item => {// 创建点let myIcon1 = new BMapGL.Icon('../../../../../src/assets/images/onLine.png', new BMapGL.Size(40, 40));let myIcon2 = new BMapGL.Icon('../../../../../src/assets/images/noOnLine.png', new BMapGL.Size(40, 40));const point = new BMapGL.Point(item.enitInt, item.enitLat)// 创建标注let marker = new BMapGL.Marker(point, { icon: item.online == 1 ? myIcon1 : myIcon2 });paths.push(point)// 将标注添加到地图中map.addOverlay(marker)marker.addEventListener('click', (e: any) => {let infoWindow = new BMapGL.InfoWindow(customInfoWindow.value, {maxWidth: 350,minWidth: 350,closeOnClick: true})marker.openInfoWindow(infoWindow)showTap.value = truelngdata.value = item.enitIntlatdata.value = item.enitLataddrName.value = item.name})})//添加折线const polyline = new BMapGL.Polyline(paths,{enableEditing: false,//是否启用线编辑，默认为falseenableClicking: true,//是否响应点击事件，默认为trueicons: [],strokeWeight: '2',//折线的宽度，以像素为单位strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1strokeColor: "#416EBF" //折线颜色});map.addOverlay(polyline);}).catch((err) => {console.log(err)})
}