Skip to content

M
million
Commit dcd3e373 authored by 黄奎's avatar 黄奎
Browse files
Options

去掉百度地图

parent 5e984a34
Hide whitespace changes
Inline Side-by-side
Showing with 561 additions and 627 deletions
src/boot/utils.js
View file @ dcd3e373
......@@ -25,7 +25,7 @@ Vue.prototype.domainManager = function () {
if (domainNameUrl.indexOf('oytour') !== -1) {
domainUrl = "http://reborn.oytour.com";
}
domainUrl = "http://192.168.5.56";
domainUrl = "http://reborn.oytour.com";
var obj = {
//主地址
DomainUrl: domainUrl,
......
src/components/car/Map.vue
View file @ dcd3e373
<style scoped>
.card {width: 100vm;
.card {
width: 100vm;
height: 320px;
border: 1px solid #F0EFEF;
border-radius: 8px;}
</style>
<template>
<div>
<div class="card" :id="`baidu-map_${center.Id}`"></div>
</div>
</template>
<script>
export default {
props:["AddressObj"],
data() {
return {
center:{
Lng: 116.294625,
Lat: 39.961627
},
keywords: ''
}
border-radius: 8px;
}
</style>
<template>
<div>
<div class="card" :id="`baidu-map_${center.Id}`"></div>
</div>
</template>
<script>
export default {
props: ["AddressObj"],
data() {
return {
center: {
Lng: 116.294625,
Lat: 39.961627
},
keywords: ''
}
},
watch: {
AddressObj: {
handler(newValue, onldValue) {
this.center = newValue
},
watch: {
AddressObj:{
handler(newValue,onldValue) {
this.center = newValue
},
deep:true,
immediate:true
deep: true,
immediate: true
},
keywords: {
handler(newValue, onldValue) {
this.getLocalSearch()
},
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() {
this.createMap();
this.addMarker();
this.addLabel()
if(this.center.Range&&this.center.Range>0){
this.addCircle()
}
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);
},
methods: {
createMap() {
if (this.map) {
this.map.clearOverlays()
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
}
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 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);
},
});
local.searchNearby(this.keywords, mPoint, this.center.Range);
},
}
</script>
\ No newline at end of file
},
}
</script>
src/components/common/tripBaiduMap.vue
View file @ dcd3e373
<style>
.markers_labels {
margin-left: -24px !important;
margin-top: -43px !important;
}
.markers_labels {
margin-left: -24px !important;
margin-top: -43px !important;
}
.gm-svpc,
.gm-style-mtc,
.gm-style-cc {
display: none;
}
.gm-svpc,
.gm-style-mtc,
.gm-style-cc {
display: none;
}
.classA {
background-size: 700px 1600px;
background-position: 0px -1200px;
width: 34px;
height: 34px;
position: absolute;
left: -16px;
top: -16px;
}
.classA {
background-size: 700px 1600px;
background-position: 0px -1200px;
width: 34px;
height: 34px;
position: absolute;
left: -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>
<template>
<div style="height:100%;">
<div id="map_canvas" style="height: 100%; width: 100%"></div>
</div>
<div style="height:100%;">
<div id="map_canvas" style="height: 100%; width: 100%"></div>
</div>
</template>
<script>
export default {
props: ["locationArray", "type"],
data() {
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() {
export default {
props: ["locationArray", "type"],
data() {
return {
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() {
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;
}
}
},
destroyed: function () {
}
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); //开启信息窗口
});
},
mounted() {
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))
// }
}
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)
// })
// 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;
}
},
}
</script>
\ No newline at end of file
} else {
if (arr[i].location == checkItem.location && !isExists) {
isExists = true;
}
}
}
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>
src/index.template.html
View file @ dcd3e373
......@@ -2,86 +2,84 @@
<html>
<head>
<title>
<%= htmlWebpackPlugin.options.productName %>
</title>
<title>
<%= htmlWebpackPlugin.options.productName %>
</title>
<meta charset="utf-8">
<meta name="description" content="<%= htmlWebpackPlugin.options.productDescription %>">
<meta name="format-detection" content="telephone=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 charset="utf-8">
<meta name="description" content="<%= htmlWebpackPlugin.options.productDescription %>">
<meta name="format-detection" content="telephone=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<% } %>">
<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="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/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 {
<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="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/ico" href="statics/icons/favicon.ico">
// 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) {
var script = document.createElement("script"); //创建一个script标签
script.type = "text/javascript";
script.src = code
document.getElementsByTagName('head')[0].appendChild(script);
}
<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')
}
}
function loadScriptString(code) {
var script = document.createElement("script"); //创建一个script标签
script.type = "text/javascript";
script.src = code
document.getElementsByTagName('head')[0].appendChild(script);
}
function isInChina() {
let that = this
var url = '//graph.facebook.com/feed?callback=h';
var xhr = new XMLHttpRequest();
var called = false;
xhr.open('GET', url);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
called = true;
that.countryCb(false);
}
};
xhr.send();
// timeout 1s, this facebook API is very fast.
setTimeout(function() {
if (!called) {
xhr.abort();
that.countryCb(true);
}
}, 1000);
function isInChina() {
let that = this
var url = '//graph.facebook.com/feed?callback=h';
var xhr = new XMLHttpRequest();
var called = false;
xhr.open('GET', url);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
called = true;
that.countryCb(false);
}
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>
<body>
<!-- DO NOT touch the following DIV -->
<div id="q-app"></div>
<!-- DO NOT touch the following DIV -->
<div id="q-app"></div>
</body>
</html>
\ No newline at end of file
</html>
src/pages/ScenicSpotTicket/details.vue
View file @ dcd3e373
......@@ -446,8 +446,8 @@
<div class="q-pa-md" :class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}">
<componentsMap v-if="AddressObj.Lng&&AddressObj.Lat" :AddressObj="AddressObj"/>
<div v-else class="card text-center">经纬度未知</div>
<!-- <componentsMap v-if="AddressObj.Lng&&AddressObj.Lat" :AddressObj="AddressObj"/> -->
<!-- <div v-else class="card text-center">经纬度未知</div> -->
</div>
</div>
<div
......
src/pages/ScenicSpotTicket/orderForm.vue
View file @ dcd3e373
......@@ -348,11 +348,9 @@
import { json } from "body-parser";
import coupon from 'src/components/common/coupon.vue'
import ProductTypeEnum from "src/utils/producttypeenum";
import componentsMap from "src/components/car/Map.vue";
export default {
components:{
coupon,
componentsMap,
NoneData,
auth
},
......
src/pages/city/cityDetail.vue
View file @ dcd3e373
......@@ -299,58 +299,7 @@
</div>
</div>
<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" />
<q-dialog v-model="show">
<div style="width: 900px">
......@@ -463,12 +412,7 @@ export default {
);
},
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() {
let icon = require(`../../assets/img/marker.png`);
......@@ -510,12 +454,7 @@ export default {
});
},
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() {
let icon = require(`../../assets/img/marker.png`);
......
src/pages/detailHotal.vue
View file @ dcd3e373
......@@ -726,8 +726,8 @@
<div class="text-grey-9">地址：{{`${hotelSummary.address}`}}</div>
</div>
<div class="q-pa-md" v-for="(x,index) in travelLngLat" :key="index">
<componentsMap v-if="x.Lng&&x.Lat" :AddressObj="x"/>
<div v-else class="card text-center">经纬度未知</div>
<!-- <componentsMap v-if="x.Lng&&x.Lat" :AddressObj="x"/>
<div v-else class="card text-center">经纬度未知</div> -->
</div>
</div>
<div
......
src/pages/detailsCar.vue
View file @ dcd3e373
......@@ -463,7 +463,7 @@
<div class="q-pa-md" :class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}">
<componentsMap :AddressObj="x"/>
<!-- <componentsMap :AddressObj="x"/> -->
</div>
</div>
<div
......@@ -489,7 +489,7 @@
<div class="q-pa-md" :class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}">
<componentsMap :AddressObj="x"/>
<!-- <componentsMap :AddressObj="x"/> -->
</div>
</div>
<div
......@@ -569,32 +569,22 @@
</div>
</template>
</div>
<!-- <auth></auth> -->
</div>
</template>
<script>
// import auth from "src/components/common/auth.vue";
import { slider, slideritem } from "vue-concise-slider";
import calendar from "../components/trip/calendar.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 componentsMap from "../components/car/Map.vue";
// import * as dayjs from "dayjs";
export default {
components: {
slider,
slideritem,
calendar,
OrderPreview,
// smaple,
// Trip,
// block,
componentsMap,
// auth,
},
props: [],
data() {
......
src/pages/hotel/hotelMap.vue
View file @ dcd3e373
<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>
<template>
<div class="card" id="baidu-map"></div>
<div class="card" id="baidu-map"></div>
</template>
<script>
export default {
export default {
data() {
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;
return {}
},
addMarker() {
let icon = require(`../../assets/img/info-time.png`);
var myIcon = new BMapGL.Icon(icon, new BMapGL.Size(23, 25), {
// 指定定位位置。
// 当标注显示在地图上时，其所指向的地理位置距离图标左上
// 角各偏移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);
mounted() {
this.createMap();
// this.addMarker();
// this.addLabel()
},
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",
});
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() {
let icon = require(`../../assets/img/info-time.png`);
var myIcon = new BMapGL.Icon(icon, new BMapGL.Size(23, 25), {
// 指定定位位置。
// 当标注显示在地图上时，其所指向的地理位置距离图标左上
// 角各偏移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>
src/pages/hotel/orderForm.vue
View file @ dcd3e373
......@@ -403,11 +403,10 @@ import { date } from 'quasar'
import { json } from "body-parser";
import coupon from 'src/components/common/coupon.vue'
import ProductTypeEnum from "src/utils/producttypeenum";
import componentsMap from "src/components/car/Map.vue";
export default {
components:{
coupon,
componentsMap,
NoneData,
auth
},
......
src/pages/usercenter/order/hotelMap.vue
View file @ dcd3e373
......@@ -25,8 +25,8 @@
<div class="q-pa-md" :class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}" v-for="(x,index) in travelLngLat" :key="index">
<componentsMap v-if="x.Lng&&x.Lat" :AddressObj="x"/>
<div v-else class="card text-center">经纬度未知</div>
<!-- <componentsMap v-if="x.Lng&&x.Lat" :AddressObj="x"/>
<div v-else class="card text-center">经纬度未知</div> -->
</div>
</div></div>
</template>
......
src/pages/usercenter/order/orderDetail.vue
View file @ dcd3e373
......@@ -121,7 +121,7 @@
<script>
import noneData from 'src/components/common/noneData.vue'
import componentsMap from "../../../components/car/Map.vue";
import carPriceDetail from './carPriceDetail.vue'
import groupPriceDetail from './groupPriceDetail.vue'
import hotelPriceDetail from './hotelPriceDetail.vue'
......@@ -131,7 +131,7 @@ import groupMap from './groupMap.vue'
import hotelMap from './hotelMap.vue'
import ticketMap from './ticketMap.vue'
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送机
data() {
return {
......
src/pages/usercenter/order/ticketMap.vue
View file @ dcd3e373
......@@ -25,8 +25,8 @@
<div class="q-pa-md" :class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}">
<componentsMap v-if="AddressObj.Lng&&AddressObj.Lat" :AddressObj="AddressObj"/>
<div v-else class="card text-center">经纬度未知</div>
<!-- <componentsMap v-if="AddressObj.Lng&&AddressObj.Lat" :AddressObj="AddressObj"/>
<div v-else class="card text-center">经纬度未知</div> -->
</div>
</div></div>
</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