methods: {
/**
* [初始化地图]
* @param { options } [Object]
* @param { options.lonlat } [Array] 中心点经纬度
* @param { options.zoom } [Number] 地图等级
* @param { options.controlBar } [Boolean] 是否显示调试地图等级的bar
* @param { options.drawMode } [Object]
* @param { options.drawMode.open } [Boolean] 是否打开绘制模式
* @param { options.drawMode.completeEvent } [function] 完成时 执行的函数
* @param { options.clickEvent } [function] 地图点击事件监听
*/
init(options) {
//初始化地图
let _this = this;
this.ops = options;
this._map = new BMap.Map(this.$refs.map);
this._map.centerAndZoom(
new BMap.Point(options.lonlat.lon, options.lonlat.lat),
options.zoom
);
options.scollMove ? "" : this._map.enableScrollWheelZoom(true);
if (options.controlBar) {
this._map.addControl(
new BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_LARGE
})
);
this._map.addControl(
new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT })
);
}
if (options.drawMode && options.drawMode.open) {
this.myDrawingManagerObject = new BMapLib.DrawingManager(this._map, {
isOpen: true,
enableDrawingTool: false,
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_LEFT,
offset: new BMap.Size(150, 15)
},
circleOptions: _this.lineStyle,
polygonOptions: _this.lineStyle,
rectangleOptions: _this.lineStyle
});
_this.myDrawingManagerObject.close();
if (options.drawMode.completeEvent) {
this.myDrawingManagerObject.addEventListener(
"overlaycomplete",
function(e) {
_this.overlays.push(e.overlay);
options.drawMode.completeEvent(e);
}
);
}
}
if (options.clickEvent)
this._map.addEventListener("click", options.clickEvent);
},
/**
* [设置中心点]
* @param { lonlat } [Array]
*/
setCenter(lonlat) {
// let point = new BMap.Point(lonlat[0].lng, lonlat[0].lat);
if(this.firstPointLng==null){
return;
}
let point = new BMap.Point(this.firstPointLng.lng, this.firstPointLng.lat);
this._map.setZoom(12);
this._map.setCenter(point);
},
/**
* [根据经纬度返回具体地址]
* @param { lonlat } [Object]
*/
getAdress(lonlat) {
return new Promise((resolve, reject) => {
$.ajax({
url: "api/getAddress",
method: "GET",
data: {
callback: "renderReverse",
location: `${lonlat.lat},${lonlat.lng}`,
output: "json",
pois: 1,
ak: "nkdaifGOptaV7GTG0Eie3wlllVcTLnxB"
}
}).then(res => {
let result = JSON.parse(res);
let adress = "";
if (result.status == 0) {
console.log(result);
adress =
result.result.formatted_address +
result.result.sematic_description;
resolve(adress);
}
});
});
},
/**
* [根据经纬度返回百度转换后的经纬度] 上限长度为10
* @param { pointArr } [Array]
*/
convertor(pointArr) {
return new Promise((resolve, reject) => {
let convertor = new BMap.Convertor();
convertor.translate(pointArr, 1, 5, translateCallback);
function translateCallback(data) {
if (data.status === 0) {
resolve(data.points);
}
}
});
},
//[根据经纬度返回百度转换后的经纬度] 不限长度
async convertorAll(allPoint) {
// console.log('convertorAll--allPoint.length',allPoint.length);
var datalength = allPoint.length;
var pageSize = 10;
var total = 0; //总记录数
var groupCount = 0; //每次转十条
if (datalength % pageSize > 0) {
groupCount = datalength / pageSize + 1;
} else {
groupCount = datalength / pageSize;
}
var pointRes = [];
var sliceStart = 0,
sliceEnd = sliceStart + pageSize;
for (var i = 0; i < groupCount - 1; i++) {
sliceStart = i * pageSize;
sliceEnd = i * pageSize + pageSize;
if (sliceEnd > datalength) {
sliceEnd = datalength;
}
console.log("sliceStart = " + sliceStart + " sliceEnd = " + sliceEnd);
var res = await this.convertor(allPoint.slice(sliceStart, sliceEnd));
pointRes = pointRes.concat(res);
}
return pointRes;
},
//转换为百度经纬度
transforBDLonLat(allPoint) {
var resPoints = [];
allPoint.forEach((item, index) => {
var res = coordTransform.transfromWGS84toBaidu(item.lat, item.lng);
resPoints.push(new BMap.Point(res.longitude, res.latitude));
});
return resPoints;
},
/* 以下为画图 */
clearAllOverlays() {
//清除所有图形
this.autoOverlays.forEach(item => this._map.removeOverlay(item));
this.overlays.forEach(item => this._map.removeOverlay(item));
var allOverlay = this._map.getOverlays()
allOverlay.forEach(item => this._map.removeOverlay(item));
},
/**
* [绘图工具作画]
* @param { type } [String] 绘图类型
*/
drawTool(type) {
if (this.ops.drawMode.open) {
this.myDrawingManagerObject.open();
if (type === "circle") {
this.myDrawingManagerObject.setDrawingMode(BMAP_DRAWING_CIRCLE);
} else if (type === "rectangle") {
this.myDrawingManagerObject.setDrawingMode(BMAP_DRAWING_RECTANGLE);
} else if (type === "polygon") {
this.myDrawingManagerObject.setDrawingMode(BMAP_DRAWING_POLYGON);
}
}
},
/**
* [圆/矩形/多边/点/线]
* @param { data } [Object]
* @param { data.lonlat } [Array] 经纬度集合
* @param { data.radius } [Number] 半径
*/
circle(data) {
console.log("---------------------圆形",data);
let res = coordTransform.transfromWGS84toBaidu(
data.lonlat[0].lat,
data.lonlat[0].lng
);
let radius = data.radius;
let point = new BMap.Point(res.longitude, res.latitude);
console.log("---------------------圆形",point);
let circle = new BMap.Circle(point, radius, this.lineStyle);
console.log(circle);
this._map.addOverlay(circle);
circle.message = data;
this.autoOverlays.push(circle);
let timer = setTimeout(() => {
clearTimeout(timer);
timer = null;
this._map.setCenter(point);
}, 100);
},
rectangle(data) {
console.log("---------------------矩形");
let lonlat = data.lonlat;
let resStart = coordTransform.transfromWGS84toBaidu(
lonlat[0].lat,
lonlat[0].lng
);
let resEnd = coordTransform.transfromWGS84toBaidu(
lonlat[1].lat,
lonlat[1].lng
);
let pStart = new BMap.Point(resStart.longitude, resStart.latitude);
let pEnd = new BMap.Point(resEnd.longitude, resEnd.latitude);
let rectangle = new BMap.Polygon(
[
new BMap.Point(pStart.lng, pStart.lat),
new BMap.Point(pEnd.lng, pStart.lat),
new BMap.Point(pEnd.lng, pEnd.lat),
new BMap.Point(pStart.lng, pEnd.lat)
],
this.lineStyle
);
this._map.addOverlay(rectangle);
rectangle.message = data;
this.autoOverlays.push(rectangle);
let timer = setTimeout(() => {
clearTimeout(timer);
timer = null;
this._map.setCenter(pStart);
}, 100);
},
polygon(data) {
console.log("---------------------多边形");
if (!!data.lonlat && !!data.fenceType) {
console.log("data.lonlat---", data.lonlat);
data.lonlat.forEach(item => {
var res = coordTransform.transfromWGS84toBaidu(item.lat, item.lng);
item.lat = res.latitude;
item.lng = res.longitude;
});
}
let lonlat = data.lonlat;
console.log("lonlat---", lonlat);
let point = new BMap.Point(lonlat[0].lng, lonlat[0].lat);
let arr = [];
lonlat.forEach(item => arr.push(new BMap.Point(item.lng, item.lat)));
let polygon = new BMap.Polygon(arr, this.lineStyle);
this._map.addOverlay(polygon);
polygon.message = data;
this.autoOverlays.push(polygon);
let timer = setTimeout(() => {
clearTimeout(timer);
timer = null;
this._map.setCenter(point);
}, 100);
},
point(data) {
let lonlat = data.lonlat;
let point = new BMap.Point(lonlat[0].lng, lonlat[0].lat);
let myIcon = new BMap.Icon(alertcarUrl, new BMap.Size(23, 25), {
anchor: new BMap.Size(10, 25),
imageOffset: new BMap.Size(0, 0)
});
let marker = new BMap.Marker(point, { icon: myIcon });
this._map.addOverlay(marker);
this.autoOverlays.push(marker);
},
clears(){
if(this.pointContaint.length < 10){
return
}
this.clearAllOverlays()
let myIcon = new BMap.Icon(onlinecarUrl, new BMap.Size(23, 25), {
anchor: new BMap.Size(10, 25),
imageOffset: new BMap.Size(0, 0)
});
let firstPoint = new BMap.Marker(this.pointContaint[0], {
icon: myIcon
});
this._map.addOverlay(firstPoint);
let lineStyle = {
strokeColor: "#33CC33",
strokeWeight: 4,
strokeOpacity: 0.5
};
let pointList = []
for (let index = 0; index < this.pointContaint.length; index++) {
pointList.push(new BMap.Point( this.pointContaint[index].lng, this.pointContaint[index].lat))
}
let polyline = new BMap.Polyline(pointList, lineStyle);
this._map.addOverlay(polyline);
},
goBack(){
this.clearAllOverlays()
this.startPoint = null
this.pointContaint = this.pointContaint.slice(0,-10)
let nowIcon = new BMap.Icon(carUrl, new BMap.Size(23, 25), {
anchor: new BMap.Size(10, 23),
imageOffset: new BMap.Size(0, 0)
});
let nowPoint = new BMap.Marker(this.pointContaint[this.pointContaint.length-1], { icon: nowIcon });
this._map.addOverlay(nowPoint);
let myIcon = new BMap.Icon(onlinecarUrl, new BMap.Size(23, 25), {
anchor: new BMap.Size(10, 25),
imageOffset: new BMap.Size(0, 0)
});
let firstPoint = new BMap.Marker(this.pointContaint[0], {
icon: myIcon
});
this._map.addOverlay(firstPoint);
let lineStyle = {
strokeColor: "#33CC33",
strokeWeight: 4,
strokeOpacity: 0.5
};
let pointList = []
for (let index = 0; index < this.pointContaint.length; index++) {
pointList.push(new BMap.Point( this.pointContaint[index].lng, this.pointContaint[index].lat))
}
let polyline = new BMap.Polyline(pointList, lineStyle);
this._map.addOverlay(polyline);
},
/**
* [轨迹回放]
* @param { info } [Object]
* @param { info.positions } [Array] 轨迹点集合
* @param { info.totalCount } [Number] 所有页数
* @param { info.nowCount } [Number] 当前页数
*/
nTrace(info) {
this._map.clearOverlays();
let positions = info.positions,
totalCount = info.totalCount,
nowCount = info.nowCount;
let nowInfo = {
lat: positions[positions.length - 1]["latitude"],
lng: positions[positions.length - 1]["longitude"],
acquisitionTime: positions[positions.length - 1]["acquisitionTime"],
uploadTime: positions[positions.length - 1]["uploadTime"],
...info.veh
};
this.nowLonlat = [nowInfo];
this.convertor([new BMap.Point(nowInfo.lng, nowInfo.lat)]).then(res => {
this.pointContaint.push(res[0]);
let lineStyle = {
strokeColor: "#B199BB",
strokeWeight: 5,
strokeOpacity: 0.5
}; //strokeStyle:'dashed'虚线
let polyline = new BMap.Polyline(this.pointContaint, lineStyle);
this._map.addOverlay(polyline);
this.autoOverlays.push(polyline);
let myIcon = new BMap.Icon(onlinecarUrl, new BMap.Size(23, 25), {
anchor: new BMap.Size(10, 25),
imageOffset: new BMap.Size(0, 0)
});
let firstPoint = new BMap.Marker(this.pointContaint[0], {
icon: myIcon
});
this._map.addOverlay(firstPoint);
this.autoOverlays.push(firstPoint);
let nowIcon = new BMap.Icon(carUrl, new BMap.Size(23, 25), {
anchor: new BMap.Size(10, 23),
imageOffset: new BMap.Size(0, 0)
});
let nowPoint = new BMap.Marker(res[0], { icon: nowIcon });
nowPoint.addEventListener("click", () => {
this.drawWindow(res[0], nowInfo);
});
this._map.addOverlay(nowPoint);
this.autoOverlays.push(nowPoint);
this.clickPoint.forEach(item => {
this._map.addOverlay(item);
this.autoOverlays.push(item);
});
this._map.setCenter(res[0]);
if (this.pointContaint.length === 1) {
this._map.setZoom(17);
} else {
this._map.setZoom(this._map.getZoom());
}
});
},
//轨迹回放修改 追加线段不清空重绘
nTraceAppend(info) {
// this._map.clearOverlays();
var allOverlay = this._map.getOverlays();
allOverlay.forEach(item => {
if (item.toString() == "[object Marker]") {
if (item.getTitle() == "end") {
this._map.removeOverlay(item);
}
}
});
let positions = info.positions,
totalCount = info.totalCount,
nowCount = info.nowCount;
let nowInfo = {
lat: positions[positions.length - 1]["latitude"],
lng: positions[positions.length - 1]["longitude"],
acquisitionTime: positions[positions.length - 1]["acquisitionTime"],
uploadTime: positions[positions.length - 1]["uploadTime"],
...info.veh
};
this.nowLonlat = [nowInfo];
this.convertor([new BMap.Point(nowInfo.lng, nowInfo.lat)]).then(res => {
this.pointContaint.push(res[0]);
if (this.startPoint === null) {
this.startPoint = res[0];
}
this.endPoint = res[0];
let pointList = [];
pointList.push(this.startPoint);
pointList.push(this.endPoint);
let lineStyle = {
strokeColor: "#33CC33",
strokeWeight: 4,
strokeOpacity: 0.5
}; //strokeStyle:'dashed'虚线
let polyline = new BMap.Polyline(pointList, lineStyle);
this.startPoint = res[0];
this._map.addOverlay(polyline);
this.autoOverlays.push(polyline);
let myIcon = new BMap.Icon(onlinecarUrl, new BMap.Size(23, 25), {
anchor: new BMap.Size(10, 25),
imageOffset: new BMap.Size(0, 0)
});
let firstPoint = new BMap.Marker(this.pointContaint[0], {
icon: myIcon
});
this._map.addOverlay(firstPoint);
this.autoOverlays.push(firstPoint);
let nowIcon = new BMap.Icon(carUrl, new BMap.Size(23, 25), {
anchor: new BMap.Size(10, 23),
imageOffset: new BMap.Size(0, 0)
});
let nowPoint = new BMap.Marker(res[0], { icon: nowIcon });
nowPoint.setTitle("end");
nowPoint.addEventListener("click", () => {
this.drawWindow(res[0], nowInfo);
});
this._map.addOverlay(nowPoint);
this.autoOverlays.push(nowPoint);
this.clickPoint.forEach(item => {
this._map.addOverlay(item);
this.autoOverlays.push(item);
});
this._map.setCenter(res[0]);
if (this.pointContaint.length === 1) {
this._map.setZoom(17);
} else {
this._map.setZoom(this._map.getZoom());
}
});
},
//清空轨迹回放的数据
traceEmptyArr() {
this.pointContaint = [];
this.clickPoint = [];
this.autoOverlays = [];
this.startPoint = null;
this.endPoint = null;
},
//燃油车轨迹
async nTraceFuel(info) {
let _this = this;
this.effecLocaIden = 0; //有效定位标识
this.locationStatus = false; //当前定位有效状态
this.invalocaStart = 0; //无效定位虚线起始点
this.invalocaEnd = 0;
let lineSolidStyle = {
strokeColor: "#33CC33",
strokeWeight: 4,
strokeOpacity: 0.5
}; //实线
let lineDashedStyle = {
strokeColor: "#A52A2A",
strokeWeight: 4,
strokeOpacity: 0.5,
strokeStyle: "dashed"
}; //虚线
let startIcon = new BMap.Icon(startUrl, new BMap.Size(45, 45), {
anchor: new BMap.Size(10, 25),
imageOffset: new BMap.Size(0, 0)
});
let endIcon = new BMap.Icon(endUrl, new BMap.Size(45, 45), {
anchor: new BMap.Size(10, 23),
imageOffset: new BMap.Size(0, 0)
});
var allPoint = [];
for (var i = 0; i < info.length; i++) {
var item = info[i];
if (item.effLocation == this.effecLocaIden) {
//有效定位
if (!this.locationStatus) {
//上一状态为无效
if (this.invalocaStart == 0) {
//起始点
allPoint.push(new BMap.Point(item.lng, item.lat));
_this.firstPointLng=allPoint[0];
let res = await this.convertor([
new BMap.Point(item.lng, item.lat)
]);
let startPoint = new BMap.Marker(res[0], { icon: startIcon });
this._map.addOverlay(startPoint);
this.autoOverlays.push(startPoint);
console.log("起始点 i = " + i);
this._map.setCenter(allPoint[0]);
this._map.setZoom(this._map.getZoom());
} else {
console.log("画虚线 i= " + i);
this.invalocaEnd = new BMap.Point(item.lng, item.lat);
let res = await this.convertor([
this.invalocaStart,
this.invalocaEnd
]);
console.log("res--虚线---", res);
let polyline = new BMap.Polyline(res, lineDashedStyle);
this._map.addOverlay(polyline);
this.autoOverlays.push(polyline);
this.invalocaStart = 0;
this.invalocaEnd = 0;
allPoint.push(new BMap.Point(item.lng, item.lat));
}
} else {
allPoint.push(new BMap.Point(item.lng, item.lat));
}
if (i == info.length - 1) {
//终止点
console.log("终止点 i = " + i);
// console.log('allPoint',allPoint);
if (allPoint.length > 0) {
//最后一段轨迹
// let res = await this.convertorAll(allPoint)
let res = this.transforBDLonLat(allPoint);
console.log("画实线 最后一段 i= " + i);
let polyline = new BMap.Polyline(res, lineSolidStyle);
this._map.addOverlay(polyline);
this.autoOverlays.push(polyline);
}
//结束图标
let res = await this.convertor([
new BMap.Point(item.lng, item.lat)
]);
let EndPoint = new BMap.Marker(res[0], { icon: endIcon });
this._map.addOverlay(EndPoint);
this.autoOverlays.push(EndPoint);
}
this.locationStatus = true;
} else {
//无效定位
if (i == info.length - 1) {
//最后一段是无效定位
//结束图标
let res = await this.convertor([this.invalocaStart]);
console.log("res-----", res);
let EndPoint = new BMap.Marker(res[0], { icon: endIcon });
this._map.addOverlay(EndPoint);
this.autoOverlays.push(EndPoint);
console.log("最后为无效定位的结束图标 i= " + i);
} else {
if (this.locationStatus && allPoint.length > 0) {
this.invalocaStart = allPoint[allPoint.length - 1];
// let res = await this.convertorAll(allPoint);
let res = this.transforBDLonLat(allPoint);
// console.log('---无效定位------res',res);
console.log("画实线 中间段 i= " + i);
let polyline = new BMap.Polyline(res, lineSolidStyle);
this._map.addOverlay(polyline);
this.autoOverlays.push(polyline);
allPoint = [];
}
}
// console.log('allPoint.length = ' + allPoint.length);
this.locationStatus = false;
}
}
},
//显示定位
setCommMarker(carInfo) {
console.log("---------------显示定位", carInfo);
let point = new BMap.Point(carInfo.longitude, carInfo.latitude),
myIcon = new BMap.Icon(onlinecarUrl, new BMap.Size(30, 30), {
anchor: new BMap.Size(8, 8),
imageOffset: new BMap.Size(0, 0)
});
this.convertor([point]).then(res => {
this.clickPoint = [];
let marker = new BMap.Marker(res[0], { icon: myIcon });
this._map.addOverlay(marker);
this.autoOverlays.push(marker);
let timer = setTimeout(() => {
this._map.setZoom(17);
this._map.setCenter(res[0]);
// this.drawWindow(res[0], carInfo);
clearTimeout(timer);
timer = null;
}, 200);
// marker.addEventListener("click", () => {
// this.drawWindow(res[0], carInfo);
// });
// this.clickPoint.push(marker)
});
},
/**
* [设置marker]
* @param { carInfo } [Object]
*/
setTraceMarker(carInfo) {
let point = new BMap.Point(carInfo.longitude, carInfo.latitude),
myIcon = new BMap.Icon(carPoint, new BMap.Size(10, 10), {
anchor: new BMap.Size(8, 8),
imageOffset: new BMap.Size(0, 0)
});
this.convertor([point]).then(res => {
this.clickPoint = [];
let marker = new BMap.Marker(res[0], { icon: myIcon });
this._map.addOverlay(marker);
this.autoOverlays.push(marker);
let timer = setTimeout(() => {
this._map.setZoom(this._map.getZoom());
this._map.setCenter(res[0]);
this.drawWindow(res[0], carInfo);
clearTimeout(timer);
timer = null;
}, 200);
marker.addEventListener("click", () => {
this.drawWindow(res[0], carInfo);
});
this.clickPoint.push(marker);
});
},
/**
* [车辆信息窗口]
* @param { location } [Array ]
* @param { carInfo } [Object]
*/
drawWindow(location, carInfo) {
if (carInfo.acquisitionTime) {
carInfo.acquisitionTime = NUtil.Format(
new Date(carInfo.acquisitionTime),
"yyyy-MM-dd hh:mm:ss"
);
}
let opts = {
width: 300, // 信息窗口宽度
height: 0, // 信息窗口高度
title: `<h5>
<div
style="overflow:hidden;margin-top:0px;z-index:100;"
class="colseWindow"
>
<span style="
float:right;
cursor:pointer"
onmouseover="this.style.color='red';"
onmouseleave="this.style.color='black';"
>关闭</span>
</div>
<h5>`,
enableCloseOnClick: true
};
let InfoMsg = `
<div class="map-obox" style="height: 320px">
<div>vin码 ：${carInfo.vin ? carInfo.vin : ""}</div>
<div>设备号 ：${
carInfo.deviceSN ? carInfo.deviceSN : ""
}</div>
<div>ICCID ：${
carInfo.iccid ? carInfo.iccid : ""
}</div>
<div class="alertInfo"></div>
<div>经销商 ：${
carInfo.dealerName ? carInfo.dealerName : ""
}</div>
<div>车主姓名：${
carInfo.ownerName ? carInfo.ownerName : ""
}</div>
<div>车牌号 ：${
carInfo.licensePlate ? carInfo.licensePlate : ""
}</div>
<div>车辆品牌：${
carInfo.brandName ? carInfo.brandName : ""
}</div>
<div>车型名称：${
carInfo.modelName ? carInfo.modelName : ""
}</div>
<div class="alertTime"></div>
<div>采集时间：${NUtil.Format(
new Date(carInfo.acquisitionTime),
"yyyy-MM-dd hh:mm:ss"
)}</div>
<div>上传时间：${NUtil.Format(
new Date(carInfo.uploadTime),
"yyyy-MM-dd hh:mm:ss"
)}</div>
<div class="address"></div>
<div>经度 ：${
carInfo.lng
? carInfo.lng
: carInfo.longitude
? carInfo.longitude
: ""
}</div>
<div>纬度 ：${
carInfo.lat
? carInfo.lat
: carInfo.latitude
? carInfo.latitude
: ""
}</div>
</div>
`;
let infoWindow = new BMap.InfoWindow(InfoMsg, opts);
let _this = this;
_this._map.openInfoWindow(infoWindow, location);
let params = {
deviceId: carInfo.vin,
deviceType: "VEHICLE",
handleStates: "0",
pageIndex: 1,
pageSize: 1
};
_this.$http.get("api/getAlertStat", { params }).then(res => {
if (res.status && res.data.level1) {
$(".alertInfo").text(
`报警状态：一级报警：${res.data.level1}个，二级报警：${res.data.level2}个，三级报警：${res.data.level3}个`
);
}
});
_this.$http
.get("api/findStatusHistoryByTimeRange", { params })
.then(res => {
if (res.body.status && res.body.datas && res.body.datas.length) {
$(".alertTime").text(
`最后状态时间：${NUtil.Format(
new Date(res.body.datas[0].uploadTime),
"yyyy-MM-dd hh:mm:ss"
)}`
);
}
});
_this.getAdress(location).then(res => {
$(".address").text(`最新地址：${res ? res : ""}`);
});
let timer = setTimeout(() => {
//延时保证能够执行
$(".colseWindow").click(function() {
_this._map.closeInfoWindow();
clearTimeout(timer);
timer = null;
});
_this._map.setCenter(location);
}, 400);
},
sarchdatil(address_detail) {
var th = this;
// 创建Map实例
// 初始化地图,设置中心点坐标，
var point = new BMap.Point(121.160724, 31.173277); // 创建点坐标，汉得公司的经纬度坐标
var ac = new BMap.Autocomplete({ //建立一个自动完成的对象
input: "suggestId",
location: th._map
});
var myValue;
ac.addEventListener("onconfirm", function(e) {
//鼠标点击下拉列表后的事件
console.log(e);
var _value = e.item.value;
myValue =
_value.province +
_value.city +
_value.district +
_value.street +
_value.business;
this.address_detail = myValue;
this.address_detail_set = myValue;
setPlace();
});
function setPlace() {
th._map.clearOverlays(); //清除地图上所有覆盖物
function myFun() {
th.userlocation = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
th._map.centerAndZoom(th.userlocation, 18);
th._map.addOverlay(new BMap.Marker(th.userlocation)); //添加标注
}
var local = new BMap.LocalSearch(th._map, {
//智能搜索
onSearchComplete: myFun
});
local.search(myValue);
//测试输出坐标（指的是输入框最后确定地点的经纬度）
th._map.addEventListener("click", function(e) {
//经度
console.log('lng=====',th.userlocation.lng);
localStorage.setItem( "longitude", th.userlocation.lng );
//维度
console.log('lat======',th.userlocation.lat);
localStorage.setItem( "latitude", th.userlocation.lat );
});
th.address_detail = th.address_detail_set;
th.dawnFunc();
}
},
clearOverlays(){
this._map.clearOverlays();
}
},freeman_Tian
12 声望2 粉丝
« 上一篇
大文件上传下一篇 »
CryptoJs 加密 
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。