昨天实现的地址选址功能发现一个bug,
有时候会报以上错误,有时候又是正常的,感觉好像是加载顺序的问题,然后查了好半天文档,发现在main.js中,
Vue.use(VueAMap)
在以上一行代码之前加入一个
localStorage.clear();
就好了,目前没有出现什么错误,如果后续发现bug再来完善。
来来来,上代码:
main.js文件
import Vue from 'vue'
import VueAMap from 'vue-amap'
import App from './App'
import router from './router'
Vue.config.productionTip = false
localStorage.clear();
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
//高德的key
key: "cc644a48b701c256e9a827f068743fdd",
// 插件集合
plugin: [
"AMap.Autocomplete",// 输入提示插件
"AMap.PlaceSearch",// POI搜索插件
"AMap.Scale",// 右下角缩略图插件 比例尺
"AMap.OverView",// 地图鹰眼插件
"AMap.ToolBar",// 地图工具条
"AMap.MapType",// 类别切换控件,实现默认图层与卫星图、实施交通图层之间切换的控制
"AMap.PolyEditor",// 编辑 折线多,边形
"AMap.CircleEditor",// 圆形编辑器插件
"AMap.Geolocation", // 定位控件,用来获取和展示用户主机所在的经纬度位置
"AMap.Geocoder",// 地理编码与逆地理编码服务,用于地址描述与坐标间的相互转换
"AMap.AMapUI",// UI组件
],
v: "1.4.4",
uiVersion: "1.0.11" // 版本号
});
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
地图选点调用vue 文件
<template>
<div class="myIndexWrap">
<!-- 地图选点 -->
<div class="mapWrap">
<h3>地图选点</h3>
<div class="addrWrap">
<input type="text" v-model="address" style="width:400px;" />
<img src="@/assets/mapIcon.png" @click="showMap = !showMap" />
<GaodeMap
v-show="showMap"
class="mapBox"
@selectedAddr="selectedAddr"
/>
</div>
</div>
</div>
</template>
<script type='text/ecmascript-6'>
import GaodeMap from "@/components/GaodeMap.vue";//地图选点
export default {
components: {
GaodeMap
},
data() {
return {
showMap: true,
address: "",
};
},
mounted() {},
methods: {
//地图选址功能
selectedAddr(data) {
this.address = data.formattedAddress;
}
}
};
</script>
<style lang='scss' scoped>
.myIndexWrap {
width: 1200px;
min-height: 800px;
height: auto;
border: 1px solid #000;
display: flex;
flex-flow: column;
h3 {
padding-left: 50px;
}
// 地图选点-Style
.addrWrap {
display: flex;
flex-wrap: row;
input {
width: 200px;
height: 30px;
margin-left: 20px;
}
img {
width: 30px;
height: 30px;
}
.mapBox {
margin-left: 50px;
margin-bottom: 100px;
}
}
}
</style>
GaodeMap.vue文件
<template>
<div class="amap-wrapper">
<el-amap-search-box
class="search-box"
:search-option="searchOption"
:on-search-result="onSearchResult"
></el-amap-search-box>
<el-amap
vid="amapDemo"
:zoom="zoom"
class="amap-demo"
:plugin="plugin"
:events="events"
>
<el-amap-marker
v-for="(marker,index) in markers"
:key="index"
:position="marker"
></el-amap-marker>
</el-amap>
<div class="toolbar">
position: [{{ lng }}, {{ lat }}] address: {{ address }}
</div>
</div>
</template>
<script type='text/ecmascript-6'>
export default {
components: {},
data() {
let self = this;
self.city = self.city || "南京";
return {
zoom: 12,
// center: [121.59996, 31.197646],
address: "",
// 在全国范围内搜索地址
searchOption: {
city: "全国",
citylimit: true
},
markers: [
[121.59996, 31.197646],
[121.40018, 31.197622],
[121.69991, 31.207649]
],
plugin: [
{
pName: "ToolBar",
events: {
init(instance) {
// console.log(instance);
}
}
}
],
events: {
init(map) {
},
click: e => {
let { lng, lat } = e.lnglat;
self.lng = lng;
self.lat = lat;
// 这里通过高德 SDK 完成。
var geocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
});
geocoder.getAddress([lng, lat], function(status, result) {
if (status === "complete" && result.info === "OK") {
if (result && result.regeocode) {
console.log('地址==>',result.regeocode)
self.address = result.regeocode.formattedAddress;
let province = result.regeocode.addressComponent.province;
let city = result.regeocode.addressComponent.city;
let area = result.regeocode.addressComponent.district;
let street = result.regeocode.addressComponent.township;
self.$nextTick();
// 将拿到的地址通过emit方式发送给父组件,回显数据
let address = {
province:province,
city:city,
area:area,
street:street,
formattedAddress:self.address
};
self.$emit('selectedAddr',address);
}
}
});
}
},
lng: 0,
lat: 0,
mapCenter:null,
};
},
mounted() {},
methods: {
onSearchResult(pois) {
this.markers = [];
let latSum = 0;
let lngSum = 0;
if (pois.length > 0) {
pois.forEach(poi => {
let { lng, lat } = poi;
lngSum += lng;
latSum += lat;
this.markers.push([poi.lng, poi.lat]);
});
let center = {
lng: lngSum / pois.length,
lat: latSum / pois.length
};
this.mapCenter = [center.lng, center.lat];
}
},
// 将搜索出来的结果添加标记
addMarker: function() {
let lng = 121.5 + Math.round(Math.random() * 1000) / 10000;
let lat = 31.197646 + Math.round(Math.random() * 500) / 10000;
this.markers.push([lng, lat]);
}
}
};
</script>
<style lang='scss' scoped>
.amap-wrapper {
width: 800px;
height: 500px;
border: 1px solid #666;
background:rgb(207, 203, 203);
}
</style>