|
@@ -50,7 +50,9 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <div ref="map" class="map-container"></div>
|
|
|
+ <div ref="map" class="map-container">
|
|
|
+ <!-- <img src="'https://inews.gtimg.com/om_bt/OtxRSLxjDKPT0ajd72ZeQk6IrtFinjJu7g5Nb9oCkI6SoAA/641'" alt=""> -->
|
|
|
+ </div>
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
<el-button class="cancelClose1" @click="run.dialogFormVisible = false;getList()">关闭</el-button>
|
|
|
</div>
|
|
@@ -68,6 +70,7 @@ import axios from 'axios'
|
|
|
import { getToken } from '@/utils/auth'
|
|
|
import { createApp } from 'vue';
|
|
|
import AMapLoader from '@amap/amap-jsapi-loader';
|
|
|
+import vLoUrl from '../../../assets/images/logo.png';
|
|
|
window._AMapSecurityConfig = {
|
|
|
securityJsCode: '0133db0118e961029dc45a2d5039cbb1' // '「申请的安全密钥」',
|
|
|
}
|
|
@@ -116,7 +119,8 @@ export default {
|
|
|
latitude: 40.878730, // 实景图所在位置的纬度
|
|
|
longitude: 113.216553, // 实景图所在位置的经度
|
|
|
zoom: 17, // 实景
|
|
|
- apiKey:'fb6a0e88dbad4931d96a121bcf7c4442'
|
|
|
+ apiKey:'fb6a0e88dbad4931d96a121bcf7c4442',
|
|
|
+ vLoUrl
|
|
|
}
|
|
|
},
|
|
|
|
|
@@ -194,25 +198,13 @@ export default {
|
|
|
|
|
|
// console.log(JSON.stringify(arrList),'arrList')
|
|
|
this.path = arrList
|
|
|
- // this.path = [ //测试数据
|
|
|
- // [116.405285, 39.904989], // 示例轨迹点1
|
|
|
- // [116.407516, 39.904987], // 示例轨迹点2
|
|
|
- // [116.407517, 39.91344] // 示例轨迹点3
|
|
|
- // // 添加更多轨迹点
|
|
|
- // ]
|
|
|
- // this.path = [
|
|
|
- // [121.461525,31.312628],
|
|
|
- // // [121.461526,31.312628],[121.461527,31.312628],[121.461527,31.312628]
|
|
|
- // ]
|
|
|
- console.log(this.path[0][0])
|
|
|
this.longitude = this.path[0][0] // 实景图所在位置的经度
|
|
|
this.latitude = this.path[0][1] // 实景图所在位置的纬度
|
|
|
// zoom: 15, // 实景
|
|
|
- this.initMap();
|
|
|
} else {
|
|
|
this.path = []
|
|
|
}
|
|
|
- // this.initMap();
|
|
|
+ this.initMap();
|
|
|
})
|
|
|
},
|
|
|
async initMap() {
|
|
@@ -241,43 +233,25 @@ export default {
|
|
|
map: this.map,
|
|
|
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png', // 终点图标
|
|
|
});
|
|
|
- this.correctPath();
|
|
|
+ // var imageLayer = new AMap.ImageLayer({
|
|
|
+ // url: 'https://inews.gtimg.com/om_bt/OtxRSLxjDKPT0ajd72ZeQk6IrtFinjJu7g5Nb9oCkI6SoAA/641',
|
|
|
+ // // bounds: new AMap.Bounds(
|
|
|
+ // // [116.327911, 39.939229],
|
|
|
+ // // [116.342659, 39.946275]
|
|
|
+ // // ),
|
|
|
+ // // zooms: [1, 50]
|
|
|
+ // });
|
|
|
+ // var imageLayers = new AMap.ImageLayer({
|
|
|
+ // url: 'https://inews.gtimg.com/om_bt/OtxRSLxjDKPT0ajd72ZeQk6IrtFinjJu7g5Nb9oCkI6SoAA/641',
|
|
|
+ // // url: this.vLoUrl,
|
|
|
+ // bounds: new AMap.Bounds(
|
|
|
+ // [121.97563085677434,27.92512942520125],
|
|
|
+ // [131.551866454716, 36.16701972816233]
|
|
|
+ // ),
|
|
|
+ // zooms: [1, 50]
|
|
|
+ // });
|
|
|
+ // this.map.add([imageLayer,imageLayers])
|
|
|
this.drawPath();
|
|
|
- // this.addStartMarker()
|
|
|
- },
|
|
|
- correctPath() {
|
|
|
- // 调用高德地图的轨迹纠偏服务进行处理
|
|
|
-
|
|
|
- // 处理返回结果并在地图上展示纠偏后的轨迹
|
|
|
- },
|
|
|
- drawDrop(){
|
|
|
- var that = this
|
|
|
- that.path.forEach(function(coord, index) {
|
|
|
- // console.log(coord, index,'coord, index')
|
|
|
- var marker = new AMap.Marker({
|
|
|
- position: coord, // 对应点的经/纬度
|
|
|
- map: that.map, // 显示在地图上
|
|
|
- icon: new AMap.Icon({
|
|
|
- // size: new AMap.Size(36, 36), // 图标尺寸
|
|
|
- image: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b'+ (index + 1) +'.png', // 自定义图标
|
|
|
- // imageSize: new AMap.Size(36, 36), // 图标尺寸
|
|
|
- }),
|
|
|
- offset: new AMap.Pixel(-10, -30) // 调整图标的偏移,使图标中心显示在点位置
|
|
|
- });
|
|
|
- // var label = new AMap.Text({
|
|
|
- // text: (index + 1).toString(), // 显示的数字
|
|
|
- // position: coord, // 标签位置与点位置相同
|
|
|
- // offset: new AMap.Pixel(-10, -20), // 调整标签的偏移,使数字显示在点的正上方
|
|
|
- // map: that.map // 显示在地图上
|
|
|
- // });
|
|
|
- // 添加信息窗体
|
|
|
- marker.on('click', function() {
|
|
|
- var infoWindow = new AMap.InfoWindow({
|
|
|
- content: '经度:' + coord[0] + '<br>纬度:' + coord[1]
|
|
|
- });
|
|
|
- infoWindow.open(that.map, marker.getPosition());
|
|
|
- });
|
|
|
- });
|
|
|
},
|
|
|
drawPath() {
|
|
|
const polyline = new window.AMap.Polyline({
|
|
@@ -299,7 +273,7 @@ export default {
|
|
|
<style lang="scss" scoped>
|
|
|
.map-container {
|
|
|
height: 400px;
|
|
|
- width: 100%;
|
|
|
+ width: 800px;
|
|
|
}
|
|
|
.search {
|
|
|
clear: both;
|