实现百度地图

一，申请成为百度开发者，获得使用地图API接口的权限，获取（AK）码。

打开网址：http://lbsyun.baidu.com/

然后进行申请账号 和 申请成为百度开发者 的操作 这过程中需要邮箱和身份证进行验证

创建账号完成之后控制台里我的应用，创建应用，里面填写好提交就可以获取到AK码

准备工作已经完成 在使用中只需要将（AK）码 （即密钥）写入代码中即可

二、实现首图效果

编写HTML页面的基础代码

1.引入地图src，并创建一个div，给此div一个大小，此div就是地图显示的窗口

<script type="text/javascript"
        src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I"></script>
    <style type="text/css">
       #container{
           height: 600px;
           width: 800px;
       }
    </style>

2.初始化地图逻辑

var map = new BMapGL.Map("container");          // 创建地图实例 
var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标 
map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别

3.开启鼠标滚轮缩放

map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

4.设置地图的旋转角度和倾斜角度

map.setHeading(64.5);   //设置地图旋转角度
map.setTilt(73);       //设置地图的倾斜角度
 
// 禁止地图旋转和倾斜可以通过配置项进行设置
var map = new BMapGL.Map("allmap",{
    enableRotate: false,
    enableTilt: false
});

至此我们完成了一个完整的地图展示的例子，可以试着在地图区域按住鼠标右键进行拖动，地图的视角和旋转角度会随之改变。

三，绘制点、线、面

添加标注点

如下示例，向地图中心点添加了一个标注，并使用默认的标注样式：

var point = new BMapGL.Point(116.404, 39.915);   
var marker = new BMapGL.Marker(point);        // 创建标注   
map.addOverlay(marker);                     // 将标注添加到地图中

在地图中添加标注

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); 

监听标注事件

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表示地图上的多边形覆盖物，它包含一组点。多边形将这组点按顺序首尾相连，最终围成一个封闭图形。

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的title标签下面添加script 标签

<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I"></script>

等于号后面是你的ak码

2.在项目页面中写入需要的代码

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div id="container" ref="dom"></div>
  </div>
</template>
<style>
#container{
  width: 800px;
  height: 600px;
}
</style>
<script setup>
import {ref,onMounted} from 'vue'
const dom = ref();
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>