vue中文版和国际版如何切换百度地图和谷歌地图
程序员文章站
2022-06-15 15:06:08
...
定义两个对象分别gisGoogle,gisBaidu用于导航之间的切换,代码只是记录一下自己的项目,整的有点乱,但是根据自己的项目需求可按照这样的思路去实现封装
//用于谷歌地图
var gisGoogle = {
marker: null,
markers: [],
path: null,
infoWindow: null,
//初始化地图
initMap(divId) {
map = new google.maps.Map(document.getElementById(divId), {
center: { lat: 22.545573, lng: 114.111295 },
zoom: 10
});
},
//添加多个描点
addMarker(options) {
if (options.id) {
this.clearMarker(options.id);
}
var newxy = proj.wgsTomars([options.x,options.y])
var uluru = { lat: newxy[1], lng: newxy[0] };
var marker = new google.maps.Marker({
position: uluru,
map: map,
icon: options.icon
});
marker.cid = options.id;
this.markers.push(marker);
if (this.infoWindow) {
this.infoWindow.close();
this.infoWindow = null;
}
if (options.popup) {
marker.addListener('click', function (e) {
if (this.infoWindow) {
this.infoWindow.close();
this.infoWindow = null;
}
this.infoWindow = new google.maps.InfoWindow({
content: options.popup()
});
this.infoWindow.open(map, marker);
}.bind(this));
}
},
//清除描点
clearMarker(id) {
if (this.marker) {
this.marker.setMap(null);
this.marker = null;
}
if (this.infoWindow) {
this.infoWindow.close();
this.infoWindow = null;
}
if (this.markers.length > 0) {
for (let i = this.markers.length - 1; i >= 0; i--) {
var marker = this.markers[i];
if (marker.cid == id) {
marker.setMap(null);
marker = null;
this.markers.splice(i, 1);
return i;
break;
}
//break;
}
}
},
//绘制路线
addLine(options) {
var points = [];
var xmin = options.coords[0][0],
ymin = options.coords[0][1],
xmax = options.coords[0][0],
ymax = options.coords[0][1];
options.coords.forEach(data => {
var newxy = proj.wgsTomars(data)
points.push({ lng: newxy[0], lat: newxy[1] });
if (xmin > data[0]) xmin = data[0];
if (ymin > data[1]) ymin = data[1];
if (xmax < data[0]) xmax = data[0];
if (ymax < data[1]) ymax = data[1];
})
var sy = {
path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
scale: 1,//图标缩放大小
strokeColor: '#fff',//设置矢量图标的线填充颜色
strokeWeight: '1',//设置线宽
fillColor: '#ffffff',
fillOpacity: 0.8,
strokeOpacity:1
};
//设置轨迹样式
this.path = new google.maps.Polyline({
path: points,
geodesic: true,
strokeColor: '#0000FF',
strokeOpacity: 1.0,
strokeWeight: 8,
icons: [{
icon: sy,
offset: "10%",
repeat: "10%",
}]
});
this.path.setMap(map);
var bounds = new google.maps.LatLngBounds({ lng: xmin, lat: ymin }, { lng: xmax, lat: ymax});
map.fitBounds(bounds);
},
//清除轨迹
clearLine() {
if (this.path) {
this.path.setMap(null);
this.path = null;
}
},
//通过经纬度解析地址
getLocation(options) {
var geocoder = new google.maps.Geocoder;
var pt = new BMap.Point(options.x, options.y);
var latlng = { lng: options.x, lat: options.y }
geocoder.geocode({ 'location': latlng }, function (results, statuas) {
var address;
if (results) {
if (results[0])
address = results[0].formatted_address
}
setTimeout(() => {
options.callback(address);
}, 300);
});
}
}
//百度地图
var gisBaidu = {
marker: null,
markers: [],
path: null,
infoWindow: null,
initMap(divId) {
//百度地图功能
map = new BMap.Map(divId); // 创建Map实例
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(new BMap.Point(114.111295, 22.545573), 10);
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes: [
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]
}));
// 添加带有定位的导航控件
var navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_LEFT,
// LARGE类型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 启用显示定位
enableGeolocation: true
});
// function showInfo(e){
// alert(e.point.lng + ", " + e.point.lat);
// }
// map.addEventListener("click", showInfo);
map.addControl(navigationControl);
map.setCurrentCity("深圳");
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
//滑动事件
map.addEventListener("mousemove", function (e) {
var p = e.point;
$("#coordTip").html(p.lng + ',' + p.lat);
});
},
//添加自定义描点功能
addMarker(options) {
if (options.id) {
this.clearMarker(options.id);
}
var point = new BMap.Point(options.x, options.y);
var marker;
if (options.icon) {
var iconObj = new BMap.Icon(options.icon, new BMap.Size(19, 31));
marker = new BMap.Marker(point, { icon: iconObj, offset: new BMap.Size(0, -15) });
} else {
marker = new BMap.Marker(point);
}
marker.cid = options.id;
this.markers.push(marker);
map.addOverlay(marker);
if (options.zoom) {
map.centerAndZoom(point, 15);
}
var opts = {
width: 300, // 信息窗口宽度
height: 120, // 信息窗口高度
title: "",// 信息窗口标题
enableMessage: true,//设置允许信息窗发送短息
message: "1111",
};
if (this.infoWindow) {
map.closeInfoWindow(this.infoWindow);
}
marker.addEventListener("click", function (e) {
var content = options.popup(options.id);
this.infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
map.openInfoWindow(this.infoWindow, point); //开启信息窗口
}.bind(this))
},
clearMarker(id) {
if (this.marker) {
this.marker.setMap(null);
this.marker = null;
}
if (this.infoWindow) {
map.closeInfoWindow(this.infoWindow);
}
if (this.markers.length > 0) {
for (let i = this.markers.length - 1; i >= 0; i--) {
var marker = this.markers[i];
if (marker.cid == id) {
map.removeOverlay(marker);
marker = null;
this.markers.splice(i, 1);
return i;
// break;
}
// break;
}
}
},
//添加自定义轨迹
addLine(options) {
var points = [];
options.coords.forEach(data => {
points.push(new BMap.Point(data[0], data[1]));
})
//如果轨迹存在则先清除上一次轨迹
if (this.path) {
this.clearLine();
}
var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
scale: 0.4,//图标缩放大小
strokeColor: '#fff',//设置矢量图标的线填充颜色
strokeWeight: '1',//设置线宽
});
var icons = new BMap.IconSequence(sy, "10%", "10%");
this.path = new BMap.Polyline(points, {
strokeColor: "blue",
strokeWeight: 8,
strokeOpacity: 0.8,
icons: [icons]
}); //创建折线
map.addOverlay(this.path);
var view = map.getViewport(eval(points));
var mapZoom = view.zoom;
var centerPoint = view.center; map.centerAndZoom(centerPoint, mapZoom);
map.centerAndZoom(centerPoint, mapZoom);
},
//清除线路
clearLine() {
if (this.path) {
map.removeOverlay(this.path);
this.path = null;
}
},
//通过经纬度逆解析出地址
getLocation(options) {
var geoc = new BMap.Geocoder();
var pt = new BMap.Point(options.x, options.y);
geoc.getLocation(pt, function (rs) {
var address = rs.address;
options.callback(address);
});
}
}
//语言切换
var gis;
initMap() {
if (lang == "cn") {
gis = gisBaidu;
}
else if (lang == "en") {
gis = gisGoogle;
}
//地图画线
function showMapLine(datas) {
var points = [];
datas.forEach(data => {
points.push([data.Longitude, data.Latitude]);
})
//路径
gis.addLine({
coords: points
});
//起点
gis.addMarker({
id: "point_start",
icon: "https://webapi.amap.com/theme/v1.3/markers/n/start.png",
offset: [0, -15],
size: [19, 31],
x: points[0][0],
y: points[0][1]
})
//终点
gis.addMarker({
id: "point_end",
icon: "https://webapi.amap.com/theme/v1.3/markers/n/end.png",
offset: [0, -15],
size: [19, 31],
x: points[points.length - 1][0],
y: points[points.length - 1][1]
})
}
//点击添加描点
rowClick(row) {
gis.addMarker({
id: "tmp",
x: row.Longitude,
y: row.Latitude
})
},
//将GPS坐标转换为百度坐标
convertCoord(dataTable) {
var _this = this;
var convertor = new BMap.Convertor();
var ci = 0;
convert();
//递归实现坐标转换--每次转换10个
function convert() {
var start = ci * 10;
var end = start + 10;
var newdata = dataTable.slice(start, end);
var pointArr = [];
newdata.forEach(data => {
if (data.Longitude) pointArr.push(new BMap.Point(data.Longitude, data.Latitude));
})
//开始转换
convertor.translate(pointArr, 1, 5, function (data) {
if (data.status === 0) {
data.points.forEach((pt, index) => {
newdata[index].Longitude = pt.lng ? pt.lng.toFixed(6) : 0;
newdata[index].Latitude = pt.lat ? pt.lat.toFixed(6) : 0;
})
ci++;
if (ci * 10 >= dataTable.length) {
_this.getLocation(dataTable);
showMapLine(dataTable);
} else {
convert();
}
}
});
}
},
//根据坐标获取地理位置
getLocation(dataTable) {
var _this = this;
var i = 0;
//递归实现位置查询
getsingleLocation();
function getsingleLocation() {
var data = dataTable[i];
function getResult(address) {
data.address = address;
i++;
if (i == dataTable.length) {
_this.getPageData();
} else {
getsingleLocation();
}
}
if (data.Longitude) gis.getLocation({ x: data.Longitude, y: data.Latitude, callback: getResult });
else { i++; getsingleLocation(); }
}
}