百度地图开放平台是面向广大政府、企业、互联网等开发者开放地图服务的平台。百度地图开放平台。若想使用高德地图,请查看文章Vue+高德地图api。
推荐使用vue-element-admin作为模板,这一步骤就不多阐述。
在index.html中引入。
要注意版本,不同版本的方法会有所不同,这里使用v3.0。
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的秘钥"></script>
config.js配置webpack,此操作是为了优化打包,减少体积。在externals中添加百度地图即可
创建一个新的组件
<template>
<div>
<!-- 必须要设置div的高度 -->
<div id="map" style="height: 810px;" />
</div>
</template>
<script>
// 引入百度地图
import BMap from 'BMap'
export default {
name: '',
data() {
return {
map: '',
mapZoom: 14
}
},
created() {
this.$nextTick(() => {
this.initMap()
})
},
methods: {
// 初始化
initMap() {
// 创建Map实例
this.map = new BMap.Map('map')
// 初始化地图,设置中心点坐标和地图级别
this.map.centerAndZoom(new BMap.Point(104.072242, 30.663711), this.mapZoom)
// 设置地图显示的城市 此项是必须设置的
this.map.setCurrentCity('成都')
// 启用滚轮放大缩小,默认禁用
this.map.enableScrollWheelZoom(true)
// 启用地图惯性拖拽,默认禁用
this.map.enableContinuousZoom(true)
}
}
</script>
<style>
// 这个样式可以去除地图底部logo
.anchorBL{
display:none;
}
</style>
这样简单的百度地图示例已经完成。
按照上述步骤已经对百度地图进行初始化,并把实例赋值给map,然后就可以使用this.map来调用百度地图的方法。
在初始化的方法中,加入事件即可。
this.map.addEventListener('click', (data) => {
// point包含了经纬度
console.log(data.point)
})
this.map.addEventListener("zoomend", (type) => {
})
// 创建一个自定义图片的点覆盖物
addMarker() {
// 添加图片
var myIcon = new BMap.Icon("图片地址", new BMap.Size(50, 50))
// 创建点
var ponit = new BMap.Point(104.072242, 30.663711)
// 创建标记
var marker = new BMap.Marker(ponit, {
icon: myIcon})
// 在地图上添加点标记
this.map.addOverlay(marker)
}
// 创建线覆盖物
addPolygon() {
const point = [
new BMap.Point(116.387112, 39.920977),
new BMap.Point(116.385243, 39.913063),
new BMap.Point(116.394226, 39.917988),
new BMap.Point(116.401772, 39.921364),
new BMap.Point(116.41248, 39.927893)
]
var polyline = new BMap.Polyline(point, {
// 颜色
strokeColor: "blue",
// 宽度
strokeWeight: 2,
// 透明度
strokeOpacity: 0.5,
});
}
效果图
添加完点标记后,可以再设置一个信息窗口
// 接着上面代码
marker.addEventListener('click', () => {
var opts = {
width: 200,
height: 150,
title: '基本信息'
}
var html = `<div>
<p>单位名称:${
item.name}</p>
<p>联系电话${
item.contactInformation}</p>
<p>单位地址:${
item.enterpriseAddressDetails}</p>
</div>`
var infoWindow = new BMap.InfoWindow(html, opts)
this.map.openInfoWindow(infoWindow, ponit)
})
removeOverlay() {
this.map.clearOverlays()
}
1.创建一个点,然后清除。removeOverlay方法的参数是一个覆盖物对象,想要清除多个时,需要用把覆盖物放在数组里,然后循环清除。注意new BMap.Marker()方法相当于每次创建了一个新的对象,所以并不能通过同一个坐标新建一个marker来删除之前的。
// 创建一个标记
var ponit = new BMap.Point(104.072242, 30.663711)
var marker = new BMap.Marker(ponit)
this.map.addOverlay(marker)
// 清除一个标记
this.map.removeOverlay(marker)
其他覆盖物同理,比如创建一个圆,然后清除
var circle = new BMap.Circle(point, 2000, {
fillColor: "blue",
strokeWeight: 1,
fillOpacity: 0.2,
strokeOpacity: 0.3,
})
this.map.addOverlay(circle)
this.map.removeOverlay(circle)
2.发现有一些覆盖物用上述方法并不能删除,如路书中的icon。
const moveMarker = new BMap.Icon(
img,
{
widht: 30, height: 36 },
{
anchor: new BMap.Size(15, 36) }
);
// 创建路书
const lushu = new BMapLib.LuShu(this.centerMap, point, {
defaultContent: "标题",
icon: moveMarker,
// 米/秒
speed: 300,
// 是否自动调整视野
autoView: false,
// 是否开启走路旋转
enableRotation: false,
landmarkPois: [],
});
使用this.map.addOverlay(moveMarker)
发现没有删除。我们可以通过自己加一些自定义属性来删除。
const moveMarker = new BMap.Icon(
img,
{
widht: 30, height: 36 },
{
anchor: new BMap.Size(15, 36) }
);
// 加入一个自定id并赋值
moveMarker.id = "123456";
// 创建路书
const lushu = new BMapLib.LuShu(this.centerMap, point, {
defaultContent: "标题",
icon: moveMarker,
// 米/秒
speed: 300,
// 是否自动调整视野
autoView: false,
// 是否开启走路旋转
enableRotation: false,
landmarkPois: [],
});
// 获取当前地图上所有的覆盖物
const overlays = this.map.getOverlays();
overlays.forEach((item) => {
// 循环寻找上面添加的指定id(属性较多,而且可能不一定是K这个变量,需要仔细找一下)
if (item.K && item.K.Be && item.K.Be.id === "123456") {
this.map.removeOverlay(item);
}
});
const geoc = new BMap.Geocoder()
const ponit = new BMap.Point(104.072242, 30.663711)
geoc.getLocation(ponit, (res) => {
console.log(res.address)
})
通过搜索城市名称,然后定位所选城市
// 创建城市选择控件
const cityControl = new BMap.CityListControl({
/*
控件的停靠位置(可选,默认左上角)
BMAP_ANCHOR_TOP_RIGHT 右上角
BMAP_ANCHOR_BOTTOM_LEFT 左下角
BMAP_ANCHOR_BOTTOM_RIGHT 右下角
*/
anchor: BMAP_ANCHOR_TOP_LEFT,
// 控件基于停靠位置的偏移量(可选)
offset: new BMap.Size(10, 5)
})
// 将控件添加到地图上
this.map.addControl(cityControl)
效果如图
在地图初始化的时候添加一个地址检索
<!-- 地图容器 -->
<div id="caseMap" style="width: 100%; height: 370px" />
<!-- 检索地址容器 -->
<div id="r-result" style="float: left; margin-top: -370px">
<el-input
style="width: 350px"
size="mini"
type="text"
id="suggestId"
v-model="city"
>
<template slot="prepend">请输入:</template>
</el-input>
</div>
initMap() {
const self = this
// 创建Map实例
this.map = new BMap.Map('map')
// 初始化地图,设置中心点坐标和地图级别
this.map.centerAndZoom(new BMap.Point(104.072242, 30.663711), this.mapZoom)
// 设置地图显示的城市 此项是必须设置的
this.map.setCurrentCity('成都')
// 启用滚轮放大缩小,默认禁用
this.map.enableScrollWheelZoom(true)
// 启用地图惯性拖拽,默认禁用
this.map.enableContinuousZoom(true)
//建立一个自动完成的对象
var ac = new BMap.Autocomplete({
// 输入框的id
input: "suggestId",
location: this.map,
})
ac.addEventListener("onhighlight", function (e) {
//鼠标放在下拉列表上的事件
})
ac.addEventListener("onconfirm", function (e) {
//鼠标点击下拉列表后的事件
var _value = e.item.value;
// 拼装的地址信息
var myValue =
_value.province +
_value.city +
_value.district +
_value.street +
_value.business;
self.setPlace(myValue);
})
}
setPlace(e) {
const self = this;
this.map.clearOverlays(); //清除地图上所有覆盖物
// 创建一个检索对象
var local = new BMap.LocalSearch(self.map, {
//智能搜索
onSearchComplete: function () {
var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
// 获取的经纬度根据自己业务赋值
// self.dataForm.address = e;
// self.dataForm.longitude = pp.lng;
// self.dataForm.latitude = pp.lat;
self.map.centerAndZoom(pp, 18);
self.map.addOverlay(new BMap.Marker(pp)); //添加标注
},
});
local.search(e);
},
效果图
Tip如果是在<el-dialog />
组件中使用搜索时,需要注意搜索提示会没有,这是因为被挡住了。我们通过F12是可以看到的。这时候就需要把提示框的z-index设置大一些就行了。
.tangram-suggestion-main {
z-index: 9999;
}
<!-- 放搜索结果 -->
<div id="r-result" style="position: fixed; top: 100px; right: 5px"></div>
var walking = new BMap.WalkingRoute(this.centerMap, {
renderOptions: {
map: this.centerMap,
/*
* 这里是百度地图的检索路线结果面板,在html中写一个div用于展示,panel的值为div的id。
* 有些时候我们可能不需要过多的信息,这时可以用onSearchComplete方法自定义一个面板。
*/
panel: "r-result",
// 是否选择第一个检索结果
selectFirstResult: true,
// 检索结束后是否自动调整地图视野
autoViewport: true
},
// 检索完成后回调
onSearchComplete: function(results){
if (walking.getStatus() != BMAP_STATUS_SUCCESS){
return
}
// 获取第一个路线
var plan = results.getPlan(0)
// 获取时间
plan.getDuration(true)
// 获取距离
plan.getDistance(true)
}
})
var start = new BMap.Point(116.310791, 40.003419)
var end = new BMap.Point(116.326419, 40.003519)
walking.search(start, end)
效果图
代码跟步行类似,只需把new BMap.WalkingRoute()换成new BMap.DrivingRoute()即可。
1.首先在index.html页面引入路书js文件
<script type="text/javascript" src="https://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
2.创建路书
// 假设points是从后端请求的经纬度数据
const points = [
{
lng: 116.387112, lat: 39.920977},
{
lng: 116.385243, lat: 39.913063},
.....
]
const point = []
points.forEach(item => {
point.push(new BMap.Point(item.lng, item.lat))
}
// 添加线覆盖物当做路线
var polyline = new BMap.Polyline(point, {
strokeColor: "blue",
strokeWeight: 2,
strokeOpacity: 0.5,
});
this.centerMap.addOverlay(polyline);
// this.centerMap 创建的地图实例
// point 坐标数组,必须是用new BMap.Point()创建的坐标数组
// opts 自定义设置
var lushu = new BMapLib.LuShu(this.centerMap, point, {
// 标题
defaultContent: "运动轨迹",
// 图标
icon: "",
// 速度,单位米/秒
speed: 300,
// 是否自动调整视野
autoView: true,
// 是否开启走路旋转
enableRotation: true,
// 特殊点信息。如果没有特殊点直接放个空数组也可以,不设置参数貌似会报错
landmarkPois: [],
});
lushu.start();
3.方法
// 启动运动
lushu.start();
// 暂停运动
lushu.pause();
// 结束运动
lushu.stop();
效果图
当点的数量过多时,会造成浏览器卡顿,使用点聚合可以有效解决该问题。点聚合的使用也很简单,首先在index页面引入点聚合工具开源库的文件
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
使用
// 模拟一些点
const markers = [
new BMap.Marker(new BMap.Point(116.387112, 39.920977)),
new BMap.Marker(new BMap.Point(116.385243, 39.913063)),
new BMap.Marker(new BMap.Point(116.394226, 39.917988)),
new BMap.Marker(new BMap.Point(116.401772, 39.921364)),
new BMap.Marker(new BMap.Point(116.41248, 39.927893)),
]
// markerClusterer是点聚合工具的对象,全局使用。this.map是地图对象
this.markerClusterer = new BMapLib.MarkerClusterer(this.map, {
markers: markers,
});
效果
放大后可展示具体点位
// 清除所有
this.markerClusterer.clearMarkers()
// 清除一个marker
this.markerClusterer.removeMarker(marker)
// 清除多个,这时候参数为marker数组
this.markerClusterer.removeMarkers(markers)
<script type="text/javascript" src="//api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
this.heatmapOverlay = new BMapLib.HeatmapOverlay({
radius: 20,
});
this.map.addOverlay(this.heatmapOverlay);
// point数据格式,lat纬度,lng经度,count热力值,就算为1好像页面上也会自动显示热力层级
// 假设从后端取回数据result
result.forEach(item => {
point.push({
lat: item.latitude,
lng: item.longitude,
count: 1,
});
})
this.heatmapOverlay.setDataSet({
// 热力值的最大值
max: 5,
// 热力图的详细数据
data: point,
});
this.heatmapOverlay.show();
// 隐藏
this.heatmapOverlay.hiden();
// 删除
this.map.removeOverlay.(this.heatmapOverlay);
(1)使用百度地图自带的方法进行转换坐标转换文档
var x = 116.32715863448607
var y = 39.990912172420714
var convertor = new BMap.Convertor()
var pointArr = []
var ggPoint = new BMap.Point(x,y)
pointArr.push(ggPoint)
convertor.translate(pointArr, 3, 5, function(data) {
if(data.status === 0) {
// 业务代码
}
})
translate方法的第一个参数为Point类型的数组,第二个参数是源坐标类型,第三个参数是目标坐标类型,第四个是回调函数(坐标类型在文档中有详细说明)。
需要注意的是方法在批量转换坐标时是有上限的,这里推荐使用coordtransform模块,用法很简单。
先用npm安装npm install coordtransform,创建一个js工具类,引入coordtransform就可以使用了。
import coordtransform from 'coordtransform'
// 火星坐标转百度经纬度坐标
export function gcj02tobd09(x, y) {
return coordtransform.gcj02tobd09(x, y)
}
文章浏览阅读1.3k次。# -*- coding: utf-8 -*-"""@File : 200113_等比例调整图像分辨率大小.py@Time : 2020/1/13 13:38@Author : Dontla@Email : [email protected]@Software: PyCharm"""import cv2def img_resize(image):height, width = image...._opencv小图等比例缩放
文章浏览阅读42次。对于这些调制技术的误码率(BER)研究是非常重要的,因为它们可以帮助我们了解在不同信道条件下系统的性能表现。通过以上步骤,您可以进行OFDM、OOK、PPM和QAM的误码率仿真研究,并绘制它们的误码率曲线,以便更好地了解它们在不同信道条件下的性能特点。针对这些调制技术的BER研究是非常重要的,可以帮助我们更好地了解这些技术在不同信道条件下的性能表现,从而指导系统设计和优化。6. 分析结果:根据误码率曲线的比较,分析每种调制方案在不同信噪比条件下的性能,包括其容忍的信道条件和适用的应用场景。_ber仿真
文章浏览阅读2.5w次,点赞3次,收藏3次。1、场景照抄官方的实例,绑定了 myData.Age 这个值。实际选择某个日期后,从 vuetool(开发工具)看,值已经更新了,但视图未更新。2、尝试绑定另一个值: myData,可以正常的触发 @change 方法。可能是:值绑定到子对象时,组件没有侦测到。3、解决使用 @blur 代替 @change 方法。再判断下 “值有没有更新” 即可。如有更好的方法,欢迎评论!..._el-date-picker @change不触发
文章浏览阅读1.5k次,点赞2次,收藏8次。Projectlnliersclass pcl: : Projectlnliers< PointT >类 Projectlnliers 使用一个模型和一组的内点的索引,将内点投影到模型形成新的一个独立点云。关键成员函数 void setModelType(int model) 通过用户给定的参数设置使用的模型类型 ,参数 Model 为模型类型(见 mo..._projectinliers
文章浏览阅读2.4k次。“System.BadImageFormatException”类型的未经处理的异常在 xxxx.exe 中发生其他信息: 未能加载文件或程序集“xxxxxxx, Version=xxxxxx,xxxxxxx”或它的某一个依赖项。试图加载格式不正确的程序。此原因是由于 ” 目标程序的目标平台与 依赖项的目标编译平台不一致导致,把所有的项目都修改到同一目标平台下(X86、X64或AnyCPU)进行编译,一般即可解决问题“。若果以上方式不能解决,可采用如下方式:右键选择配置管理器,在这里修改平台。_“system.badimageformatexception”类型的未经处理的异常在 未知模块。 中发生
文章浏览阅读2.4k次。记录一下碰到的问题:1.Assetbundle加载问题: 原PC打包后的AssetBundle导入安卓工程后,加载会出问题。同时工程打包APK时,StreamingAssets中不能有中文。解决方案: (1).加入PinYinConvert类,用于将中文转换为拼音(多音字可能会出错,例如空调转换为KongDiao||阿拉伯数字不支持,如Ⅰ、Ⅱ、Ⅲ、Ⅳ(IIII)、Ⅴ、Ⅵ、Ⅶ、Ⅷ、Ⅸ、Ⅹ..._电脑软件移植安卓
文章浏览阅读2.4k次。话不多说参考书籍 汪文君补充知识:start是异步,run是同步,start的执行会经过JNI方法然后被任务执行调度器告知给系统内核分配时间片进行创建线程并执行,而直接调用run不经过本地方法就是普通对象执行实例方法。什么是线程?1.现在几乎百分之百的操作系统都支持多任务的执行,对计算机来说每一个人物就是一个进程(Process),在每一个进程内部至少要有一个线程实在运行中,有时线..._start 是同步还是异步
文章浏览阅读5.3k次,点赞9次,收藏34次。我主要用了层次选择器和属性选择器可以随意选择,方便简单为主大体CSS格式 大家自行构造网页主体<body> <div class='main' > <div class='left'> <img src="images/pic.gif" /> <br/><br/> <img src="images/col.gif" alt="收藏本片"/&_单击标题“非缘勿扰”,元素中有id属性的的文本(主演、导演、标签、剧情
文章浏览阅读2.2k次。完整的解决思路_no module named 'win32com
文章浏览阅读901次,点赞20次,收藏23次。浏览器是每台电脑的必装软件,去浏览器搜索资源和信息已经成为我们的日常,我媳妇儿原本也以为浏览器就是上网冲浪而已,哪有那么强大,但经过我的演示之后她惊呆了,直接给我竖起大拇指道:“原来浏览器还能这么用?大开眼界!今天来给大家介绍几款实用的浏览器插件,学会之后让你的浏览器“活过来”!_浏览器插件助手
文章浏览阅读101次。NumPy是Python中最常用的科学数学计算库之一,它提供了高效的多维数组对象以及对这些数组进行操作的函数NumPy的核心是ndarray(N-dimensional array)对象,它是一个用于存储同类型数据的多维数组Numpy通常与SciPy(Scientific Python)和 Matplotlib(绘图库)一起使用,用于替代MatLabSciPy是一个开源的Python算法库和数学工具包;Matplotlib是Python语言及其Numpy的可视化操作界面'''_数学中常用的环境有numpy
文章浏览阅读1.1w次。docker in docker说白了,就是在docker容器内启动一个docker daemon,对外提供服务。优点在于:镜像和容器都在一个隔离的环境,保持操作者的干净环境。想到了再补充 :)一:低版本启动及访问启动1.12.6-dinddocker run --privileged -d --name mydocker docker:1.12.6-dind在其他容器访问d..._dind