百度地图
LBS：LocationBusinessServer 基于定义位置的商业服务
国内使用该服务的软件主要有：高德地图，百度地图
LBS百度官网网址：百度地图开发平台
基础使用步骤
一、登录注册 获取秘钥AK
然后注测控制台>应用管理>依据页面管理填写相关信息
具体步骤：
二、引入百度地图JS
<script src="https://api.map.baidu.com/api?v=1.0&&type=webg&ak=你自己的AK"></script>
三、创建地图容器
注意：需要给容器设置基本的样式，宽高
<div id='container'></div>
四、初始化地图
var map =new BMapGL.Map('container')//初始化地图
五、创建一个地图中心点
var point =new BMap.Point(经度，维度)
六、设置中心点和滚轮缩放
map.centerAndZoom(point,15)
// 鼠标缩放
map.enableScrollWheelZoom(true)
在以上基础上根据官网写一些小案例
tips：一下代码均可在官方文档查询，建议直接复制官网的，然后进行下一步优化
添加地图控制器
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
map.addControl(cityCtrl);
效果图
绘制地图标注
向地图中添加标注
如下示例，向地图中心点添加了一个标注，并使用默认的标注样式：
var point = new BMapGL.Point(116.404, 39.915);
var marker = new BMapGL.Marker(point); // 创建标注
map.addOverlay(marker);
向地图中添加标注
定义标注图标 通过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);
监听标注事件
JSAPI支持监听覆盖物的事件。
marker.addEventListener("click", function(){
alert("您点击了标注");
});
点击生成多个标注，点击最后一个标注将前面的标注连接成线或者面
扫描二维码关注公众号，回复： 14778412 查看本文章
添加折线
首先参考展示地图创建基本地图，之后添加折线覆盖物到地图中。折线覆盖物可以分别设置描边粗细、颜色、填充颜色等属性。
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);
自己写入项目可以这样写
添加多边形
首先参考展示地图创建基本地图，之后添加多边形覆盖物到地图中。多边形覆盖物可以分别设置描边粗细、颜色、填充颜色等属性。
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);
圆形
// 绘制圆
var circle = new BMapGL.Circle(point, 2000, {
strokeColor: "green" });
// 添加圆
map.addOverlay(circle);
绘制信息窗口
向地图中添加信息窗口
语法
var opts = {
width: 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title: "Hello" // 信息窗口标题
}
var infoWindow = new BMapGL.InfoWindow("World", opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
案例代码
// 信息窗口
var opts = {
width: 250, // 信息窗口宽度
height: 400, // 信息窗口高度
title: "学好前端，月薪过万" // 信息窗口标题
}
// 创建信息窗口对象
var infoWindow = new BMapGL.InfoWindow(`<p>前端学的soeasy只有<b>js</b></p><img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.2bREZUyfCjz4t9NRYPGOFAHaLR?w=202&h=308&c=7&r=0&o=5&pid=1.7">`, opts);
// 打开信息窗口
map.openInfoWindow(infoWindow, point);
marker.addEventListener('click', e => {
// 单击显示
map.openInfoWindow(infoWindow, point);
})
效果图
点击按钮显示和隐藏
地图搜索（既可以写在html也可以写在vue文件里面当然步骤获取路由不同）
html里面
在body除了一个容器外还需要一个输入框用于搜索
并绑定onchange事件或者oninput事件，个人推荐onchange事件
<input type="text" onchange="search(this)">
var local = new BMapGL.LocalSearch(map, {
renderOptions: {
map: map }
})
function search(e) {
// 表单值发生变化的时候进行搜索
local.search(e.value)
}
效果图：
Vue的地图搜索
首先在public文件包里面的index.html添加个百度地图链接
<script src="https://api.map.baidu.com/api?v=1.0&&type=webg&ak=你自己的AK"></script>
一般设置完这个选项后需要重新重启下服务器
页面代码
<template>
<div>
<h1>百度</h1>
<input type="text" v-model.lazy="keyword" />
<div id="map" ref="map"></div>
</div>
</template>
<style lang="scss" scoped>
#map {
width: 100%;
height: 80vh;
}
</style>
<script>
export default {
data() {
return {
map: null,
point: null,
marker: null,
keyword: "",
local: null,
};
},
mounted() {
this.map = new window.BMapGL.Map(this.$refs.map);
this.point = new window.BMapGL.Point(113.665, 34.784);
this.map.centerAndZoom(this.point, 15);
this.map.enableScrollWheelZoom(true);
this.marker = new window.BMapGL.Marker(this.point);
// 添加覆盖物
this.map.addOverlay(this.marker);
this.local = new window.BMapGL.LocalSearch(this.map, {
renderOptions: {
map: this.map },
});
},
watch: {
keyword: {
handler() {
if (this.keyword === "") {
// 为空就清除
this.local.clearResults();
// 缩放到中心点
this.map.centerAndZoom(this.point, 15);
} else {
this.local.search(this.keyword);
}
},
},
},
};
</script>
效果图和上面的差不多
结束语
基本用发就这样具体的类名控制可以查看参考类官方文档讲解的很详细