闲来无事，实现一下百度地图~
一，申请成为百度开发者，获得使用地图API接口的权限，获取（AK）码。
然后进行申请账号 和 申请成为百度开发者 的操作 这过程中需要邮箱进行验证
创建账号完成之后 获取到AK码
准备工作已经完成 在使用中只需要将（AK）码 （即密钥）写入代码中即可
二、实现首图效果（可以参考开发者指南）
编写HTML页面的基础代码
1，在这一步我们完成头部文件和地图容器样式的编写，让地图容器充满网页。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Baidu Map </title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
</head>
<body>
</body>
</html>2，引入百度地图API文件
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>3，初始化地图逻辑
首先创建地图实例，之后用一个Point坐标点和缩放级别来初始化地图
var map = new BMapGL.Map("container"); // 创建地图实例
var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别4，开启鼠标滚轮缩放
地图的鼠标滚轮缩放默认是关闭的，需要配置开启。
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放5，设置地图的旋转角度和倾斜角度
地图可以自定义旋转角度和倾斜角角度
map.setHeading(64.5); //设置地图旋转角度
map.setTilt(73); //设置地图的倾斜角度
// 禁止地图旋转和倾斜可以通过配置项进行设置
var map = new BMapGL.Map("allmap",{
enableRotate: false,
enableTilt: false
});至此我们完成了一个完整的地图展示的例子，可以试着在地图区域按住鼠标右键进行拖动，地图的视角和旋转角度会随之改变。
三，绘制点、线、面
添加标注点
Marker是一个用来往地图上添加点标记的类。使用它将任何你希望用户看到的兴趣点标注在地图上。
API提供了默认图标样式，您也可以通过Icon类来指定自定义图标。Marker的构造函数的参数为Point和MarkerOptions（可选）。
注意：当您使用自定义图标时，标注的地理坐标点将位于标注所用图标的中心位置，您可通过Icon的offset属性修改标定位置。
1，参考展示地图创建基本地图
2，向地图中添加标注
如下示例，向地图中心点添加了一个标注，并使用默认的标注样式：
var point = new BMapGL.Point(116.404, 39.915);
var marker = new BMapGL.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中3，
向地图中添加标注
定义标注图标 通过Icon类可实现自定义标注的图标，下面示例通过参数MarkerOptions的icon属性进行设置，您也可以使用marker.setIcon()方法。
var myIcon = new BMapGL.Icon("markers.png", new BMapGL.Size(23, 25), {
// 指定定位位置。
// 当标注显示在地图上时，其所指向的地理位置距离图标左上
// 角各偏移10像素和25像素。您可以看到在本例中该位置即是
// 图标中央下端的尖角位置。
anchor: new BMapGL.Size(10, 25),
// 设置图片偏移。
// 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
// 需要指定大图的偏移位置，此做法与css sprites技术类似。
imageOffset: new BMapGL.Size(0, 0 - 25) // 设置图片偏移
});
// 创建标注对象并添加到地图
var marker = new BMapGL.Marker(point, {icon: myIcon});
map.addOverlay(marker);4，监听标注事件
JSAPI支持监听覆盖物的事件。
marker.addEventListener("click", function(){
alert("您点击了标注");
});添加折线
Polyline表示地图上的折线覆盖物，它包含一组点，并将这些点连接起来形成折线。
var polyline = new BMapGL.Polyline([
new BMapGL.Point(116.399, 39.910),
new BMapGL.Point(116.405, 39.920),
new BMapGL.Point(116.425, 39.900)
], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polyline);添加多边形
Polygon表示地图上的多边形覆盖物，它包含一组点。多边形将这组点按顺序首尾相连，最终围成一个封闭图形。
1，添加多边形
首先参考展示地图创建基本地图，之后添加多边形覆盖物到地图中。多边形覆盖物可以分别设置描边粗细、颜色、填充颜色等属性。
var polygon = new BMapGL.Polygon([
new BMapGL.Point(116.387112,39.920977),
new BMapGL.Point(116.385243,39.913063),
new BMapGL.Point(116.394226,39.917988),
new BMapGL.Point(116.401772,39.921364),
new BMapGL.Point(116.41248,39.927893)
], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polygon);四，如何在VUE中使用
1.在vue项目中的public文件中的index.html添加script 如图：
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<script
type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I"
></script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>2.在项目页面中写入需要的代码
<template>
<div class="about">
<div id="container" ref="dom"></div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
//声明dom引用对象
const dom = ref();
//声明map地图
let map;
//挂载完毕后创建地图的实例
onMounted(() => {
map = new window.BMapGL.Map(dom.value);
var point = new window.BMapGL.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);
map.setMapType(window.BMAP_EARTH_MAP);
})
</script>
<style type="text/css">
#container {
height: 800px;
width: 1000px;
}
</style>更多内容请参考:jspopularGL | 百度地图API SDK