Skip to content

S
SuperMan
Commit 8d4c274b authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent dfb3cddd
Hide whitespace changes
Inline Side-by-side
Showing with 223 additions and 210 deletions
index.html
View file @ 8d4c274b
...@@ -12,8 +12,7 @@ ...@@ -12,8 +12,7 @@
<!-- <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script> --> <!-- <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script> -->
<script type="text/javascript" src="static/MarkerClusterer.js"></script> <script type="text/javascript" src="static/MarkerClusterer.js"></script>
<script type="text/javascript" src="static/CurveLine.min.js"></script> <script type="text/javascript" src="static/CurveLine.min.js"></script>
<script type="text/javascript" src="http://ditu.google.cn/maps/api/js?key=AIzaSyAZ5MIfzicStzKbIkbI3RcBBeZBjQFKsp0&language=zh-CN"></script> <script type="text/javascript" src="http://ditu.google.cn/maps/api/js?key=AIzaSyBx6JAiyAFPwBN1nM-g_hpQ7lvdPY3n2oU&language=zh-CN"></script>
<title>四川和平国际旅行社</title> <title>四川和平国际旅行社</title>
</head> </head>
<body> <body>
......
src/assets/utils/googleMap.js
View file @ 8d4c274b
/** /**
* Created by Administrator on 2018/7/17. * Created by Administrator on 2018/7/17.
*/ */
var googleMap = { var googleMap = {
search_id: null, search_id: null,
map_id: null, map_id: null,
listData: [], listData: [],
map: {}, map: {},
marker: null, marker: null,
markerList: [], markerList: [],
infoWindow: null, infoWindow: null,
geocoder: null, geocoder: null,
callback: null, callback: null,
defaultAddress: "", defaultAddress: "",
imageDomain: "", imageDomain: "",
init: function (callback, queryAddress, imageUrl) { init: function (callback, queryAddress, imageUrl) {
googleMap.search_id = document.getElementById("address_all"); googleMap.search_id = document.getElementById("address_all");
googleMap.map_id = document.getElementById("MapContent"); googleMap.map_id = document.getElementById("MapContent");
googleMap.listData = []; googleMap.listData = [];
googleMap.markerList = []; googleMap.markerList = [];
googleMap.defaultAddress = queryAddress; googleMap.defaultAddress = queryAddress;
googleMap.imageDomain = imageUrl; googleMap.imageDomain = imageUrl;
googleMap.deleteLink(); googleMap.deleteLink();
var items = []; var items = [];
var item = {}; var item = {};
item['lat'] = parseFloat("30.6574389"); item['lat'] = parseFloat("30.6574389");
item['lng'] = parseFloat("104.06592380000006"); item['lng'] = parseFloat("104.06592380000006");
items[0] = item; items[0] = item;
googleMap.listData = items; googleMap.listData = items;
googleMap.listData = items; googleMap.listData = items;
googleMap.initMap(); googleMap.initMap();
if (googleMap.defaultAddress == "") { if (googleMap.defaultAddress == "") {
googleMap.initMapFirst(); googleMap.initMapFirst();
} } else {
else { googleMap.searchAddress();
googleMap.searchAddress(); }
} googleMap.callback = callback;
googleMap.callback = callback; },
}, deleteLink: function () {
deleteLink: function () { //删除google的字体
//删除google的字体 var e = document;
var e = document; var t = e.getElementsByTagName("head")[0],
var t = e.getElementsByTagName("head")[0], a = t.insertBefore;
a = t.insertBefore; t.insertBefore = function (e, i) {
t.insertBefore = function (e, i) { e.href && e.href.indexOf("fonts.googleapis.com") > -1 || a.call(t, e, i)
e.href && e.href.indexOf("fonts.googleapis.com") > -1 || a.call(t, e, i) }
} },
}, initMap: function () {
initMap: function () { var data = [];
var data = []; if (('undefined' != googleMap.listData) && googleMap.listData.length > 0) {
if (('undefined' != googleMap.listData) && googleMap.listData.length > 0) { data[0] = googleMap.listData[0];
data[0] = googleMap.listData[0]; var LatLng = new google.maps.LatLng(data[0].lat, data[0].lng);
var LatLng = new google.maps.LatLng(data[0].lat, data[0].lng); if (data.length > 0) {
if (data.length > 0) { googleMap.map = new google.maps.Map(googleMap.map_id, {
googleMap.map = new google.maps.Map(googleMap.map_id, { zoom: 14,
zoom: 14, center: LatLng center: LatLng
});
}
}
googleMap.geocoder = new google.maps.Geocoder();
//添加监听点击地图事件
google.maps.event.addListener(googleMap.map, 'click', function (event) {
googleMap.placeMarker(event.latLng);
}); });
}
}
googleMap.geocoder = new google.maps.Geocoder();
//添加监听点击地图事件
google.maps.event.addListener(googleMap.map, 'click', function (event) {
googleMap.placeMarker(event.latLng);
});
//搜索文本框的回车事件 //搜索文本框的回车事件
googleMap.search_id.onkeydown = function () { googleMap.search_id.onkeydown = function () {
if (event.keyCode == 13) { if (event.keyCode == 13) {
googleMap.searchAddress(); googleMap.searchAddress();
} }
} }
}, },
initMapFirst: function () { initMapFirst: function () {
if (('undefined' != googleMap.listData) && (googleMap.listData.length > 0)) { if (('undefined' != googleMap.listData) && (googleMap.listData.length > 0)) {
googleMap.GetAddress(googleMap.listData[0].lat, googleMap.listData[0].lng); googleMap.GetAddress(googleMap.listData[0].lat, googleMap.listData[0].lng);
} }
}, },
addInfowindow: function (lat, lng, address, newArray, isCallBack) { addInfowindow: function (lat, lng, address, newArray, isCallBack) {
var message = "<div style='text-align:left;'>"; var message = "<div style='text-align:left;'>";
message += "<br />"; message += "<br />";
message += "纬度:<span style='color:#06c;'>" + lat + "</span>&nbsp;&nbsp;经度:<span style='color: #FD7917;'>" + lng + "</span>"; message += "纬度:<span style='color:#06c;'>" + lat + "</span>&nbsp;&nbsp;经度:<span style='color: #FD7917;'>" + lng + "</span>";
message += "<br />"; message += "<br />";
message += "地址:" + address; message += "地址:" + address;
message += "</div>"; message += "</div>";
if (googleMap.marker) { if (googleMap.marker) {
googleMap.marker.setMap(null); googleMap.marker.setMap(null);
} }
var imageUrl = googleMap.imageDomain + "/static/img/position_red.png"; var imageUrl = {};
if (isCallBack == 1) { if (isCallBack == 1) {
imageUrl = googleMap.imageDomain + "/static/img/position_blue.png"; imageUrl = {
} url: googleMap.imageDomain + "/static/location_01.png", // image is 512 x 512
googleMap.marker = new google.maps.Marker({ scaledSize: new google.maps.Size(30, 40),
title: address, }
map: googleMap.map, } else {
position: new google.maps.LatLng(lat, lng), imageUrl = {
icon: imageUrl url: googleMap.imageDomain + "/static/location_01.png", // image is 512 x 512
}); scaledSize: new google.maps.Size(30, 40),
}
}
googleMap.marker = new google.maps.Marker({
title: address,
map: googleMap.map,
position: new google.maps.LatLng(lat, lng),
icon: imageUrl
});
if (googleMap.infowindow) { if (googleMap.infowindow) {
googleMap.infowindow.close(); googleMap.infowindow.close();
} }
googleMap.infowindow = new google.maps.InfoWindow({ googleMap.infowindow = new google.maps.InfoWindow({
content: message, content: message,
size: new google.maps.Size(50, 50) size: new google.maps.Size(50, 50)
}); });
googleMap.infowindow.open(googleMap.map, googleMap.marker); googleMap.infowindow.open(googleMap.map, googleMap.marker);
//设置居中 //设置居中
googleMap.map.setCenter(new google.maps.LatLng(lat, lng)); googleMap.map.setCenter(new google.maps.LatLng(lat, lng));
if (googleMap.callback != null && isCallBack == 1) { if (googleMap.callback != null && isCallBack == 1) {
googleMap.callback({ googleMap.callback({
"lat": lat, "lat": lat,
"lng": lng, "lng": lng,
"address": address, "address": address,
"areaArray": newArray, "areaArray": newArray,
}) })
} }
}, },
GetAddress: function (lat, lng) { GetAddress: function (lat, lng) {
var address = "四川成都天府广场"; var address = "四川成都天府广场";
googleMap.addInfowindow(lat, lng, address); googleMap.addInfowindow(lat, lng, address);
return address; return address;
}, },
searchAddress: function () { searchAddress: function () {
var address = googleMap.search_id.value; var address = googleMap.search_id.value;
googleMap.geocoder.geocode({ 'address': address }, function (results, status) { googleMap.geocoder.geocode({
if (status == google.maps.GeocoderStatus.OK) { 'address': address
googleMap.getAddress(results,1); }, function (results, status) {
} if (status == google.maps.GeocoderStatus.OK) {
}); googleMap.getAddress(results, 1);
}, }
placeMarker: function (location) { });
//地图的点击事件，根据点击的点获取经度，纬度和地址信息 },
if (googleMap.geocoder) { placeMarker: function (location) {
googleMap.geocoder.geocode({ 'location': location }, function (results, status) { //地图的点击事件，根据点击的点获取经度，纬度和地址信息
if (status == google.maps.GeocoderStatus.OK) { if (googleMap.geocoder) {
googleMap.getAddress(results, 1); googleMap.geocoder.geocode({
} 'location': location
}); }, function (results, status) {
} if (status == google.maps.GeocoderStatus.OK) {
}, googleMap.getAddress(results, 1);
getAddress: function (results, isCallBack) {
var re = /^[\u4E00-\u9FA5]+$/;
if (results[0]) {
var Address = results[0].formatted_address;
var newArray = [];
results.forEach(item => {
if (re.test(item.formatted_address)) {
item.address_components.forEach(arrItem => {
var name = arrItem.long_name.replace('省', '').replace('市', '');
if (!googleMap.isExists(newArray, name)) {
newArray.push(name);
}
})
}
});
googleMap.addInfowindow(results[0].geometry.location.lat(), results[0].geometry.location.lng(), Address, newArray, isCallBack);
} }
}, });
//判断数组是否存在 值 }
isExists: function (arr, item) { },
var flag = false; getAddress: function (results, isCallBack) {
for (var i = 0; i < arr.length; i++) { var re = /^[\u4E00-\u9FA5]+$/;
if (arr[i] == item) { if (results[0]) {
flag = true; var Address = results[0].formatted_address;
break; var newArray = [];
results.forEach(item => {
if (re.test(item.formatted_address)) {
item.address_components.forEach(arrItem => {
var name = arrItem.long_name.replace('省', '').replace('市', '');
if (!googleMap.isExists(newArray, name)) {
newArray.push(name);
} }
})
} }
return flag;
},
initLine: function (dataList, _this) {
let _dataList = JSON.parse(JSON.stringify(dataList));
let lat = parseFloat(_dataList[0].lat);
let lng = parseFloat(_dataList[0].lng);
let center = {lng: lng, lat: lat}
//创建地图实例，zoom是缩放比例
_this.map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 7,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
}); });
_this.directionsDisplay.setMap(_this.map); googleMap.addInfowindow(results[0].geometry.location.lat(), results[0].geometry.location.lng(), Address, newArray, isCallBack);
googleMap.calcRoute(_dataList, _this) }
}, },
calcRoute: function(_dataList, _this) { // 创建路径规划 //判断数组是否存在 值
// 分解数据 获得起 止 以及中间数据 isExists: function (arr, item) {
let lat = parseFloat(_dataList[0].lat); var flag = false;
let lng = parseFloat(_dataList[0].lng); for (var i = 0; i < arr.length; i++) {
let elat = parseFloat(_dataList[_dataList.length-1].lat); if (arr[i] == item) {
let elng = parseFloat(_dataList[_dataList.length-1].lng); flag = true;
let start = lat + ',' + lng; break;
let end = elat + ',' + elng;
let waypoints = [];
if (_dataList.length > 2) {
_dataList.forEach((x, index) => {
if (index >= 1 && index !== (_dataList.length-1)) {
let obj = {
location: x.lat + ',' + x.lng
};
waypoints.push(obj)
}
});
}
let request = { // 组装连线数据
origin:start, // 起
destination:end, // 止
travelMode: google.maps.TravelMode.DRIVING,
// waypoints: [{location:"30.5226477,104.05806469999993"},{location:"30.67416759999999,104.04721970000003"}] // 中间点数据
};
if (waypoints.length > 0) {
request.waypoints = waypoints
} }
}
_this.directionsService.route(request, function(result, status) { return flag;
if (status == google.maps.DirectionsStatus.OK) { },
_this.directionsDisplay.setDirections(result); initLine: function (dataList, _this) {
let _dataList = JSON.parse(JSON.stringify(dataList));
let lat = parseFloat(_dataList[0].lat);
let lng = parseFloat(_dataList[0].lng);
let center = {
lng: lng,
lat: lat
}
//创建地图实例，zoom是缩放比例
_this.map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 7,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
_this.directionsDisplay.setMap(_this.map);
googleMap.calcRoute(_dataList, _this)
},
calcRoute: function (_dataList, _this) { // 创建路径规划
// 分解数据 获得起 止 以及中间数据
let lat = parseFloat(_dataList[0].lat);
let lng = parseFloat(_dataList[0].lng);
let elat = parseFloat(_dataList[_dataList.length - 1].lat);
let elng = parseFloat(_dataList[_dataList.length - 1].lng);
let start = lat + ',' + lng;
let end = elat + ',' + elng;
let waypoints = [];
if (_dataList.length > 2) {
_dataList.forEach((x, index) => {
if (index >= 1 && index !== (_dataList.length - 1)) {
let obj = {
location: x.lat + ',' + x.lng
};
waypoints.push(obj)
} }
}); });
}, }
let request = { // 组装连线数据
origin: start, // 起
destination: end, // 止
travelMode: google.maps.TravelMode.DRIVING,
// waypoints: [{location:"30.5226477,104.05806469999993"},{location:"30.67416759999999,104.04721970000003"}] // 中间点数据
};
if (waypoints.length > 0) {
request.waypoints = waypoints
}
_this.directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
_this.directionsDisplay.setDirections(result);
}
});
},
}; };
export default googleMap; export default googleMap;
src/plug/index.js
View file @ 8d4c274b
...@@ -111,7 +111,7 @@ export default { ...@@ -111,7 +111,7 @@ export default {
//域名管理对象 //域名管理对象
Vue.prototype.domainManager = function () { Vue.prototype.domainManager = function () {
let domainUrl = ''; let domainUrl = '';
domainUrl = "http://192.168.2.66:8025"; domainUrl = "http://192.168.2.214:8082";
let locationName = window.location.hostname; let locationName = window.location.hostname;
let javaUrldo=""; let javaUrldo="";
...@@ -143,9 +143,9 @@ export default { ...@@ -143,9 +143,9 @@ export default {
//SocketUrl //SocketUrl
WebSocketUrl: "ws://192.168.1.110:8080?account=", WebSocketUrl: "ws://192.168.1.110:8080?account=",
//google地图Url //google地图Url
GoogleMapUrl: "http://ditu.google.cn/maps/api/js?key=AIzaSyAZ5MIfzicStzKbIkbI3RcBBeZBjQFKsp0&sensor=false&language=zh-CN", GoogleMapUrl: "http://ditu.google.cn/maps/api/js?key=AIzaSyBx6JAiyAFPwBN1nM-g_hpQ7lvdPY3n2oU&sensor=false&language=zh-CN",
//google地图图片地址 //google地图图片地址
GoogleMapImageUrl: "http://super.oytour.com", GoogleMapImageUrl: "http://imgfile.oytour.com",
//上传站点 //上传站点
UploadUrl: locationName.indexOf('oytour') !== -1 || locationName.indexOf('viitto') !== -1 ? "http://upload.oytour.com" : "http://192.168.2.214:8120", UploadUrl: locationName.indexOf('oytour') !== -1 || locationName.indexOf('viitto') !== -1 ? "http://upload.oytour.com" : "http://192.168.2.214:8120",
//文件站点 //文件站点
......
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