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 @@
<!-- <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/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>
</head>
<body>
......
src/assets/utils/googleMap.js
View file @ 8d4c274b
/**
* Created by Administrator on 2018/7/17.
*/
var googleMap = {
search_id: null,
map_id: null,
listData: [],
map: {},
marker: null,
markerList: [],
infoWindow: null,
geocoder: null,
callback: null,
defaultAddress: "",
imageDomain: "",
init: function (callback, queryAddress, imageUrl) {
googleMap.search_id = document.getElementById("address_all");
googleMap.map_id = document.getElementById("MapContent");
googleMap.listData = [];
googleMap.markerList = [];
googleMap.defaultAddress = queryAddress;
googleMap.imageDomain = imageUrl;
googleMap.deleteLink();
search_id: null,
map_id: null,
listData: [],
map: {},
marker: null,
markerList: [],
infoWindow: null,
geocoder: null,
callback: null,
defaultAddress: "",
imageDomain: "",
init: function (callback, queryAddress, imageUrl) {
googleMap.search_id = document.getElementById("address_all");
googleMap.map_id = document.getElementById("MapContent");
googleMap.listData = [];
googleMap.markerList = [];
googleMap.defaultAddress = queryAddress;
googleMap.imageDomain = imageUrl;
googleMap.deleteLink();
var items = [];
var item = {};
item['lat'] = parseFloat("30.6574389");
item['lng'] = parseFloat("104.06592380000006");
items[0] = item;
googleMap.listData = items;
googleMap.listData = items;
var items = [];
var item = {};
item['lat'] = parseFloat("30.6574389");
item['lng'] = parseFloat("104.06592380000006");
items[0] = item;
googleMap.listData = items;
googleMap.listData = items;
googleMap.initMap();
if (googleMap.defaultAddress == "") {
googleMap.initMapFirst();
}
else {
googleMap.searchAddress();
}
googleMap.callback = callback;
},
deleteLink: function () {
//删除google的字体
var e = document;
var t = e.getElementsByTagName("head")[0],
a = t.insertBefore;
t.insertBefore = function (e, i) {
e.href && e.href.indexOf("fonts.googleapis.com") > -1 || a.call(t, e, i)
}
},
initMap: function () {
var data = [];
if (('undefined' != googleMap.listData) && googleMap.listData.length > 0) {
data[0] = googleMap.listData[0];
var LatLng = new google.maps.LatLng(data[0].lat, data[0].lng);
if (data.length > 0) {
googleMap.map = new google.maps.Map(googleMap.map_id, {
zoom: 14, center: LatLng
});
}
}
googleMap.geocoder = new google.maps.Geocoder();
//添加监听点击地图事件
google.maps.event.addListener(googleMap.map, 'click', function (event) {
googleMap.placeMarker(event.latLng);
googleMap.initMap();
if (googleMap.defaultAddress == "") {
googleMap.initMapFirst();
} else {
googleMap.searchAddress();
}
googleMap.callback = callback;
},
deleteLink: function () {
//删除google的字体
var e = document;
var t = e.getElementsByTagName("head")[0],
a = t.insertBefore;
t.insertBefore = function (e, i) {
e.href && e.href.indexOf("fonts.googleapis.com") > -1 || a.call(t, e, i)
}
},
initMap: function () {
var data = [];
if (('undefined' != googleMap.listData) && googleMap.listData.length > 0) {
data[0] = googleMap.listData[0];
var LatLng = new google.maps.LatLng(data[0].lat, data[0].lng);
if (data.length > 0) {
googleMap.map = new google.maps.Map(googleMap.map_id, {
zoom: 14,
center: 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 () {
if (event.keyCode == 13) {
googleMap.searchAddress();
}
}
//搜索文本框的回车事件
googleMap.search_id.onkeydown = function () {
if (event.keyCode == 13) {
googleMap.searchAddress();
}
}
},
initMapFirst: function () {
if (('undefined' != googleMap.listData) && (googleMap.listData.length > 0)) {
googleMap.GetAddress(googleMap.listData[0].lat, googleMap.listData[0].lng);
}
},
addInfowindow: function (lat, lng, address, newArray, isCallBack) {
var message = "<div style='text-align:left;'>";
message += "<br />";
message += "纬度:<span style='color:#06c;'>" + lat + "</span>&nbsp;&nbsp;经度:<span style='color: #FD7917;'>" + lng + "</span>";
message += "<br />";
message += "地址:" + address;
message += "</div>";
if (googleMap.marker) {
googleMap.marker.setMap(null);
}
var imageUrl = googleMap.imageDomain + "/static/img/position_red.png";
if (isCallBack == 1) {
imageUrl = googleMap.imageDomain + "/static/img/position_blue.png";
}
googleMap.marker = new google.maps.Marker({
title: address,
map: googleMap.map,
position: new google.maps.LatLng(lat, lng),
icon: imageUrl
});
},
initMapFirst: function () {
if (('undefined' != googleMap.listData) && (googleMap.listData.length > 0)) {
googleMap.GetAddress(googleMap.listData[0].lat, googleMap.listData[0].lng);
}
},
addInfowindow: function (lat, lng, address, newArray, isCallBack) {
var message = "<div style='text-align:left;'>";
message += "<br />";
message += "纬度:<span style='color:#06c;'>" + lat + "</span>&nbsp;&nbsp;经度:<span style='color: #FD7917;'>" + lng + "</span>";
message += "<br />";
message += "地址:" + address;
message += "</div>";
if (googleMap.marker) {
googleMap.marker.setMap(null);
}
var imageUrl = {};
if (isCallBack == 1) {
imageUrl = {
url: googleMap.imageDomain + "/static/location_01.png", // image is 512 x 512
scaledSize: new google.maps.Size(30, 40),
}
} else {
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) {
googleMap.infowindow.close();
}
googleMap.infowindow = new google.maps.InfoWindow({
content: message,
size: new google.maps.Size(50, 50)
});
googleMap.infowindow.open(googleMap.map, googleMap.marker);
if (googleMap.infowindow) {
googleMap.infowindow.close();
}
googleMap.infowindow = new google.maps.InfoWindow({
content: message,
size: new google.maps.Size(50, 50)
});
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) {
googleMap.callback({
"lat": lat,
"lng": lng,
"address": address,
"areaArray": newArray,
})
}
},
GetAddress: function (lat, lng) {
var address = "四川成都天府广场";
googleMap.addInfowindow(lat, lng, address);
return address;
},
searchAddress: function () {
var address = googleMap.search_id.value;
googleMap.geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
googleMap.getAddress(results,1);
}
});
},
placeMarker: function (location) {
//地图的点击事件，根据点击的点获取经度，纬度和地址信息
if (googleMap.geocoder) {
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);
if (googleMap.callback != null && isCallBack == 1) {
googleMap.callback({
"lat": lat,
"lng": lng,
"address": address,
"areaArray": newArray,
})
}
},
GetAddress: function (lat, lng) {
var address = "四川成都天府广场";
googleMap.addInfowindow(lat, lng, address);
return address;
},
searchAddress: function () {
var address = googleMap.search_id.value;
googleMap.geocoder.geocode({
'address': address
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
googleMap.getAddress(results, 1);
}
});
},
placeMarker: function (location) {
//地图的点击事件，根据点击的点获取经度，纬度和地址信息
if (googleMap.geocoder) {
googleMap.geocoder.geocode({
'location': location
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
googleMap.getAddress(results, 1);
}
},
//判断数组是否存在 值
isExists: function (arr, item) {
var flag = false;
for (var i = 0; i < arr.length; i++) {
if (arr[i] == item) {
flag = true;
break;
});
}
},
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);
}
})
}
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.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
googleMap.addInfowindow(results[0].geometry.location.lat(), results[0].geometry.location.lng(), Address, newArray, isCallBack);
}
},
//判断数组是否存在 值
isExists: function (arr, item) {
var flag = false;
for (var i = 0; i < arr.length; i++) {
if (arr[i] == item) {
flag = true;
break;
}
_this.directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
_this.directionsDisplay.setDirections(result);
}
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.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;
src/plug/index.js
View file @ 8d4c274b
......@@ -111,7 +111,7 @@ export default {
//域名管理对象
Vue.prototype.domainManager = function () {
let domainUrl = '';
domainUrl = "http://192.168.2.66:8025";
domainUrl = "http://192.168.2.214:8082";
let locationName = window.location.hostname;
let javaUrldo="";
......@@ -143,9 +143,9 @@ export default {
//SocketUrl
WebSocketUrl: "ws://192.168.1.110:8080?account=",
//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地图图片地址
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",
//文件站点
......
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