以高德地图为里，申请key，选择js api服务，获取key和密钥.
vue2项目代码引入相关依赖：
npm i @amap/amap-jsapi-loader -S封装成组件:
<template>
<div>
<el-row :gutter="15" class="">
<el-col :span="16">
<el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="100px" label-position="right">
<el-col :span="24">
<el-form-item label="关键字搜索" prop="wordkey">
<!-- <el-input v-model="dataForm.kqLocation" placeholder="自动带出" clearable :style="{ width: '100%' }" > -->
<el-input v-model="input" placeholder="请输入内容" id="tipinput"></el-input>
</el-input>
</el-form-item>
</el-col>
<!-- <el-col :span="24">
<el-form-item label="地点" prop="kqLocation">
<el-input v-model="dataForm.kqLocation" placeholder="自动带出" clearable :style="{ width: '100%' }" >
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="经度" prop="kqLongitude">
<el-input v-model="dataForm.kqLongitude" placeholder="自动带出" clearable :style="{ width: '100%' }" >
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="纬度" prop="kqLatitude">
<el-input v-model="dataForm.kqLatitude" placeholder="自动带出" clearable :style="{ width: '100%' }" >
</el-input>
</el-form-item>
</el-col> -->
</el-form>
</el-col>
<el-col :span="16">
<div style="width: 100%">
<div ref="gaode_Map" id="gaode_Map"></div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader"; //引入AMapLoader
window._AMapSecurityConfig = {
// 设置安全密钥
securityJsCode: "xx",
};
export default {
components: {},
props: [],
data () {
return {
loading: false,
visible: false,
isDetail: false,
dataForm: {
kqLocation: undefined,
kqLongitude: undefined,
kqLatitude: undefined,
},
rules: {},
input: "",
map: null,
auto: null,
placeSearch: null,
lnglat: [],
markers: [],
position: {},
form:{},
address:null,
};
},
computed: {},
watch: {},
created () { },
mounted () {this.initMap() },
methods: {
// 地图初始化
initMap () {
let centerLen = [116.397428, 39.90923];
AMapLoader.load({
key: "xx", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Geocoder"],
})
.then((AMap) => {
this.map = new AMap.Map("gaode_Map", {
// 设置地图容器id
viewMode: "3D", // 是否为3D地图模式
zoom: 18, // 初始化地图级别
center: centerLen, //中心点坐标
resizeEnable: true,
});
this.setMarker(centerLen)
// 关键字查询
this.searchMap();
// 监听鼠标点击事件
this.map.on("click", this.clickMapHandler);
})
.catch((e) => { });
},
// 关键字查询
searchMap () {
// 搜索框自动完成类
this.auto = new AMap.AutoComplete({
input: "tipinput", // 使用联想输入的input的id
});
//构造地点查询类
this.placeSearch = new AMap.PlaceSearch({
map: this.map,
});
// 当选中某条搜索记录时触发
this.auto.on("select", this.selectSite);
},
//选中查询出的记录
selectSite (e) {
if (e.poi.location) {
this.lnglat = e.poi.location;
this.placeSearch.setCity(e.poi.adcode);
this.placeSearch.search(e.poi.name); //关键字查询
let geocoder = new AMap.Geocoder({});
let that = this;
geocoder.getAddress(this.lnglat, function (status, result) {
if (status === "complete" && result.regeocode) {
var province = result.regeocode.addressComponent.province;
var city = result.regeocode.addressComponent.city;
//自己想要赋的值，根据自己的做修改
that.$set(that.form, "province", province);
that.$set(that.form, "city", city);
that.$set(that.form, "address", e.poi.name);
that.$set(
that.form,
"coordinate",
// e.poi.location.lng + "," + e.poi.location.lat
e.poi.location[0]+","+ + e.poi.location[1]
); //纬度，经度
} else {
}
});
} else {
this.$message.error("查询地址失败，请重新输入地址");
}
},
// 点击地图事件获取经纬度，并添加标记
clickMapHandler (e) {
this.dataForm.kqLongitude = e.lnglat.getLng();
this.$emit('longitude', this.dataForm.kqLongitude)
this.dataForm.kqLatitude = e.lnglat.getLat();
this.$emit('latitude', this.dataForm.kqLatitude)
this.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
this.setMarker(this.lnglat);
// 点击地图上的位置，根据经纬度转换成详细地址
let geocoder = new AMap.Geocoder({});
let that = this;
geocoder.getAddress(this.lnglat, function (status, result) {
if (status === "complete" && result.regeocode) {
that.dataForm.kqLocation = result.regeocode.formattedAddress;
that.$emit('address', that.dataForm.kqLocation)
that.address=that.dataForm.kqLocation;
} else {
}
});
this.position = {
longitude: e.lnglat.getLng(),
latitude: e.lnglat.getLat(),
address: that.address,
};
this.input = that.address; //把查询到的地址赋值到输入框
},
// 添加标记
setMarker (lnglat) {
this.removeMarker();
let marker = new AMap.Marker({
position: lnglat,
});
marker.setMap(this.map);
this.markers.push(marker);
},
// 删除之前后的标记点
removeMarker () {
if (this.markers) {
this.map.remove(this.markers);
}
},
},
};
</script>
<style lang="scss">
.search_box {
display: flex;
justify-content: flex-start;
align-items: center;
height: 50px;
.label {
color: #000;
width: 100px;
}
}
.content {
position: relative;
}
#panel {
position: absolute;
top: 50px;
right: 20px;
}
#gaode_Map {
overflow: hidden;
width: 100%;
height: 340px;
margin: 0;
}
.amap-sug-result {
z-index: 2999 !important;
}
</style>
页面引用:
import amap from '@/components/Amap/index'
components:{amap},
<el-form-item label="地址" prop="address">
<el-input v-model="form.address" placeholder="请输入地址" />
</el-form-item>
<el-form-item label="经度" prop="longitude">
<el-input v-model="form.longitude" placeholder="请输入经度" />
</el-form-item>
<el-form-item label="纬度" prop="latitude">
<el-input v-model="form.latitude" placeholder="请输入纬度" />
</el-form-item>
<el-form-item label="">
<amap @address="getAddress" @longitude = "getLongitude" @latitude = "getLatitude"></amap>
</el-form-item>
#子组件选择赋值给父组件的属性
getAddress(data){
this.form.address = data;
},
getLongitude(data){
this.form.longitude = data;
},
getLatitude(data){
this.form.latitude = data;
},
![[一]ffmpeg音视频解码](https://img-blog.csdnimg.cn/direct/e87df84551d44320aa1e464c35f7b8fb.png)