一,申请成为百度开发者,获得使用地图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>