子组件
html
<template>
<div id="amapcontainer"></div>
</template>
js
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
securityJsCode: '7a098xxxxxxxxxxxxx1cd8b' // '「申请的安全密钥」',更换成自己的
}
export default {
data () {
return {
map: null, //地图示例
addr:'' //地址解析之后的地址值
}
},
mounted () {
// DOM初始化完成进行地图初始化
this.initAMap()
},
methods: {
initAMap () {
let that = this
AMapLoader.load({
key: "141fxxxxxxxxxxxxxxxxxxxxxx91c", // 申请好的Web端开发者Key,首次调用 load 时必填 更换成自己的的
version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", 'AMap.Geocoder',
'AMap.CitySearch', 'AMap.Geolocation', 'AMap.AutoComplete'], // 需要使用的的插件列表
}).then((AMap) => {
// 获取到作为地图容器的DOM元素,创建地图实例
this.map = new AMap.Map("amapcontainer", { //设置地图容器id
resizeEnable: true,
viewMode: "3D", // 使用3D视图
zoomEnable: true, // 地图是否可缩放,默认值为true
dragEnable: true, // 地图是否可通过鼠标拖拽平移,默认为true
doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图,默认为true
zoom: 14, //初始化地图级别
center: [123.918193,47.354892], // 初始化中心点坐标
//mapStyle: "amap://styles/darkblue", // 设置颜色底层
})
// 地图点击事件,点击获取经纬度;
this.map.on("click", (e) => {
// 获取经纬度
//console.log('map click', e, e.lnglat.getLng(), e.lnglat.getLat());
let Clnglat = [e.lnglat.getLng(),e.lnglat.getLat()]
let geocoder = new AMap.Geocoder({radius: 1000});
//根据坐标获取位置 将经纬度 转换后成 地址信息 放在父组件的input value属性展示
geocoder.getAddress(Clnglat,function (status, result) {
if (status === "complete" && result.info === "OK") {
//console.log(result.regeocode.formattedAddress)
that.addr = result.regeocode.formattedAddress;
that.$emit('childByValue', that.addr) }
})
})
}).catch(e => {
console.log(e) //错误处理
})
}
}
}
</script>
css
<style>
#amapcontainer {
width: 750px;
height: 400px; /*设置地图容器高度 必须 否则不显示*/
}
</style>
父组件
html
<template>
<div class="addr"><div>地址:</div>
<div>
<el-input :rows="1" style="width: 600px" type="input" class="article-input" v-model="childValue" placeholder="请在地图上点选起点位置" />
</div>
</div>
<div id="map">
<map-container v-on:childByValue="childByValue" style=" height: 400px;width: 750px;"></map-container>
</div>
</div>
</template>
js
<script>
import MapContainer from "@/components/amap.vue";
export default {
name: 'Demo',
components: { MapContainer },
data() {
return {
childValue:''
}
},
methods: {
childByValue: function (childValue) {
// childValue就是子组件传过来的值
this.childValue = childValue
}
}
}
</script>
css
<style>
.addr{
margin: 20px 0px;
display: flex;
flex-direction: row;
}
.addr div{
height: 33px;
line-height: 33px;
}
#map{
height: 400px;
width: 750px;
}
</style>
完整源码下载请点击 源码编号:001