账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    百度地图new BMap.Polygon()函数的问题
    • 2018-03-21 00:00
    • 10
    38
    0

    使用element中的el-dialog,在dialog中使用百度地图
    data: {

        dialogMapVisible: true,

    }
    需要在mounted方法中初始化地图
    this.$nextTick(function () {

                this.initRouteMap();
                this.dialogMapVisible = false;
            });

    在methods: {

    // 初始化地图
            initRouteMap: function() {
                var routemap = new BMap.Map('routeMap');
                window.routemap = routemap;
                routemap.centerAndZoom(new BMap.Point(116.404, 39.915), 5);
                routemap.enableScrollWheelZoom();
                var navigationControl = new BMap.NavigationControl({
                    // 靠左上角位置
                    anchor: BMAP_ANCHOR_TOP_LEFT,
                    // LARGE类型
                    type: BMAP_NAVIGATION_CONTROL_LARGE,
                    // 启用显示定位
                    enableGeolocation: false
                });
                routemap.addControl(navigationControl);
            },
            // 点击弹出dialog
             handleClick: function(row) {
                this.routeData = row;
                this.dialogMapVisible = !this.dialogMapVisible;
                routemap.clearOverlays();
             
                var startPoint = new BMap.Point(this.routeData.saleObject.longitude, this.routeData.saleObject.latitude);
                var endPoint = new BMap.Point(this.routeData.harbor.longitude, this.routeData.harbor.latitude);
                var startMarker = new BMap.Marker(startPoint);  // 创建开始标注
                var endMarker = new BMap.Marker(endPoint);  // 创建结束标注
                routemap.addOverlay(startMarker);
                routemap.addOverlay(endMarker);
    
                _self = this;
                var windowInfoContent;
                var opts = {
                    offset : new BMap.Size(0,-15) //信息窗口偏移
                };
                startMarker.addEventListener('mouseover', function(e) {
                    var latlng = e.point;
                    windowInfoContent = "销售点:" + _self.routeData.saleObject.name + "<br>柜号:" + _self.routeData.cabinetNo;
                    var info = new BMap.InfoWindow(windowInfoContent, opts);
                    routemap.openInfoWindow(info, latlng);
                });
                endMarker.addEventListener('mouseover', function(e) {
                    var latlng = e.point;
                    windowInfoContent = "港口:" + _self.routeData.harbor.name + "<br>柜号:" + _self.routeData.cabinetNo;
                    var info = new BMap.InfoWindow(windowInfoContent, opts);
                    routemap.openInfoWindow(info, latlng);
                });
    
                // 画线
                var polygon = new BMap.Polygon([
                    new BMap.Point(this.routeData.saleObject.longitude, this.routeData.saleObject.latitude),
                    new BMap.Point(this.routeData.harbor.longitude, this.routeData.harbor.latitude)
                ], {strokeColor: "#00BFFF", strokeWeight:2, strokeOpacity: 0.7});  //创建线连接
               
                routemap.addOverlay(polygon);
    
            },

    }

    问题是,dialog打开后,地图出来了,标志点也标上了,但是线没有画上上去,要拖动一下或者鼠标滚动一下地图,线才会出现,请问为什么,那里的代码写错了?

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部