Commit dcd3e373 authored by 黄奎's avatar 黄奎

去掉百度地图

parent 5e984a34
...@@ -25,7 +25,7 @@ Vue.prototype.domainManager = function () { ...@@ -25,7 +25,7 @@ Vue.prototype.domainManager = function () {
if (domainNameUrl.indexOf('oytour') !== -1) { if (domainNameUrl.indexOf('oytour') !== -1) {
domainUrl = "http://reborn.oytour.com"; domainUrl = "http://reborn.oytour.com";
} }
domainUrl = "http://192.168.5.56"; domainUrl = "http://reborn.oytour.com";
var obj = { var obj = {
//主地址 //主地址
DomainUrl: domainUrl, DomainUrl: domainUrl,
......
<style scoped> <style scoped>
.card {
.card {width: 100vm; width: 100vm;
height: 320px; height: 320px;
border: 1px solid #F0EFEF; border: 1px solid #F0EFEF;
border-radius: 8px;} border-radius: 8px;
</style> }
<template>
<div> </style>
<div class="card" :id="`baidu-map_${center.Id}`"></div> <template>
</div> <div>
</template> <div class="card" :id="`baidu-map_${center.Id}`"></div>
<script> </div>
export default { </template>
props:["AddressObj"], <script>
data() { export default {
return { props: ["AddressObj"],
center:{ data() {
Lng: 116.294625, return {
Lat: 39.961627 center: {
}, Lng: 116.294625,
keywords: '' Lat: 39.961627
} },
keywords: ''
}
},
watch: {
AddressObj: {
handler(newValue, onldValue) {
this.center = newValue
}, },
watch: { deep: true,
AddressObj:{ immediate: true
handler(newValue,onldValue) { },
this.center = newValue keywords: {
}, handler(newValue, onldValue) {
deep:true, this.getLocalSearch()
immediate:true
}, },
keywords:{ }
handler(newValue,onldValue) { },
this.getLocalSearch() mounted() {
}, this.createMap();
} // this.addMarker();
// this.addLabel()
// if (this.center.Range && this.center.Range > 0) {
// this.addCircle()
// }
},
methods: {
createMap() {
// if (this.map) {
// this.map.clearOverlays()
// }
// let map = new BMap.Map(`baidu-map_${this.center.Id}`); // 创建地图实例
// let point = new BMap.Point(this.center.Lng, this.center.Lat); // 创建点坐标
// map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
// map.enableScrollWheelZoom(true);
// var marker = new BMap.Marker(point); //标记点
// map.addOverlay(marker);
// this.map = map;
},
addMarker() {
let icon = require(`../../assets/img/marker.png`);
var myIcon = new BMap.Icon(icon, new BMap.Size(23, 25), {
// 指定定位位置。
// 当标注显示在地图上时,其所指向的地理位置距离图标左上
// 角各偏移10像素和25像素。您可以看到在本例中该位置即是
// 图标中央下端的尖角位置。
anchor: new BMap.Size(10, 25),
// 设置图片偏移。
// 当您需要从一幅较大的图片中截取某部分作为标注图标时,您
// 需要指定大图的偏移位置,此做法与css sprites技术类似。
// imageOffset: new BMapGL.Size(0, 0 - 25) // 设置图片偏移
});
let point = new BMap.Point(this.center.Lng, this.center.Lat); // 创建点坐标
// 创建标注对象并添加到地图
var marker = new BMap.Marker(point, {
icon: myIcon
});
this.map.addOverlay(marker);
},
addLabel() {
var point = new BMap.Point(this.center.Lng, this.center.Lat);
var content = this.center.Address;
var label = new BMap.Label(content, {
// 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMap.Size(10, -60), // 设置标注的偏移量
});
this.map.addOverlay(label); // 将标注添加到地图中
label.addEventListener("click", function (e) {
// alert("您点击了标注");
});
label.setStyle({
// 设置label的样式
color: "#000",
fontSize: "18px",
border: "0 solid #1E90FF",
padding: '0 5px',
borderRadius: '3px',
});
}, },
mounted() { addCircle() {
this.createMap(); var mPoint = new BMap.Point(this.center.Lng, this.center.Lat);
this.addMarker(); var circle = new BMap.Circle(mPoint, this.center.Range, {
this.addLabel() fillColor: "blue",
if(this.center.Range&&this.center.Range>0){ strokeWeight: 1,
this.addCircle() fillOpacity: 0.3,
} strokeOpacity: 0.3
});
this.map.addOverlay(circle);
let getNeSw = circle.getBounds()
var mPoint1 = new BMap.Point(getNeSw.ne.lng, getNeSw.ne.lat)
var mPoint2 = new BMap.Point(getNeSw.sw.lng, getNeSw.sw.lat)
let points = [mPoint1, mPoint2]
this.map.centerAndZoom(mPoint, this.map.getViewport(points).zoom + 1);
}, },
methods: { getLocalSearch() {
createMap() { var mPoint = new BMap.Point(this.center.Lng, this.center.Lat);
if (this.map) { var local = new BMap.LocalSearch(this.map, {
this.map.clearOverlays() renderOptions: {
map: this.map,
autoViewport: false
} }
let map = new BMap.Map(`baidu-map_${this.center.Id}`); // 创建地图实例 });
let point = new BMap.Point(this.center.Lng, this.center.Lat); // 创建点坐标 local.searchNearby(this.keywords, mPoint, this.center.Range);
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true);
// var scaleCtrl = new BMap.ScaleControl(); // 添加比例尺控件
// map.addControl(scaleCtrl);
// var zoomCtrl = new BMap.ZoomControl(); // 添加缩放控件//开启鼠标滚轮缩放
// map.addControl(zoomCtrl);
var marker = new BMap.Marker(point); //标记点
// var label = new BMap.Label(this.center.Name, {
// offset: new BMap.Size(0, 28)
// }); //标签
// label.setStyle({
// color: "#FFF",
// fontSize: "10px",
// height: "24px",
// lineHeight: "20px",
// padding: "2px 5px",
// border: "1px solid rgba(230, 0, 0, 0.7)",
// background: "rgba(230, 0, 0, 0.7)",
// fontWeight: "bold",
// transform: 'translateX(-50%)',
// fontFamily: "微软雅黑"
// })
// marker.setLabel(label)
map.addOverlay(marker);
this.map = map;
},
addMarker() {
let icon = require(`../../assets/img/marker.png`);
var myIcon = new BMap.Icon(icon, new BMap.Size(23, 25), {
// 指定定位位置。
// 当标注显示在地图上时,其所指向的地理位置距离图标左上
// 角各偏移10像素和25像素。您可以看到在本例中该位置即是
// 图标中央下端的尖角位置。
anchor: new BMap.Size(10, 25),
// 设置图片偏移。
// 当您需要从一幅较大的图片中截取某部分作为标注图标时,您
// 需要指定大图的偏移位置,此做法与css sprites技术类似。
// imageOffset: new BMapGL.Size(0, 0 - 25) // 设置图片偏移
});
let point = new BMap.Point(this.center.Lng, this.center.Lat); // 创建点坐标
// 创建标注对象并添加到地图
var marker = new BMap.Marker(point, { icon: myIcon });
this.map.addOverlay(marker);
},
addLabel() {
var point = new BMap.Point(this.center.Lng, this.center.Lat);
var content = this.center.Address;
var label = new BMap.Label(content, {
// 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMap.Size(10, -60), // 设置标注的偏移量
});
this.map.addOverlay(label); // 将标注添加到地图中
label.addEventListener("click", function (e) {
// alert("您点击了标注");
});
label.setStyle({
// 设置label的样式
color: "#000",
fontSize: "18px",
border: "0 solid #1E90FF",
padding: '0 5px',
borderRadius: '3px',
});
},
addCircle(){
var mPoint = new BMap.Point(this.center.Lng, this.center.Lat);
var circle = new BMap.Circle(mPoint,this.center.Range,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
this.map.addOverlay(circle);
let getNeSw = circle.getBounds()
var mPoint1 = new BMap.Point(getNeSw.ne.lng,getNeSw.ne.lat)
var mPoint2 = new BMap.Point(getNeSw.sw.lng,getNeSw.sw.lat)
let points=[mPoint1,mPoint2]
this.map.centerAndZoom(mPoint, this.map.getViewport(points).zoom+1);
},
getLocalSearch(){
var mPoint = new BMap.Point(this.center.Lng, this.center.Lat);
var local = new BMap.LocalSearch(this.map, {renderOptions: {map: this.map, autoViewport: false}});
local.searchNearby(this.keywords,mPoint,this.center.Range);
},
}, },
}
</script> },
}
\ No newline at end of file
</script>
<style> <style>
.markers_labels { .markers_labels {
margin-left: -24px !important; margin-left: -24px !important;
margin-top: -43px !important; margin-top: -43px !important;
} }
.gm-svpc, .gm-svpc,
.gm-style-mtc, .gm-style-mtc,
.gm-style-cc { .gm-style-cc {
display: none; display: none;
} }
.classA { .classA {
background-size: 700px 1600px; background-size: 700px 1600px;
background-position: 0px -1200px; background-position: 0px -1200px;
width: 34px; width: 34px;
height: 34px; height: 34px;
position: absolute; position: absolute;
left: -16px; left: -16px;
top: -16px; top: -16px;
} }
.labels {
width: 30px;
height: 30px;
position: relative;
bottom: -200px;
}
.BMap_cpyCtrl {
display: none;
}
.anchorBL {
display: none;
}
.BMap_bubble_pop img {
display: none !important;
}
.labels {
width: 30px;
height: 30px;
position: relative;
bottom: -200px;
}
.BMap_cpyCtrl {
display: none;
}
.anchorBL {
display: none;
}
.BMap_bubble_pop img{
display: none !important;
}
</style> </style>
<template> <template>
<div style="height:100%;"> <div style="height:100%;">
<div id="map_canvas" style="height: 100%; width: 100%"></div> <div id="map_canvas" style="height: 100%; width: 100%"></div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: ["locationArray", "type"], props: ["locationArray", "type"],
data() { data() {
return { return {
// directions: new google.maps.DirectionsService(), //获取路线请求的服务
// renderer: new google.maps.DirectionsRenderer(), //
polyline: {}, //线路
map: {},
icons: {
trafficImage: "http://imgfile.oytour.com/static/location_01.png",
hotelImage: "http://imgfile.oytour.com/static/location_hotel.png",
scenicImage: "http://imgfile.oytour.com/static/location_scenic.png",
planeImage: "http://imgfile.oytour.com/static/location_plane.png"
},
markerArray: [], //标记数组
}
},
watch: {
locationArray(newValue, old) {
this.mapBuild()
}
},
created() {
polyline: {}, //线路
map: {},
icons: {
trafficImage: "http://imgfile.oytour.com/static/location_01.png",
hotelImage: "http://imgfile.oytour.com/static/location_hotel.png",
scenicImage: "http://imgfile.oytour.com/static/location_scenic.png",
planeImage: "http://imgfile.oytour.com/static/location_plane.png"
}, },
destroyed: function () { markerArray: [], //标记数组
}
},
watch: {
locationArray(newValue, old) {
this.mapBuild()
}
},
created() {
}, },
mounted() { destroyed: function () {
this.mapBuild() //初始化实例之后调用
},
methods: {
mapBuild(){
let Bmap = window.BMapGL
this.markerArray = [];
if (this.locationArray && this.locationArray.length > 0) {
let points=[]
this.locationArray.forEach(x=>{
if(x.lng!=''&& x.lat!=''){
points.push(new Bmap.Point(x.lng,x.lat))
}
})
var b = new Bmap.Map('map_canvas')
this.map = b
let view = b.getViewport(points)
b.centerAndZoom(view.center, view.zoom)
b.enableScrollWheelZoom(true)
let allPoints = [];
//去掉重复的数据
this.locationArray.forEach((x, index) => {
if (x.lat && x.lng) {
let obj = {
location: x.lat + ',' + x.lng,
type: x.type,
name: x.name,
isFly: x.isFly,
trafficType: x.trafficType
}
if (this.type == 1) {
if (!this.checkItemIsExists(allPoints, obj)) {
allPoints.push(obj);
}
} else {
if (!this.checkItemIsExists(allPoints, obj, 2)) {
allPoints.push(obj);
}
}
}
});
this.calcRoute(allPoints)
}
},
checkItemIsExists(arr, checkItem, type) {
var isExists = false;
for (var i = 0; i < arr.length; i++) {
if (type) {
if (arr[i].location == checkItem.location && !isExists && arr[i].type == checkItem.type) {
isExists = true;
}
} else {
if (arr[i].location == checkItem.location && !isExists) {
isExists = true;
}
}
} },
return isExists; mounted() {
}, this.mapBuild() //初始化实例之后调用
//画驾车路线图 },
drawDrivingRute(array) { methods: {
let points=[] mapBuild() {
let Bmap = window.BMapGL // let Bmap = window.BMapGL
for (var i = 0; i < array.length; i++) { // this.markerArray = [];
var form_loc = array[i].location.split(','); // if (this.locationArray && this.locationArray.length > 0) {
points.push(new Bmap.Point(form_loc[1],form_loc[0])) // let points = []
} // this.locationArray.forEach(x => {
var polyline = new BMapGL.Polyline(points, {strokeColor:"black", strokeWeight:2, strokeOpacity:0.5}); // if (x.lng != '' && x.lat != '') {
this.map.addOverlay(polyline); // points.push(new Bmap.Point(x.lng, x.lat))
}, // }
calcRoute: function (waypoints) {
let _this = this;
var startArray = waypoints[0].location.split(',');
let lat = parseFloat(startArray[0]);
let lng = parseFloat(startArray[1]);
//全部
if (this.type == 1) {
this.drawDrivingRute(waypoints);
waypoints.forEach((item, index) => {
this.addMarker(item, index + 1);
});
}
//每天
else {
for (var i = 0; i < waypoints.length - 1; i++) {
var currentItem = waypoints[i];
var nextItem = waypoints[i + 1];
if (currentItem && currentItem.trafficType == 4) {
this.drawWalkRoute(currentItem.location, nextItem.location);
} else {
var newArray = [];
newArray.push(currentItem);
newArray.push(nextItem);
this.drawDrivingRute(newArray);
}
if (i == 0) {
this.addMarker(currentItem, i + 1);
} else {
var preitem = waypoints[i - 1];
var startArray = preitem.location.split(',');
var currentArray = currentItem.location.split(',');
var currentdistance = this.CalcDistance(currentArray[0], currentArray[1], startArray[0],
startArray[1]);
this.addMarker(currentItem, i + 1, currentdistance);
if (i == waypoints.length - 2) {
var nextArray = nextItem.location.split(',');
var nextdistance = this.CalcDistance(nextArray[0], nextArray[1], currentArray[0],
currentArray[1]);
this.addMarker(nextItem, i + 2, nextdistance);
}
}
}
}
},
addMarker(obj, title, distance) {
var loc = obj.location.split(',');
//生成标记图标
var image = {}
var type = obj.type;
var isFly = obj.isFly;
//交通
if (type == 1) {
image = {
url: this.icons.trafficImage, // image is 512 x 512
scaledSize: new BMapGL.Size(30, 40),
};
}
//住宿
if (type == 3) {
image = {
url: this.icons.hotelImage,
scaledSize: new BMapGL.Size(40, 40),
}
}
//景点
if (type == 2) {
image = {
url: this.icons.scenicImage,
scaledSize: new BMapGL.Size(35, 45),
}
}
//飞机
if (isFly == 1) {
image = {
url: this.icons.planeImage,
scaledSize: new BMapGL.Size(30, 30),
}
}
var myIcon = new BMapGL.Icon(image.url, image.scaledSize)
var marker = new BMapGL.Marker(new BMapGL.Point(loc[1], loc[0]),{ icon: myIcon }); // 将图标和坐标进行关联
this.map.addOverlay(marker); // 将关联好的结果进行放置
var opts = {
position: new BMapGL.Point(loc[1], loc[0]), // 指定文本标注所在的地理位置
offset: new BMapGL.Size(0, 0) // 设置文本偏移量
};
var label = new BMapGL.Label(title, opts); // 创建文本标注对象
label.setStyle({
background: '#fff',
borderRadius: '50%',
marginLeft: '-10px',
marginTop: '-16px',
width: '19px',
height: '19px',
textAlign: 'center',
lineHeight: '20px',
border:'none'
}); // 自定义文本标注样式
this.map.addOverlay(label);
//景点
if (type == 2) {
var str = '<div>' + obj.name + '</div>';
if (distance) {
str += '<br/><div>' + distance + 'KM<div>'
}
var infoWindow = new BMapGL.InfoWindow(str, { // 创建信息窗口对象
width : 50, // 信息窗口宽度
})
marker.addEventListener("click", function(){ // 创建点击事件
this.map.openInfoWindow(infoWindow, opts.position); //开启信息窗口
});
} // })
if (type == 3 || type == 2 || isFly == 1) { // var b = new Bmap.Map('map_canvas')
label.setContent('') // this.map = b
label.setStyle({ // let view = b.getViewport(points)
background:'transparent' // b.centerAndZoom(view.center, view.zoom)
}) // b.enableScrollWheelZoom(true)
} // let allPoints = [];
// //去掉重复的数据
}, // this.locationArray.forEach((x, index) => {
getRad(d) { // if (x.lat && x.lng) {
return d * Math.PI / 180.0; // let obj = {
}, // location: x.lat + ',' + x.lng,
CalcDistance(lat1, lng1, lat2, lng2) { // type: x.type,
var EARTH_RADIUS = 6378137.0; //单位M // name: x.name,
var radLat1 = this.getRad(lat1); // isFly: x.isFly,
var radLat2 = this.getRad(lat2); // trafficType: x.trafficType
var a = radLat1 - radLat2; // }
var b = this.getRad(lng1) - this.getRad(lng2); // if (this.type == 1) {
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * // if (!this.checkItemIsExists(allPoints, obj)) {
Math.pow(Math.sin(b / 2), 2))); // allPoints.push(obj);
s = s * EARTH_RADIUS; // }
s = Math.round(s * 10000) / 10000.0/1000.0; // } else {
return Math.round(s); // if (!this.checkItemIsExists(allPoints, obj, 2)) {
}, // allPoints.push(obj);
convertPointer(ggPoint,cb){ // }
let BMap = window.BMapGL // }
var convertor = new BMap.Convertor(); // }
var pointArr = []; // });
pointArr.push(ggPoint); // this.calcRoute(allPoints)
convertor.translate(pointArr, 1, 5, cb) // }
},
checkItemIsExists(arr, checkItem, type) {
var isExists = false;
for (var i = 0; i < arr.length; i++) {
if (type) {
if (arr[i].location == checkItem.location && !isExists && arr[i].type == checkItem.type) {
isExists = true;
} }
}, } else {
} if (arr[i].location == checkItem.location && !isExists) {
</script> isExists = true;
\ No newline at end of file }
}
}
return isExists;
},
//画驾车路线图
drawDrivingRute(array) {
let points = []
let Bmap = window.BMapGL
for (var i = 0; i < array.length; i++) {
var form_loc = array[i].location.split(',');
points.push(new Bmap.Point(form_loc[1], form_loc[0]))
}
var polyline = new BMapGL.Polyline(points, {
strokeColor: "black",
strokeWeight: 2,
strokeOpacity: 0.5
});
this.map.addOverlay(polyline);
},
calcRoute: function (waypoints) {
let _this = this;
var startArray = waypoints[0].location.split(',');
let lat = parseFloat(startArray[0]);
let lng = parseFloat(startArray[1]);
//全部
if (this.type == 1) {
this.drawDrivingRute(waypoints);
waypoints.forEach((item, index) => {
this.addMarker(item, index + 1);
});
}
//每天
else {
for (var i = 0; i < waypoints.length - 1; i++) {
var currentItem = waypoints[i];
var nextItem = waypoints[i + 1];
if (currentItem && currentItem.trafficType == 4) {
this.drawWalkRoute(currentItem.location, nextItem.location);
} else {
var newArray = [];
newArray.push(currentItem);
newArray.push(nextItem);
this.drawDrivingRute(newArray);
}
if (i == 0) {
this.addMarker(currentItem, i + 1);
} else {
var preitem = waypoints[i - 1];
var startArray = preitem.location.split(',');
var currentArray = currentItem.location.split(',');
var currentdistance = this.CalcDistance(currentArray[0], currentArray[1], startArray[0],
startArray[1]);
this.addMarker(currentItem, i + 1, currentdistance);
if (i == waypoints.length - 2) {
var nextArray = nextItem.location.split(',');
var nextdistance = this.CalcDistance(nextArray[0], nextArray[1], currentArray[0],
currentArray[1]);
this.addMarker(nextItem, i + 2, nextdistance);
}
}
}
}
},
addMarker(obj, title, distance) {
var loc = obj.location.split(',');
//生成标记图标
var image = {}
var type = obj.type;
var isFly = obj.isFly;
//交通
if (type == 1) {
image = {
url: this.icons.trafficImage, // image is 512 x 512
scaledSize: new BMapGL.Size(30, 40),
};
}
//住宿
if (type == 3) {
image = {
url: this.icons.hotelImage,
scaledSize: new BMapGL.Size(40, 40),
}
}
//景点
if (type == 2) {
image = {
url: this.icons.scenicImage,
scaledSize: new BMapGL.Size(35, 45),
}
}
//飞机
if (isFly == 1) {
image = {
url: this.icons.planeImage,
scaledSize: new BMapGL.Size(30, 30),
}
}
var myIcon = new BMapGL.Icon(image.url, image.scaledSize)
var marker = new BMapGL.Marker(new BMapGL.Point(loc[1], loc[0]), {
icon: myIcon
}); // 将图标和坐标进行关联
this.map.addOverlay(marker); // 将关联好的结果进行放置
var opts = {
position: new BMapGL.Point(loc[1], loc[0]), // 指定文本标注所在的地理位置
offset: new BMapGL.Size(0, 0) // 设置文本偏移量
};
var label = new BMapGL.Label(title, opts); // 创建文本标注对象
label.setStyle({
background: '#fff',
borderRadius: '50%',
marginLeft: '-10px',
marginTop: '-16px',
width: '19px',
height: '19px',
textAlign: 'center',
lineHeight: '20px',
border: 'none'
}); // 自定义文本标注样式
this.map.addOverlay(label);
//景点
if (type == 2) {
var str = '<div>' + obj.name + '</div>';
if (distance) {
str += '<br/><div>' + distance + 'KM<div>'
}
var infoWindow = new BMapGL.InfoWindow(str, { // 创建信息窗口对象
width: 50, // 信息窗口宽度
})
marker.addEventListener("click", function () { // 创建点击事件
this.map.openInfoWindow(infoWindow, opts.position); //开启信息窗口
});
}
if (type == 3 || type == 2 || isFly == 1) {
label.setContent('')
label.setStyle({
background: 'transparent'
})
}
},
getRad(d) {
return d * Math.PI / 180.0;
},
CalcDistance(lat1, lng1, lat2, lng2) {
var EARTH_RADIUS = 6378137.0; //单位M
var radLat1 = this.getRad(lat1);
var radLat2 = this.getRad(lat2);
var a = radLat1 - radLat2;
var b = this.getRad(lng1) - this.getRad(lng2);
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) *
Math.pow(Math.sin(b / 2), 2)));
s = s * EARTH_RADIUS;
s = Math.round(s * 10000) / 10000.0 / 1000.0;
return Math.round(s);
},
convertPointer(ggPoint, cb) {
let BMap = window.BMapGL
var convertor = new BMap.Convertor();
var pointArr = [];
pointArr.push(ggPoint);
convertor.translate(pointArr, 1, 5, cb)
}
},
}
</script>
...@@ -2,86 +2,84 @@ ...@@ -2,86 +2,84 @@
<html> <html>
<head> <head>
<title> <title>
<%= htmlWebpackPlugin.options.productName %> <%= htmlWebpackPlugin.options.productName %>
</title> </title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="description" content="<%= htmlWebpackPlugin.options.productDescription %>"> <meta name="description" content="<%= htmlWebpackPlugin.options.productDescription %>">
<meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no"> <meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova || htmlWebpackPlugin.options.ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>"> <meta name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova || htmlWebpackPlugin.options.ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
<link rel="icon" type="image/png" sizes="128x128" href="statics/icons/favicon-128x128.png"> <link rel="icon" type="image/png" sizes="128x128" href="statics/icons/favicon-128x128.png">
<link rel="icon" type="image/png" sizes="96x96" href="statics/icons/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="statics/icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="32x32" href="statics/icons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="statics/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png">
<link rel="icon" type="image/ico" href="statics/icons/favicon.ico"> <link rel="icon" type="image/ico" href="statics/icons/favicon.ico">
<!-- <script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v7.0" nonce="bDrSmWhp"></script> -->
<!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=OBd2bhrqKUSbQGpniCZ996suti9YG7Bc"></script> -->
<!--HK 2024-08-15 新加(避免提示为商用授权) Start-->
<script type="text/javascript" src="//api.map.baidu.com/api?key=&v=1.1&services=true&s=1"></script>
<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=2.0&ak=&services=&t=20240731110958"></script>
<!--
<script charset="utf8" src="https://dlswbr.baidu.com/heicha/mw/abclite-2063-s.original.js?_=9975"></script>
<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=1.1&ak=&services=true&t=20130716024058"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&s=1"></script>
-->
<!--HK 2024-08-15 新加 End -->
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
<script>
function countryCb(r) {
if (!r) {
loadScriptString('https://maps.googleapis.com/maps/api/js?key=AIzaSyCvRZN9lGl3y3EsM0A0sWPf1pZ2olGsyNg&callback=Function.prototype')
setTimeout(() => {
loadScriptString('https://vt-im-bucket.oss-cn-chengdu.aliyuncs.com/1.0.0.1/mark.js')
}, 1000);
} else {
// loadScriptString('https://api.map.baidu.com/api?type=webgl&v=3.0&ak=L5Qw0GlbbCIMwgR4Uug3ogM40Imkd3CV') <!--HK 2024-08-15 新加(避免提示为商用授权) Start-->
} <!-- <script type="text/javascript" src="//api.map.baidu.com/api?key=&v=1.1&services=true&s=1"></script>
<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=2.0&ak=&services=&t=20240731110958">
</script> -->
} <!--HK 2024-08-15 新加 End -->
function loadScriptString(code) { <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
var script = document.createElement("script"); //创建一个script标签 <script>
script.type = "text/javascript"; function countryCb(r) {
script.src = code if (!r) {
document.getElementsByTagName('head')[0].appendChild(script); loadScriptString(
} 'https://maps.googleapis.com/maps/api/js?key=AIzaSyCvRZN9lGl3y3EsM0A0sWPf1pZ2olGsyNg&callback=Function.prototype'
)
setTimeout(() => {
loadScriptString('https://vt-im-bucket.oss-cn-chengdu.aliyuncs.com/1.0.0.1/mark.js')
}, 1000);
} else {
// loadScriptString('https://api.map.baidu.com/api?type=webgl&v=3.0&ak=L5Qw0GlbbCIMwgR4Uug3ogM40Imkd3CV')
}
}
function loadScriptString(code) {
var script = document.createElement("script"); //创建一个script标签
script.type = "text/javascript";
script.src = code
document.getElementsByTagName('head')[0].appendChild(script);
}
function isInChina() { function isInChina() {
let that = this let that = this
var url = '//graph.facebook.com/feed?callback=h'; var url = '//graph.facebook.com/feed?callback=h';
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
var called = false; var called = false;
xhr.open('GET', url); xhr.open('GET', url);
xhr.onreadystatechange = function() { xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) { if (xhr.readyState === 4 && xhr.status === 200) {
called = true; called = true;
that.countryCb(false); that.countryCb(false);
}
};
xhr.send();
// timeout 1s, this facebook API is very fast.
setTimeout(function() {
if (!called) {
xhr.abort();
that.countryCb(true);
}
}, 1000);
} }
window.onload = function() { };
isInChina() xhr.send();
// timeout 1s, this facebook API is very fast.
setTimeout(function () {
if (!called) {
xhr.abort();
that.countryCb(true);
} }
</script> }, 1000);
}
window.onload = function () {
isInChina()
}
</script>
</head> </head>
<body> <body>
<!-- DO NOT touch the following DIV --> <!-- DO NOT touch the following DIV -->
<div id="q-app"></div> <div id="q-app"></div>
</body> </body>
</html> </html>
\ No newline at end of file
...@@ -446,8 +446,8 @@ ...@@ -446,8 +446,8 @@
<div class="q-pa-md" :class="{ <div class="q-pa-md" :class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile, 'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"> }">
<componentsMap v-if="AddressObj.Lng&&AddressObj.Lat" :AddressObj="AddressObj"/> <!-- <componentsMap v-if="AddressObj.Lng&&AddressObj.Lat" :AddressObj="AddressObj"/> -->
<div v-else class="card text-center">经纬度未知</div> <!-- <div v-else class="card text-center">经纬度未知</div> -->
</div> </div>
</div> </div>
<div <div
......
...@@ -348,11 +348,9 @@ ...@@ -348,11 +348,9 @@
import { json } from "body-parser"; import { json } from "body-parser";
import coupon from 'src/components/common/coupon.vue' import coupon from 'src/components/common/coupon.vue'
import ProductTypeEnum from "src/utils/producttypeenum"; import ProductTypeEnum from "src/utils/producttypeenum";
import componentsMap from "src/components/car/Map.vue";
export default { export default {
components:{ components:{
coupon, coupon,
componentsMap,
NoneData, NoneData,
auth auth
}, },
......
...@@ -299,58 +299,7 @@ ...@@ -299,58 +299,7 @@
</div> </div>
</div> </div>
<city-info :city="detail"></city-info> <city-info :city="detail"></city-info>
<!-- <div class="top-title">關於{{detail.AreaName}}</div>
<div class="flex justify-between">
<div style="width: 720px">
{{detail.Introduction}}
</div>
<div>
<div id="baidu-map"></div>
</div>
</div>
<div class="mt pt">
<div class="flex mt">
<div class="flex items-center time-item">
<img
class="info-icon"
:src="require(`../../assets/img/info-time.png`)"
/>
<div>
<div class="f16 bold">時區 {{detail.TimeZones}}</div>
</div>
</div>
<div class="flex items-center time-item">
<img
class="info-icon"
:src="require('../../assets/img/info-currency.png')"
/>
<div>
<div class="f16 bold">貨幣 {{detail.CurrencyName}}</div>
</div>
</div>
<div class="flex items-center time-item">
<img
class="info-icon"
:src="require(`../../assets/img/info-ele.png`)"
/>
<div>
<div class="f16 bold">電壓 {{detail.Voltage}}</div>
</div>
</div>
<div class="flex time-item">
<img
class="info-icon"
:src="require(`../../assets/img/info-time.png`)"
/>
<div>
<div class="f16 bold q-mt-xs">旅遊時間</div>
<div v-for="(item, index) in detail.BestTravelTimeList" :key="index">
<span class="bold">{{item.Month}}</span><span class="q-ml-sm ">{{item.Description}}</span>
</div>
</div>
</div>
</div>
</div> -->
<nearCity :name="detail.AreaName" :cityList="detail.AdjacentCityList" /> <nearCity :name="detail.AreaName" :cityList="detail.AdjacentCityList" />
<q-dialog v-model="show"> <q-dialog v-model="show">
<div style="width: 900px"> <div style="width: 900px">
...@@ -463,12 +412,7 @@ export default { ...@@ -463,12 +412,7 @@ export default {
); );
}, },
createMap() { createMap() {
// let map = new BMapGL.Map("baidu-map"); // 创建地图实例
// this.map = map;
// let pointA = new BMapGL.Point(this.detail.Lng, this.detail.Lat); // 创建点坐标
// map.centerAndZoom(pointA, 8); // 初始化地图,设置中心点坐标和地图级别
// this.addMarker();
// this.addLabel()
}, },
addMarker() { addMarker() {
let icon = require(`../../assets/img/marker.png`); let icon = require(`../../assets/img/marker.png`);
...@@ -510,12 +454,7 @@ export default { ...@@ -510,12 +454,7 @@ export default {
}); });
}, },
createTopMap() { createTopMap() {
// let map = new BMapGL.Map("map"); // 创建地图实例
// this.topMap = map;
// let pointA = new BMapGL.Point(this.detail.Lng, this.detail.Lat); // 创建点坐标
// map.centerAndZoom(pointA, 8); // 初始化地图,设置中心点坐标和地图级别
// this.addTopMarker()
// this.addTopLabel()
}, },
addTopMarker() { addTopMarker() {
let icon = require(`../../assets/img/marker.png`); let icon = require(`../../assets/img/marker.png`);
......
...@@ -726,8 +726,8 @@ ...@@ -726,8 +726,8 @@
<div class="text-grey-9">地址:{{`${hotelSummary.address}`}}</div> <div class="text-grey-9">地址:{{`${hotelSummary.address}`}}</div>
</div> </div>
<div class="q-pa-md" v-for="(x,index) in travelLngLat" :key="index"> <div class="q-pa-md" v-for="(x,index) in travelLngLat" :key="index">
<componentsMap v-if="x.Lng&&x.Lat" :AddressObj="x"/> <!-- <componentsMap v-if="x.Lng&&x.Lat" :AddressObj="x"/>
<div v-else class="card text-center">经纬度未知</div> <div v-else class="card text-center">经纬度未知</div> -->
</div> </div>
</div> </div>
<div <div
......
...@@ -463,7 +463,7 @@ ...@@ -463,7 +463,7 @@
<div class="q-pa-md" :class="{ <div class="q-pa-md" :class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile, 'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"> }">
<componentsMap :AddressObj="x"/> <!-- <componentsMap :AddressObj="x"/> -->
</div> </div>
</div> </div>
<div <div
...@@ -489,7 +489,7 @@ ...@@ -489,7 +489,7 @@
<div class="q-pa-md" :class="{ <div class="q-pa-md" :class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile, 'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"> }">
<componentsMap :AddressObj="x"/> <!-- <componentsMap :AddressObj="x"/> -->
</div> </div>
</div> </div>
<div <div
...@@ -569,32 +569,22 @@ ...@@ -569,32 +569,22 @@
</div> </div>
</template> </template>
</div> </div>
<!-- <auth></auth> -->
</div> </div>
</template> </template>
<script> <script>
// import auth from "src/components/common/auth.vue";
import { slider, slideritem } from "vue-concise-slider"; import { slider, slideritem } from "vue-concise-slider";
import calendar from "../components/trip/calendar.vue"; import calendar from "../components/trip/calendar.vue";
import OrderPreview from "src/components/car/orderPreview.vue"; import OrderPreview from "src/components/car/orderPreview.vue";
// import smaple from "src/components/trip/smaple.vue";
// import Trip from "src/components/trip/trip.vue";
// import block from "src/components/trip/block/index";
import { date } from "quasar"; import { date } from "quasar";
import componentsMap from "../components/car/Map.vue"; import componentsMap from "../components/car/Map.vue";
// import * as dayjs from "dayjs";
export default { export default {
components: { components: {
slider, slider,
slideritem, slideritem,
calendar, calendar,
OrderPreview, OrderPreview,
// smaple,
// Trip,
// block,
componentsMap, componentsMap,
// auth,
}, },
props: [], props: [],
data() { data() {
......
<style scoped> <style scoped>
.card {
width: 380px;
height: 139px;
border: 1px solid #F0EFEF;
border-radius: 8px;
}
.card {width: 380px;
height: 139px;
border: 1px solid #F0EFEF;
border-radius: 8px;}
</style> </style>
<template> <template>
<div class="card" id="baidu-map"></div> <div class="card" id="baidu-map"></div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return {} return {}
},mounted() {
this.createMap();
this.addMarker();
this.addLabel()
},
methods: {
createMap() {
if (this.map) {
this.map.clearOverlays()
}
let map = new BMap.Map("baidu-map"); // 创建地图实例
let point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
var marker = new BMap.Marker(point); //标记点
map.addOverlay(marker);
this.map = map;
}, },
addMarker() { mounted() {
let icon = require(`../../assets/img/info-time.png`); this.createMap();
var myIcon = new BMapGL.Icon(icon, new BMapGL.Size(23, 25), { // this.addMarker();
// 指定定位位置。 // this.addLabel()
// 当标注显示在地图上时,其所指向的地理位置距离图标左上
// 角各偏移10像素和25像素。您可以看到在本例中该位置即是
// 图标中央下端的尖角位置。
anchor: new BMapGL.Size(10, 25),
// 设置图片偏移。
// 当您需要从一幅较大的图片中截取某部分作为标注图标时,您
// 需要指定大图的偏移位置,此做法与css sprites技术类似。
// imageOffset: new BMapGL.Size(0, 0 - 25) // 设置图片偏移
});
let point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
// 创建标注对象并添加到地图
var marker = new BMapGL.Marker(point, { icon: myIcon });
this.map.addOverlay(marker);
}, },
addLabel() { methods: {
var point = new BMapGL.Point(116.404, 39.915); createMap() {
var content = "label"; // if (this.map) {
var label = new BMapGL.Label(content, { // this.map.clearOverlays()
// 创建文本标注 // }
position: point, // 设置标注的地理位置 // let map = new BMap.Map("baidu-map"); // 创建地图实例
offset: new BMapGL.Size(10, -80), // 设置标注的偏移量 // let point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
}); // map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
this.map.addOverlay(label); // 将标注添加到地图中 // var marker = new BMap.Marker(point); //标记点
label.addEventListener("click", function () { // map.addOverlay(marker);
alert("您点击了标注"); // this.map = map;
}); },
label.setStyle({ addMarker() {
// 设置label的样式 let icon = require(`../../assets/img/info-time.png`);
color: "#000", var myIcon = new BMapGL.Icon(icon, new BMapGL.Size(23, 25), {
fontSize: "30px", // 指定定位位置。
border: "2px solid #1E90FF", // 当标注显示在地图上时,其所指向的地理位置距离图标左上
}); // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
// 图标中央下端的尖角位置。
anchor: new BMapGL.Size(10, 25),
// 设置图片偏移。
// 当您需要从一幅较大的图片中截取某部分作为标注图标时,您
// 需要指定大图的偏移位置,此做法与css sprites技术类似。
// imageOffset: new BMapGL.Size(0, 0 - 25) // 设置图片偏移
});
let point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
// 创建标注对象并添加到地图
var marker = new BMapGL.Marker(point, {
icon: myIcon
});
this.map.addOverlay(marker);
},
addLabel() {
var point = new BMapGL.Point(116.404, 39.915);
var content = "label";
var label = new BMapGL.Label(content, {
// 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMapGL.Size(10, -80), // 设置标注的偏移量
});
this.map.addOverlay(label); // 将标注添加到地图中
label.addEventListener("click", function () {
alert("您点击了标注");
});
label.setStyle({
// 设置label的样式
color: "#000",
fontSize: "30px",
border: "2px solid #1E90FF",
});
},
}, },
}, }
}
</script> </script>
...@@ -403,11 +403,10 @@ import { date } from 'quasar' ...@@ -403,11 +403,10 @@ import { date } from 'quasar'
import { json } from "body-parser"; import { json } from "body-parser";
import coupon from 'src/components/common/coupon.vue' import coupon from 'src/components/common/coupon.vue'
import ProductTypeEnum from "src/utils/producttypeenum"; import ProductTypeEnum from "src/utils/producttypeenum";
import componentsMap from "src/components/car/Map.vue";
export default { export default {
components:{ components:{
coupon, coupon,
componentsMap,
NoneData, NoneData,
auth auth
}, },
......
...@@ -25,8 +25,8 @@ ...@@ -25,8 +25,8 @@
<div class="q-pa-md" :class="{ <div class="q-pa-md" :class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile, 'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}" v-for="(x,index) in travelLngLat" :key="index"> }" v-for="(x,index) in travelLngLat" :key="index">
<componentsMap v-if="x.Lng&&x.Lat" :AddressObj="x"/> <!-- <componentsMap v-if="x.Lng&&x.Lat" :AddressObj="x"/>
<div v-else class="card text-center">经纬度未知</div> <div v-else class="card text-center">经纬度未知</div> -->
</div> </div>
</div></div> </div></div>
</template> </template>
......
...@@ -121,7 +121,7 @@ ...@@ -121,7 +121,7 @@
<script> <script>
import noneData from 'src/components/common/noneData.vue' import noneData from 'src/components/common/noneData.vue'
import componentsMap from "../../../components/car/Map.vue";
import carPriceDetail from './carPriceDetail.vue' import carPriceDetail from './carPriceDetail.vue'
import groupPriceDetail from './groupPriceDetail.vue' import groupPriceDetail from './groupPriceDetail.vue'
import hotelPriceDetail from './hotelPriceDetail.vue' import hotelPriceDetail from './hotelPriceDetail.vue'
...@@ -131,7 +131,7 @@ import groupMap from './groupMap.vue' ...@@ -131,7 +131,7 @@ import groupMap from './groupMap.vue'
import hotelMap from './hotelMap.vue' import hotelMap from './hotelMap.vue'
import ticketMap from './ticketMap.vue' import ticketMap from './ticketMap.vue'
export default { export default {
components: {noneData,componentsMap, carPriceDetail,groupPriceDetail,hotelPriceDetail,ticketPriceDetail,carMap,groupMap,hotelMap,ticketMap}, components: {noneData, carPriceDetail,groupPriceDetail,hotelPriceDetail,ticketPriceDetail,carMap,groupMap,hotelMap,ticketMap},
// GoodsType: this.productType,//商品类型(见枚举) 12包车 13 接机 14送机 // GoodsType: this.productType,//商品类型(见枚举) 12包车 13 接机 14送机
data() { data() {
return { return {
......
...@@ -25,8 +25,8 @@ ...@@ -25,8 +25,8 @@
<div class="q-pa-md" :class="{ <div class="q-pa-md" :class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile, 'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"> }">
<componentsMap v-if="AddressObj.Lng&&AddressObj.Lat" :AddressObj="AddressObj"/> <!-- <componentsMap v-if="AddressObj.Lng&&AddressObj.Lat" :AddressObj="AddressObj"/>
<div v-else class="card text-center">经纬度未知</div> <div v-else class="card text-center">经纬度未知</div> -->
</div> </div>
</div></div> </div></div>
</template> </template>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment