|
@@ -116,12 +116,34 @@ export default {
|
|
|
let ul;
|
|
|
let dataList = that.dataSource
|
|
|
that.map = new BMap.Map('map'); // 创建Map实例
|
|
|
- that.map.centerAndZoom(new BMap.Point(126.997589, 43.582168), 11); // 初始化地图,设置中心点坐标和地图级别
|
|
|
+ that.map.centerAndZoom(new BMap.Point(126.85912,43.671033), 13); // 初始化地图,设置中心点坐标和地图级别
|
|
|
that.map.enableScrollWheelZoom(true);
|
|
|
let mapStyle = {
|
|
|
style: 'midnight',
|
|
|
};
|
|
|
that.map.setMapStyle(mapStyle);
|
|
|
+ for (let i = 0; i < dataList.length; i++) {
|
|
|
+ let pointArray = [];
|
|
|
+ for (let j = 0; j < dataList[i].polylinePath.length; j++) {
|
|
|
+ pointArray.push(new BMap.Point(dataList[i].polylinePath[j].lng, dataList[i].polylinePath[j].lat))
|
|
|
+ }
|
|
|
+ // 创建小船图标
|
|
|
+ var myIcon = new BMap.Icon(require("@/assets/images/ship.png"), new BMap.Size(52, 26));
|
|
|
+ var marker = new BMap.Marker(new BMap.Point(dataList[i].polylinePath[0].lng, dataList[i].polylinePath[0].lat), {icon: myIcon}); // 创建点
|
|
|
+ var opts = {
|
|
|
+ width: 100, // 信息窗口宽度
|
|
|
+ height: 80, // 信息窗口高度
|
|
|
+ title: "游船信息", // 信息窗口标题
|
|
|
+ }
|
|
|
+ // marker添加点击事件
|
|
|
+ marker.addEventListener('mouseover', function () {
|
|
|
+ this.map.openInfoWindow(new BMap.InfoWindow("游船名称:" + dataList[i].shipName + "</br>" + "游船型号:" + dataList[i].shipType + "</br>" + "驱动类型:" + dataList[i].propulsion + "</br>", opts), new BMap.Point(dataList[i].polylinePath[0].lng, dataList[i].polylinePath[0].lat));
|
|
|
+ });
|
|
|
+ marker.addEventListener('mouseout', function () {
|
|
|
+ this.map.closeInfoWindow();
|
|
|
+ });
|
|
|
+ this.map.addOverlay(marker);
|
|
|
+ }
|
|
|
ul = document.getElementById('myList');
|
|
|
// 循环数组中的每个项目
|
|
|
dataList.forEach(function (item) {
|