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

问题描述：百度地图上标注了多个点，给这些点添加mark，点击坐标点弹出信息框，但是循环给这些点绑定点击事件时，发现总是弹出循环的最后一个信息弹出框，采样闭包可以解决。index.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><ti...

liuyouli2012

3368人浏览 · 2019-06-19 12:31:33

liuyouli2012 · 2019-06-19 12:31:33 发布

问题描述：百度地图上标注了多个点，给这些点添加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)
        }
    }

});

效果：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^