百度地图添加坐标点，并返回坐标信息

发布时间：2023年12月18日

?

? ? ? ? ?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
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章