vue项目实战：原生百度地图api的使用
<!--
* @Description: 百度地图api测试
* @Version: 2.0
* @Autor: lhl
* @Date: 2020-08-13 10:57:27
* @LastEditors: lhl
* @LastEditTime: 2020-08-19 11:42:46
-->
<!-- -->
<template>
<div class="map-content-box">
<h1>百度地图原生语法</h1>
<div id="baidu-map" style="width: 100%;height: 800px;"></div>
</div>
</template>
<script>
export default {
name: 'baiduMapTest',
data() {
//这里存放数据
return {}
},
created() {},
mounted() {
let _this = this;
this.$nextTick(() => {
_this.initMap();
})
},
methods: {
initMap(){
// 创建地图实例 个性化地图遵照官网步骤
const map = new BMap.Map("baidu-map");
// 创建点坐标
const point = new BMap.Point(116.404, 39.915);
// 初始化地图，设置中心点坐标和地图级别
map.centerAndZoom(point, 15);
//开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
// JSAPI商用授权挂件默认开启，关闭需要修改调用JSAPI的代码。方式有两种
map.disableBizAuthLogo(); //关闭
// map.enableBizAuthLogo(); //开启
// 控件类型（百度地图自带的） 自定义控件遵照官网平时比较少用到
// type: BMAP_NAVIGATION_CONTROL_SMALL 平移缩放控件的类型 const opts = {type: BMAP_NAVIGATION_CONTROL_SMALL}
const opts = {anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(100, 10)}; // 偏移量
map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT})); // PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方
map.addControl(new BMap.ScaleControl()); // 默认位于地图左下方，显示地图的比例关系
map.addControl(new BMap.OverviewMapControl()); // 默认位于地图右下方，是一个可折叠的缩略地图
map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT})); // 地图类型
map.addControl(new BMap.CopyrightControl(opts)); // 默认位于地图左下方
map.addControl(new BMap.GeolocationControl(opts)); // 定位 针对移动端开发，默认位于地图左下方
map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用
// 标注（自定义标注图标 默认是类似尖头圆形红点---可以放置自己图片） 默认情况下标注不支持拖拽
const marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.addEventListener("click", function(){
alert("您点击了点标注");
})
// 支持拖拽
marker.enableDragging();
marker.addEventListener("dragend", function(e){
alert("当前位置：" + e.point.lng + ", " + e.point.lat);
})
// 标注折线 自定义这些线段的颜色、粗细和透明度。颜色可以是十六进制数字形式（比如：#ff0000）或者是颜色关键字（比如：red）
const polyline = new BMap.Polyline([
new BMap.Point(116.399, 39.910),
new BMap.Point(116.405, 39.920)
],
{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}
);
map.addOverlay(polyline);
// 提供的信息窗口 自定义信息窗口类 BMapLib.InfoBox
const winOpts = {
width : 200, // 信息窗口宽度
height: 200, // 信息窗口高度
title : "我是百度地图自带的信息窗口" // 信息窗口标题
}
// World是信息窗口内容可以用 const htmlContent = `html模板替换掉或者动态自定义内容`
const infoWindow = new BMap.InfoWindow("World", winOpts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
// 路况图层 添加和移除图层 地图可以包含一个或多个图层，每个图层在每个级别都是由若干张图块组成的
const ctrl = new BMapLib.TrafficControl({
showPanel: false //是否显示路况提示面板
});
map.addControl(ctrl);
ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT);
const traffic = new BMap.TrafficLayer(); // 创建交通流量图层实例
map.addTileLayer(traffic); // 将图层添加到地图上
map.removeTileLayer(traffic); // 将图层移除
// 事件 每个API对象提供了removeEventListener用来移除事件监听函数
map.addEventListener("click", function(e){
alert("点击事件，你点击了一下地图");
console.log(e)
})
map.addEventListener("dragend", function(){
const center = map.getCenter();
alert("地图中心点变更为：" + center.lng + ", " + center.lat);
})
map.addEventListener("zoomend", function(){
alert("地图缩放至：" + this.getZoom() + "级");
})
// 检索POI方法 城市检索、圆形区域检索、矩形区域检索 配置搜索请看官方文档
const local = new BMap.LocalSearch(map, {
renderOptions:{map: map}
});
local.search("天安门"); // 关键字“天安门”检索POI
// 圆形区域检索
const local2 = new BMap.LocalSearch(map,{ renderOptions:{map: map, autoViewport: true}});
local2.searchNearby("小吃", "前门"); // 根据中心点、半径与检索词发起周边检索。当keyword为数组时将同时执行多关键字的检索，最多支持10个关键字
// 矩形区域检索
const local3 = new BMap.LocalSearch(map, { renderOptions:{map: map}});
local3.searchInBounds("银行", map.getBounds());
// 注意：在调用Geocoder.getPoint()方法时您需要提供地址解析所在的城市（本例为“北京市”）。
// 创建地址解析器实例 逆地址解析服务
// 将地址解析结果显示在地图上，并调整地图视野
const myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上，并调整地图视野
myGeo.getPoint("北京市海淀区上地10街10号", function(point){
if (point) {
map.centerAndZoom(point, 16);
map.addOverlay(new BMap.Marker(point));
}
},"北京市")
// 驾车路线规划 DrivingRoute 公交路线规划 TransitRoute 步行路线规划 WalkingRoute 骑行线路规划 RidingRoute
const driving = new BMap.DrivingRoute(map, {
renderOptions: {
map: map,
autoViewport: true
}
})
const start = new BMap.Point(116.310791, 40.003419);
const end = new BMap.Point(116.486419, 39.877282);
driving.search(start, end);
// 全景图
const Panorama = new BMap.PanoramaControl();
Panorama.setOffset(new BMap.Size(200, 20));
map.addControl(Panorama);
// 自定义绘制
const styleOptions = {
strokeColor:"red", //边线颜色。
fillColor:"red", //填充颜色。当参数为空时，圆形将没有填充效果。
strokeWeight: 3, //边线的宽度，以像素为单位。
strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
strokeStyle: 'solid' //边线的样式，solid或dashed。
}
//实例化鼠标绘制工具 画多边形时候画完双击即可停止绘画 更多参考这里：http://lbsyun.baidu.com/index.php?title=jspopular3.0/openlibrary
const drawingManager = new BMapLib.DrawingManager(map, {
isOpen: false, //是否开启绘制模式
enableDrawingTool: true, //是否显示工具栏
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(400, 20), //偏离值
},
circleOptions: styleOptions, //圆的样式
polylineOptions: styleOptions, //线的样式
polygonOptions: styleOptions, //多边形的样式
rectangleOptions: styleOptions //矩形的样式
})
}
},
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>
<!--
* @Description: index.html
* @Version: 2.0
* @Autor: lhl
* @Date: 2020-06-10 15:53:32
* @LastEditors: lhl
* @LastEditTime: 2020-08-21 11:28:34
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 强制360浏览器使用极速模式进行解析页面 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue-elementui</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4zEwemFoHjRbCVmZofeBnuHRGPtC7iVz"></script>
<!-- 路况图层 -->
<link href="//api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
<!-- 在页面的头部应用鼠标绘制工具开源库的文件 百度地图绘制图形 -->
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
</head>
<body>
<div id="app">
</div>
<!-- built files will be auto injected -->
</body>
<!-- 如果你调用百度地图api时，报错可以借鉴： Bmap is not defined ，那么就配置 webpack 配置文件**（webpack.base.conf.js）的module.exports中加个externals：** -->
<!-- HTTPS中调用百度地图API - BMap is not defined 在调用百度地图API的URL中加 &s=1 -->
<!-- 一定要给实例高度不然看不到地图 正常使用都是不会报错的-->
<!-- rem引入问题 -->
<!-- 引入rem之后存在个问题，会导致后期引入的ui库样式变小
安装postcss-px2rem-exclude
npm install postcss-px2rem-exclude --save
因为 postcss-plugin-px2rem 这个插件 配置选项上有 exclude 属性，它可以配置 是否对 某个文件夹下的所有css文件不进行从px到rem的转换。
所以我们可以利用这个特性，把项目中的 node_module 文件夹里面安装的ui框架排除掉。这样如果我们项目中是用了前端UI框架的话，就不会吧UI框（Vant,Element等）中的 px单位转换成rem了
配置exclude选项，需要注意的是这个配置在vue.config.js中式不起作用的，如图。
正确的配置位置是项目根目录下的postcss.config.js文件，如果你的项目没有生成这个独立文件，就需要在你的package.js里设置。
postcss.config.js
module.exports = {
plugins: {
autoprefixer: {},
"postcss-px2rem-exclude": {
remUnit: 75,
exclude: /node_modules|folder_name/i
}
}
};
package.json
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px2rem-exclude":{
"remUnit": 75,
"exclude":"/node_modules|floder_name/i"
}
}
}, -->
<!--
this.$route.params 刷新时值丢失
解决：路由路径中加上 /:参数名（非必传参数后加‘?’, eg: /:id?） -->
</html>
以上代码本人项目实测！！！真实可靠，请勿随意转载~转载请注明出处~~~谢谢合作！
