- 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积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
