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">付款时间：'+item.order.paymentTime+'</p>' +
                        '<p style="font-size: 12px">发货时间：'+item.order.deliveryTime+'</p>' +
                        '<p style="font-size: 12px">订单总金额：￥'+item.order.totalAmount+'</p>' +
                        '<p style="font-size: 12px">订单实付金额：￥'+item.order.payAmount+'</p>' +
                        '<p style="font-size: 12px">优惠券使用：'+item.order.couponUse+'</p>' +
                        '<p style="font-size: 12px">用户ID：'+item.order.receiverId+'</p>' +
                        '<p style="font-size: 12px">收货人姓名：'+item.order.receiverName+'</p>' +
                        '<p style="font-size: 12px">收货人电话：'+item.order.receiverPhone+'</p>' +
                        '<p style="font-size: 12px">收货人地址：'+item.order.receiverProvince+item.order.receiverCity+item.order.receiverRegion+item.order.receiverDetailAddress+'</p>' +
                        '<p style="font-size: 12px">配送人：'+item.order.deliveryCompany+'</p>' +
                        '</div>',*/
                    visible: false
                });

            });
        })
        console.log('list====================================', newarr)
    });

    this.markers = markers;
    this.windows = windows;
    /*this.$nextTick(() => {
        this.initMap();
        this.setMaker();
    })*/
},