VUE引用百度地图，循环标注mark并绑定点击事件异常处理

问题描述：百度地图上标注了多个点，给这些点添加mark，点击坐标点弹出信息框，但是循环给这些点绑定点击事件时，发现总是弹出循环的最后一个信息弹出框，采样闭包可以解决。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue封装百度地图</title>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=xxxxxxxxxx"></script>
    <script type="text/javascript" src="./js/bdmap3.js"></script>
</head>
<body>
<div id="app">
    <button v-on:click="search">查询</button>
    <bdmap v-if="true" ref="child1"></bdmap>
</div>
<script>
    new Vue({
        el: '#app',
        methods:{
            search:function () {
                var jsonData = "[{"position":{"lng":116.300784,"lat":39.936404},"props":{"地址":"北京地址xxx","时间":"20190618","年纪":11}},n" +
                " {"position":{"lng":116.385297,"lat":39.873084},"props":{"地址":"北京南站地址xxx","时间":"20190618","年纪":11}},n" +
                " {"position":{"lng":116.432871,"lat":39.885155},"props":{"地址":"北京地址xxx","时间":"20190618","年纪":12,"性别":"男"}}]";
                this.$refs.child1.showRoute(jsonData);
            }
        }
    });
</script>
</body>
</html>

bdmap3.js

var myBdMap = Vue.component('bdmap', {
    template: '<div id="container" style="width: 500px; height:500px;"></div>',
    data:function(){
        return {
        }
    },
    mounted () {
        this.setMap(),
        this.showRoute()
    },
    methods: {
        //这几个地方加this
        setMap: function() {
            var map = new BMap.Map("container");
            map.centerAndZoom(new BMap.Point(116.300784,39.936404), 11);//设置中心点和显示级别。中国。
            map.enableScrollWheelZoom();
            window.map = map;//将map变量存储在全局
        },
        showRoute: function (pointsx) {
            if(!pointsx){
                return;
            }
            var points = JSON.parse(pointsx);
            var opts = {
                title:'xxx',
                width : 200,     // 信息窗口宽度
                height: 0,     // 信息窗口高度
                enableMessage:true,//设置允许信息窗发送短息
            };
            var pointRoute = [];
            for (var i = 0, pointsLen = points.length; i < pointsLen; i++) {
                var point = new BMap.Point(points[i].position.lng, points[i].position.lat);
                pointRoute.push(point)
                var marker = new BMap.Marker(point);
                map.addOverlay(marker);
                //给标注点添加点击事件。使用立即执行函数和闭包
                (function () {
                    var thePoint = points[i];
                    console.info("points[i] " + points[i])
                    marker.addEventListener("click", function () {
                        var contexts = thePoint.props;
                        var info = "";
                        for (item in contexts) {
                            info += item +" : "+ contexts[item] + "<br/>";
                        }
                        var infoWindow = new BMap.InfoWindow(info,opts);  // 创建信息窗口对象
                        this.openInfoWindow(infoWindow);
                    });
                })();
            }
            var polyline = new BMap.Polyline(pointRoute, {strokeColor:"red",//设置颜色
                strokeWeight:1, //宽度
                strokeOpacity:0.5});//透明度
            map.addOverlay(polyline)
        }
    }

});

效果：

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/liuyouli2012/article/details/92820704
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-06-14 18:46:14
阅读 ( 852 )
分类：前端

VUE引用百度地图，循环标注mark并绑定点击事件异常处理

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看