地图选点功能
在详设阶段,需要实现地图选点,这个自己之前从来没有实现过,现在来实现一下,这个过程中参考了高德地图的官方开发文档和vue-amap文档,地址链接分别如下:高德地图官方文档:https://lbs.amap.com/api/javascript-api/example/map-lifecycle/map-showvue-amap文档:https://elemefe.github.io...
·
在详设阶段,需要实现地图选点,这个自己之前从来没有实现过,现在来实现一下,这个过程中参考了高德地图的官方开发文档和vue-amap文档,地址链接分别如下:
高德地图官方文档:
https://lbs.amap.com/api/javascript-api/example/map-lifecycle/map-show
vue-amap文档:
https://elemefe.github.io/vue-amap/#/zh-cn/services/searchbox
然后自己写了一个基础示例:
实现代码如下:
<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;
.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'>
import Vue from "vue";
import VueAMap from "vue-amap";
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
//高德的key
key: "cc644a48b701c256e9a827f068743fdd",
// 插件集合
plugin: [
"AMap.Autocomplete",
"AMap.PlaceSearch",
"AMap.Scale",
"AMap.OverView",
"AMap.ToolBar",
"AMap.MapType",
"AMap.PolyEditor",
"AMap.CircleEditor",
"AMap.Geolocation",
"AMap.Geocoder",
"AMap.AMapUI"
],
v: "1.4.4",
uiVersion: "1.0.11" // 版本号
});
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
};
},
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>
在实现上述代码之前,需要先安装插件vue-amap,
npm install vue-amap --save
在安装的过程中,遇到了一些问题,但是还好,通过提示以及百度都解决了。
在上述代码中,我们也可以把GaodeMap.vue中的关于VueAMap的引用放到main.js中:
如下:
main.js文件
更多推荐
已为社区贡献10条内容
所有评论(0)