LBS: LocationBusinessServer基于定义位置的商业服务
<script src="https:ilapi.map.baidu.com/api? v=1.0&&type=webgl&ak=你自己的AK"></script>
<div id="container"></div>
var map = new BMap.Map("container"")
var point new BMap.Point(经度，纬度)
map.enableScrollwheelZoom(true);
map.centerAncZoom(point, 15);鼠标滚轮缩放
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#container {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<!-- 准备容器 -->
<div id="container">
</div>
</body>
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=SQ8IFnxBIsbI4eMINne8GZtzK6pBKOMf">
</script>
<script>
//初始化地图
var map = new BMapGL.Map("container")
//准备一个中心点（经度，维度）
var point = new BMapGL.Point(113.665, 34.784);
//设置中心点和缩放级别
map.centerAndZoom(point, 15);
//鼠标滚轮缩放
map.enableScrollWheelZoom(true);
</script>
<ml>1、点
var point = new BmapGL.Marker(point)
2、线
var polyline = new BmapGL.Polyline(点的数组,线的参数)
3、面
var polygon = new BmapGL.Polygon(点的数组,面的参数)
4、圆
var circle = new BmapGL.Circle(点,米半径,圆的参数)
5、标记
new BMapGL.Label(`内容`,{point:位置,offset:new BMapGL.Size(10, -25) }
6、添加叠加
map.addOverlay(点/线/面)
7、移除
map.remveOverLay(点/线/面)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#container {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<!-- 准备容器 -->
<div id="container">
</div>
</body>
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=SQ8IFnxBIsbI4eMINne8GZtzK6pBKOMf">
</script>
<script>
//初始化地图
var map = new BMapGL.Map("container")
//准备一个中心点（经度，维度）
var point = new BMapGL.Point(113.665, 34.784);
//设置中心点和缩放级别
map.centerAndZoom(point, 15);
//鼠标滚轮缩放
map.enableScrollWheelZoom(true);
// 添加一个点
var marker = new BMapGL.Marker(point);
// 添加覆盖物
map.addOverlay(marker);
var line = []
var markers = []
//监听事件
map.addEventListener("click", e => {
// 创建点
var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
// 创建标记
var m = new BMapGL.Marker(p);
markers.push(m)
// 添加标记
map.addOverlay(m);
line.push(p)
// console.log(e);
})
map.addEventListener("dblclick", e => {
// 创建点
line.push(line[0]);
// 创建标记
var polyline = new BMapGL.Polyline(line, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5, strokeStyle: 'dashed' });
// 添加标记
map.addOverlay(polyline);
line = []
markers.forEach(item => map.removeOverlay(item));
markers = []
})
</script>
<ml>result
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#container {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<!-- 准备容器 -->
<div id="container">
</div>
</body>
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=SQ8IFnxBIsbI4eMINne8GZtzK6pBKOMf">
</script>
<script>
//初始化地图
var map = new BMapGL.Map("container")
//准备一个中心点（经度，维度）
var point = new BMapGL.Point(113.665, 34.784);
//设置中心点和缩放级别
map.centerAndZoom(point, 15);
//鼠标滚轮缩放
map.enableScrollWheelZoom(true);
// 添加一个点
var marker = new BMapGL.Marker(point);
// 添加覆盖物
map.addOverlay(marker);
var opts = {
width: 160, // 信息窗口宽度
height: 260, // 信息窗口高度
title: "Hello" // 信息窗口标题
}
var infoWindow = new BMapGL.InfoWindow(`<img src='https://img1.baidu.com/it/u=1513139652,3813067304&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1667322000&t=d46a4401b2e1827104434d4b707a4ab5' width='180',height='180'>`, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
marker.addEventListener("click", e => {
//单击显示
map.openInfoWindow(infoWindow, point)
})
</script>
<ml>result
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#container {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<!-- 准备容器 -->
<div id="container">
</div>
</body>
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=SQ8IFnxBIsbI4eMINne8GZtzK6pBKOMf">
</script>
<script>
//初始化地图
var map = new BMapGL.Map("container")
//准备一个中心点（经度，维度）
var point = new BMapGL.Point(116.404, 39.915);
//设置中心点和缩放级别
map.centerAndZoom(point, 15);
//鼠标滚轮缩放
map.enableScrollWheelZoom(true);
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
map.addControl(cityCtrl);
</script>
<ml>result
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#container {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<!-- 准备容器 -->
<div id="container">
</div>
</body>
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=SQ8IFnxBIsbI4eMINne8GZtzK6pBKOMf">
</script>
<script>
//初始化地图
var map = new BMapGL.Map("container")
//准备一个中心点（经度，维度）
var point = new BMapGL.Point(113.665, 34.784);
//设置中心点和缩放级别
map.centerAndZoom(point, 15);
//鼠标滚轮缩放
map.enableScrollWheelZoom(true);
// 添加一个点
var marker = new BMapGL.Marker(point);
// 添加覆盖物
map.addOverlay(marker);
var label = new BMapGL.Label("前端学习基地", {//创建文本标注
position: point,//设置标注的地理位置
offset: new BMapGL.Size(0, 0) //设置标注的偏移量
})
map.addOverlay(label);//将标注添加到地图中
var circle = new BMapGL.Circle(point, 1000, {
strokeColor: 'green'
})
map.addOverlay(circle);
label.setStyle({
color: "red",
fontSize: "32px",
border: "2px solid #f00"
})
</script>
<ml>result
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#container {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<input type="" onchange="search(this)" />
<!-- 准备容器 -->
<div id="container">
</div>
</body>
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=SQ8IFnxBIsbI4eMINne8GZtzK6pBKOMf">
</script>
<script>
//初始化地图
var map = new BMapGL.Map("container")
//准备一个中心点（经度，维度）
var point = new BMapGL.Point(113.665, 34.784);
//设置中心点和缩放级别
map.centerAndZoom(point, 15);
//鼠标滚轮缩放
map.enableScrollWheelZoom(true);
// 添加一个点
var marker = new BMapGL.Marker(point);
// 添加覆盖物
map.addOverlay(marker);
var local = new BMapGL.LocalSearch(map, {
renderOptions: { map: map }
});
function search(e) {
local.search(e.value)
}
</script>
<ml>result
1. publicindex.htmlscript引入百度地图
2.在组件中定义data
map: null,//地图
point: null，//中心点
marker: null,//标记
keyword:"",//搜索关键字
local:null,//搜索控件
<template>
<div>
<h1>百度地图</h1>
<input type="text" v-model.lazy="keyword">
<div id="map" ref="map"></div>
</div>
</template>
<script>
export default {
data() {
return {
map: null,
point: null,
marker: null,
keyword: '',
local: null
}
},
mounted() {
//为什么第三方api需要加window
//echarts 还是BMapGL都是挂载到window
//如果直接使用在当前的组件里面没有导入这个BMapGL会报错，也会出来，js会向上查找
//基本上第三方组件，都需要在mounted组件渲染完毕后在执行初始化（确保js已经加载完毕
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.map.setHeading(30);
// this.map.setTilt(13);
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>
<style>
#map {
width: 100%;
height: 80vh;
}
</style>