1500字范文 > 百度地图的使用方法如何在Vue项目中使用百度地图

百度地图的使用方法如何在Vue项目中使用百度地图

时间：2021-08-13 14:50:24

关于百度地图的解释

百度地图又称LBS：LocationBussinessServer，是基于定义位置的商业服务，现在常用的地图有百度地图和高德地图居多

官网入口

/apiconsole/center#/home

使用百度地图的步骤

第一步：登陆注册，获取密钥AK（需要自行注册百度地图，实名认证后创建获得）

第二步：引入百度地图js

<script src="https://api./api?v=1.0&&type=webgl&ak='自己的密钥'"></script>

第三步：创建地图的容器

<div id="container"></div>

第四步：初始化地图

var map = new BMapGL.Map("container");

第五步：创建一个地图中心点

var point = new BMapGL.Point(116.404, 39.915);

第六步：设置中心点和滚轮缩放

map.centerAndZoom(point, 15);map.enableScrollWheelZoom(true);

全部代码

<!DOCTYPE html><html lang="en"><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"><title>Document</title><style>#container {width: 800px;height: 600px;}</style></head><body><div id="container"></div></body><script src="https://api./api?v=1.0&&type=webgl&ak=aEGXvr6KLo5v40cLlaCrPvZ0AKEOd18O"></script><script>//初始化地图var map = new BMapGL.Map("container");//准备一个中心点（经纬度）var point = new BMapGL.Point(116.404, 39.915);//设置中心点和缩放级别map.centerAndZoom(point, 15);//鼠标滚轮缩放map.enableScrollWheelZoom(true);</script></html>

运行效果图：

丰富百度地图上的内容

添加地图控制器

var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件map.addControl(scaleCtrl);var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件map.addControl(zoomCtrl);var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件map.addControl(cityCtrl);

地图上绘制内容

点

<!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><div id="container"></div></body><script src="https://api./api?v=1.0&&type=webgl&ak=aEGXvr6KLo5v40cLlaCrPvZ0AKEOd18O"></script><script>// var point = new BMap.Point(113.665,34.784);var map = new BMapGL.Map("container");// 创建地图实例 var point = new BMapGL.Point(113.665, 34.784); // 创建点坐标 map.centerAndZoom(point, 15);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 marker = new BMapGL.Marker(point);map.addOverlay(marker);map.addEventListener("click", e => {var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);var m = new BMapGL.Marker(p);map.addOverlay(m);console.log(e);})</script></html>

效果截图：

线

<!DOCTYPE html><html lang="en"><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"><title>Document</title><style>html {height: 100%}body {height: 100%;margin: 0px;padding: 0px}#container {height: 100%}</style></head><body><div id="container"></div></body><script src="https://api./api?v=1.0&&type=webgl&ak=aEGXvr6KLo5v40cLlaCrPvZ0AKEOd18O"></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 => {//把第0个点放到最后边line.push(line[0]);//创建多边形var polyline = new BMapGL.Polyline(line, {strokeStyle: "dashed", strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 });//添加线map.addOverlay(polyline);//清空点的列表line = [];//清空点markers.forEach(item => map.removeOverlay(item));markers = [];})</script></html>

运行截图：（线的类型和颜色可以自己控制）

面

<!DOCTYPE html><html lang="en"><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"><title>Document</title><style>html {height: 100%}body {height: 100%;margin: 0px;padding: 0px}#container {height: 100%}</style></head><body><div id="container"></div></body><script src="https://api./api?v=1.0&&type=webgl&ak=aEGXvr6KLo5v40cLlaCrPvZ0AKEOd18O"></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 => {//把第0个点放到最后边line.push(line[0]);//创建多边形var polygone = new BMapGL.Polygon(line, {fillColor: "blue", strokeStyle: "dashed", strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 });//添加线map.addOverlay(polygone);//清空点的列表line = [];//清空点markers.forEach(item => map.removeOverlay(item));markers = [];})</script></html>

运行截图：（面的颜色可以自己控制）

绘制圆

//绘制圆圈var circle = new BMapGL.Circle(point, 2000, {strokeColor: "blue", });//添加圆圈map.addOverlay(circle);

运行截图：（颜色可以自己控制）

添加标注

//添加标注// var content = "label";var label = new BMapGL.Label("中国前端学习基地", {// 创建文本标注position: point,// 设置标注的地理位置offset: new BMapGL.Size(0, 0) // 设置标注的偏移量})map.addOverlay(label); // 将标注添加到地图中label.setStyle({fontSize: "32px",color: "red"})

运行截图：

添加信息窗口

//信息窗口var infoWindow = new BMapGL.InfoWindow(`<p>前端很简单，只有<strong>javascript,jquery</strong></p><img src="/image_search/src=http%3A%2F%%2Fq_70%2Fimages03%2F0911%2Fbe6fde8058e8407c8a8f9c64e6391519.jpeg&refer=http%3A%2F%&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669788564&t=84a66cf92e8a60210b4f39a33003c812" width="200">`, opts); // 创建信息窗口对象map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口//map.getCenter()获取到地图的中心位置marker.addEventListener("click", e => {//单击显示map.openInfoWindow(infoWindow, map.getCenter());})

运行截图：（这里添加了一个p标签和一张图片）

搜索

运行截图：（当在输入框输入内容，会搜索对应的关键字）

移除覆盖物

map.removeOverlay(覆盖物)

地图的事件

map.addEventListener("click", e => {})map.addEventListener("dblclick", e => {})

注意：所有的覆盖物都可以添加事件

在Vue项目中使用百度地图

第一步：public/index.html引入

第二步：在组件中定义data

data() {return {map: null,//地图point: null,//中心点marker: null,//标记keyword: "",//关键字local: null,//搜索控件};},

第三步：mounted初始化项目

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

这里需要注意：

为什么第三方api需要加window呢？

答：echarts还是BMapGL都是挂载到window上的，如果直接使用早当前的组件里面没有导入这个BMapGL会报错（效果也会有，js会向上查找），基本上第三方组件，都需要在mounted组件渲染完毕后在执行初始化（确保js已经加载完毕）

第四步：监听数据变化，更新地图

watch: {keyword: {handler() {if (this.keyword == "") {//如果为空就清除搜索this.local.clearResults();//缩放到中心点this.map.centerAndZoom(this.point, 15);} else {this.local.search(this.keyword);}},},},