vue 高德地圖 地圖初始化顯示介面返回的多個經緯度
npm 安裝 依賴。
npm install vue-amap --save
mian.js 中註冊
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: '高德的key',//高德的key
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
v: '1.4.4'
});
<el-amap
vid="amapDemo1"
:center="center"
:zoom="zoom"
class="amap-demo"
:events="events">
<el-amap-marker v-for="(marker,index) in markers" :key="index" :position="marker.position" :events="marker.events"></el-amap-marker>
<el-amap-info-window v-if="window" :position="window.position" :visible="window.visible" :content="window.content"></el-amap-info-window>
</el-amap>
data() {
let self = this;
let geocoder
return {
order: {},
markers: [],
srcList: [],
windows: [],
window: '',
geocoder: '',
defaultCity: '四川',
zoom: 8,
center: [103.761263, 29.582024],
address: '',
province: '',
city: '',
district: '',
lng: '',
lat: '',
addArr: {
addr: {}
},
events: {
click(e) {
let {lng, lat} = e.lnglat;
self.lng = lng;
self.lat = lat;
// 這裡通過高德 SDK 完成。 新增解析地理位置外掛
AMap.plugin('AMap.Geocoder', () => {
geocoder = new AMap.Geocoder({
city: this.defaultCity, // 預設：城市
radius: 1000, // 範圍，預設：500
extensions: "all",
});
});
let markers = [];
let windows = [];
geocoder.getAddress([e.lnglat.lng, e.lnglat.lat], function (status, result) {
if (status === 'complete' && result.info === 'OK') {
if (result && result.regeocode) {
console.log(result.regeocode)
// 具體地址
self.address = result.regeocode.formattedAddress;
// 省
self.province = result.regeocode.addressComponent.province;
// 市
self.city = result.regeocode.addressComponent.city;
// 區
self.district = result.regeocode.addressComponent.district;
self.$nextTick();
}
} else {
//alert('地址獲取失敗')
}
});
}
},
}，
}，
methods 方法裡
areaList1() {
let markers = [];
let windows = [];
let num = 10;
let self = this;
let geocoder;
// 這裡通過高德 SDK 完成。 新增解析地理位置外掛
AMap.plugin('AMap.Geocoder', () => {
geocoder = new AMap.Geocoder({
city: this.defaultCity, // 預設：城市
radius: 1000, // 範圍，預設：500
extensions: "all",
});
});
this.listQuery.storeId = this.listQuery.storeId1
if (this.listQuery.storeId1 == 'pt') {
this.listQuery.storeId = null
}
heatDistribution(this.listQuery).then(response => {
this.lolaData = response.data
let lola = this.lolaData
console.log('lola-=========================', lola)
let newarr = [];
let indexAll = [];
let quIndexArr = [];
let lola1 = [];
lola1 = lola
lola1.forEach((item, i) => {
indexAll.push(i);
if (!item.longitude && !item.latitude) {
quIndexArr.push(i);
}
})
Array.prototype.remove = function (val) {
let index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};
for (let i = 0; i < quIndexArr.length; i++) {
indexAll.remove(quIndexArr[i]);
}
for (let j = 0; j < indexAll.length; j++) {
newarr.push(lola[indexAll[j]]);
}
this.list = newarr
newarr.forEach((item, i) => {
this.handleViewOrder(item.id)
getOrderDetail(item.id).then(response => {
this.order = response.data;
this.order.orderItemList.forEach((item1, index) => {
this.srcList.push(item1.productPic);
if (item1.type == 2) {
item1.productPrice = `${item1.productPrice}積分`
} else if (item1.type == 1) {
item1.productPrice = `￥${item1.productPrice}`
}
})
item.order = this.order
console.log('item-=========================', this.order)
console.log('item-=========================', item.order)
let lngs = parseFloat(item.longitude)
let lats = parseFloat(item.latitude)
markers.push({
position: [lngs, lats],
events: {
click(e) {
let {lng, lat} = e.lnglat;
self.lng = lng;
self.lat = lat;
self.windows.forEach(window => {
window.visible = false;
});
self.window = self.windows[i];
self.$nextTick(() => {
self.window.visible = true;
});
this.feedbackListDialog = true;
}
}
});
windows.push({
position: [lngs, lats],
/*content: '<div>' +
'<p style="font-size: 12px">積分：獲得'+item.order.integration+'積分</p>' +
'<p style="font-size: 12px">訂單編號：'+item.order.orderSn+'</p>' +
'<p style="font-size: 12px">建立時間：'+item.order.createTime+'</p>' +
'<p style="font-size: 12px">取消時間：'+item.order.modifyTime+'</p>' +
'<p style="font-size: 12px">付款時間：