百度地图添加坐标点，并返回坐标信息
2023-12-18 20:20:23
?
? ? ? ? ?1、创建地图容器
? ? ? ?在mounted中初始化地图、鼠标绘制工具和添加鼠标监听事件
? ? ? ? vue data中添加地图和绘制工具对象
? ? ? ? 2、添加初始化化地图方法
initMap(longitude, latitude) {
let that = this
that.map = new BMapGL.Map("container");// 创建地图实例
if (longitude == null || latitude == null) {
var point = new BMapGL.Point(111.1480354849708, 37.5262978563336);
that.map.centerAndZoom(point, 16); // 初始化地图，设置中心点坐标和地图级别
that.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
this.drawInit()
return
}
},????????new BMapGL.Map("container"); 中存放div容器的id名
var point = new BMapGL.Point(111.1480354849708, 37.5262978563336);
that.map.centerAndZoom(point, 16); // 初始化地图，设置中心点坐标和地图级别
that.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放? ? ? ? ?放入点坐标，centerAndZoom(point, 16)中16为地图等级，越大地图越精细，最大为18
? ? ? ? 3、初始化鼠标绘制工具
// 实例化鼠标绘制工具
drawInit() {
this.drawingManager = new BMapGLLib.DrawingManager(this.map, {
// isOpen: true, // 是否开启绘制模式
enableCalculate: false, // 绘制是否进行测距测面
enableSorption: true, // 是否开启边界吸附功能
sorptiondistance: 20, // 边界吸附距离
labelOptions: this.labelOptions, // label样式
});
},????????this.drawingManager = new BMapGLLib.DrawingManager(this.map, {}），this.map就是你自己初始化的地图名
? ? ? ? 4、添加鼠标监听事件
//鼠标监听事件
getEventListener() {
// 添加鼠标绘制监听事件
this.drawingManager.addEventListener('overlaycomplete', (e, instance) => {
var marker = e.overlay;
this.inputForm.latitude = marker.getPosition().lat
this.inputForm.longitude = marker.getPosition().lng
console.log(this.inputForm)
//关闭绘制
this.downDraw();
// 计算标记数量
this.markerCount = 1;
});
},????????????????????var marker = e.overlay;? //获取到merker类型的对象
? ? ? ? ? ? ? ? ? ? this.inputForm.latitude = marker.getPosition().lat //获取对象内的参数
? ? ? ? ? ? ? ? ? ? this.inputForm.longitude = marker.getPosition().lng?
? ? ? ? 5、调用绘制方法，开始绘制
//开始绘制
draw(e) {
if (this.markerCount != 0) {
this.$message('标记点只能唯一');
return
}
// 进行绘制
this.drawingManager.setDrawingMode(e);
this.drawingManager.open();
},? ? ? ? 6、绘制后调用的结束方法
//关闭绘制
downDraw() {
this.drawingManager.close();
}? ? ? ? ?我这里有点业务，点坐标只能添加一次，所以在添加坐标的监听方法里添加了坐标数量的上限。
以下是完整代码
<style type="text/css">
#container {
height: 800px;
width: 100%;
}
</style>
<script type="text/javascript"
src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=1V4mSproiau7AxsArSNKBWqR0ZiyMKNh&s=1"
></script>
<link href="//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css" rel="stylesheet">
<script type="text/javascript"
src="//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>
<body>
<div id="app" v-cloak>
<div>
<el-button id="marker" @click="draw('marker')">点</el-button>
<el-button @click="">点完了</el-button>
</div>
<div id="container"></div>
</div>
</body>
<script>
var tableContainer = new Vue({
el: '#app',
mixins: [sharpMixin],
data() {
return {
inputForm: {
id: '',
latitude: '',
longitude: ''
},
drawingManager: null,
map: null,
labelOptions: {
borderRadius: '2px',
background: '#FFFBCC',
border: '1px solid #E1E1E1',
color: '#703A04',
fontSize: '12px',
letterSpacing: '0',
padding: '5px'
},
markerCount: 0
}
},
mounted() {
this.initMap();
this.getEventListener()
},
created() {
},
methods: {
// 获取数据列表
refreshList() {
this.get('${ctx}/basicinfo/operateBuilding/getBuildProjectInfoById').then((res) => {
this.inputForm.latitude = res.data.latitude
this.inputForm.longitude = res.data.longitude
this.initMap(this.inputForm.longitude, this.inputForm.latitude)
})
},
initMap(longitude, latitude) {
let that = this
that.map = new BMapGL.Map("container");// 创建地图实例
if (longitude == null || latitude == null) {
var point = new BMapGL.Point(111.1480354849708, 37.5262978563336);
that.map.centerAndZoom(point, 16); // 初始化地图，设置中心点坐标和地图级别
that.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
this.drawInit()
return
}
},
// 实例化鼠标绘制工具
drawInit() {
this.drawingManager = new BMapGLLib.DrawingManager(this.map, {
// isOpen: true, // 是否开启绘制模式
enableCalculate: false, // 绘制是否进行测距测面
enableSorption: true, // 是否开启边界吸附功能
sorptiondistance: 20, // 边界吸附距离
labelOptions: this.labelOptions, // label样式
});
},
//鼠标监听事件
getEventListener() {
// 添加鼠标绘制监听事件
this.drawingManager.addEventListener('overlaycomplete', (e, instance) => {
var marker = e.overlay;
this.inputForm.latitude = marker.getPosition().lat
this.inputForm.longitude = marker.getPosition().lng
//关闭绘制
this.downDraw();
// 计算标记数量
this.markerCount = 1;
});
},
//开始绘制
draw(e) {
if (this.markerCount != 0) {
this.$message('标记点只能唯一');
return
}
// 进行绘制
this.drawingManager.setDrawingMode(e);
this.drawingManager.open();
},
//关闭绘制
downDraw() {
this.drawingManager.close();
}
}
})
</script>
</html>
文章来源:https://blog.csdn.net/weixin_51722520/article/details/135069206
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！