vue 高德地图API根据地址获取经纬度/根据经纬度获取地址

1.引入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=xxxxxxxxxxxxxx"></script>

2.初始化地图

let that = this;

that.map = new AMap.Map('carContainer', {

resizeEnable: true,

})

// 为地图注册click事件获取鼠标点击出的经纬度坐标

that.map.on('click', function (e) {

var lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()];

that.init(lnglatXY)

});

3.地址获取经纬度

let _this = this;

window.AMap.plugin('AMap.PlaceSearch', function () {

var autoOptions = {

city: '全国',

map: _this.map, // 展现结果的地图实例

pageSize: 1, // 单页显示结果条数

pageIndex: 1, // 页码

autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围

};

var placeSearch = new window.AMap.PlaceSearch(autoOptions);

placeSearch.search(_this.formInline.text, function (status, result) {

// 搜索成功时，result即是对应的匹配数据

if (status == 'complete') {

if (result.poiList.pois.length = 0) {

ElMessage.error('没有查询到对应的地址');

}else{

let lng = result.poiList.pois[0].location.lng;

let lat = result.poiList.pois[0].location.lat

}

} else if (status == 'no_data') {

ElMessage.error('没有查询到对应的地址');

}

});

});

4.经纬度获取地址

AMap.plugin('AMap.Geocoder', function () {

var geocoder = new AMap.Geocoder({

radius: 1000,

extensions: "all"

});

geocoder.getAddress(lnglatXY, function (status, result) {

if (status === 'complete' && result.info === 'OK') {

var address = result.regeocode.formattedAddress;

that.address = address //兑换地址

that.$emit('getaddress', that.address, lnglatXY)

} else {

ElMessage.error('无地址，请重新选择');

}

});

// 清除所有标记

that.map.clearMap();

var marker = new AMap.Marker();

that.map.add(marker);

marker.setPosition(lnglatXY);

})

完整代码

<template><el-dialogtitle="客户地址"v-model="Visible":close-on-click-modal="false":close-on-press-escape="false"width="1000px"@close="addressClose"><div><el-form:inline="true":model="formInline"class="demo-form-inline"><el-form-itemlabel="查询"v-if="0"><el-inputv-model="formInline.text"placeholder="请输入要搜索的地址"></el-input></el-form-item><el-form-item><el-inputv-model="formInline.text"placeholder="请输入要搜索的地址"style="width:500px;"clearable></el-input></el-form-item><el-form-item><el-buttontype="primary"@click="onQuery">查询</el-button></el-form-item></el-form><div id="carContainer"></div></div></el-dialog>
</template><script>
import AMap from 'AMap'
import { ElMessage } from "element-plus";
export default {props: {locationVisible: {type: Boolean,default: true},customerAddress: {type: String,default: ''}},emits: ['getaddress', 'addressClose'],//这里需要写出定义的事件名data () {return {formInline: {text: ''},map: null,address: '',Visible: false};},watch: {locationVisible (val) {if (val) {this.Visible = true// 在这里使用$nextTick初始化地图插件即可this.$nextTick(() => {this.ready()});} else {this.Visible = false}},customerAddress (val) {this.formInline.text = val}},mounted () {window.onLoadMap = () => {this.ready();};},methods: {addressClose () {this.$emit('addressClose')},// 查询onQuery () {this.init1()},// 初始化ready () {let that = this;that.map = new AMap.Map('carContainer', {resizeEnable: true,})// 为地图注册click事件获取鼠标点击出的经纬度坐标that.map.on('click', function (e) {var lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()];that.init(lnglatXY)});if (this.formInline.text) {that.onQuery()}},// 地址获取经纬度  // let lng = result.poiList.pois[0].location.lng;// let lat = result.poiList.pois[0].location.lat;// _this.longAndLat = lng + ',' + lat;// _this.addMarker(lng, lat);init1 () {let _this = this;window.AMap.plugin('AMap.PlaceSearch', function () {var autoOptions = {city: '全国',map: _this.map, // 展现结果的地图实例pageSize: 1, // 单页显示结果条数pageIndex: 1, // 页码autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围};var placeSearch = new window.AMap.PlaceSearch(autoOptions);placeSearch.search(_this.formInline.text, function (status, result) {// 搜索成功时，result即是对应的匹配数据if (status == 'complete') {if (result.poiList.pois.length = 0) {ElMessage.error('没有查询到对应的地址');}} else if (status == 'no_data') {ElMessage.error('没有查询到对应的地址');}});});},//经纬度获取地址init (lnglatXY) {var that = thisAMap.plugin('AMap.Geocoder', function () {var geocoder = new AMap.Geocoder({radius: 1000,extensions: "all"});geocoder.getAddress(lnglatXY, function (status, result) {if (status === 'complete' && result.info === 'OK') {var address = result.regeocode.formattedAddress;that.address = address  //兑换地址that.$emit('getaddress', that.address, lnglatXY)} else {ElMessage.error('无地址，请重新选择');}});// 清除所有标记that.map.clearMap();var marker = new AMap.Marker();that.map.add(marker);marker.setPosition(lnglatXY);})},}
}
</script><style lang="scss" scoped>
.el-dialog {#carContainer {width: 100%;height: 500px;}
}
</style>

vue 高德地图API根据地址获取经纬度/根据经纬度获取地址相关推荐

Vue+高德地图API的使用(定位打卡)
接上之前的项目 Vue+高德地图API的使用 Vue+高德地图API的使用(插件的使用) 1.页面布局绘制页面 <div class="Clock"><!-- ...
利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示先完成准备工 ...
Vue+高德地图api
文章目录前言一.准备工作 1.申请应用 2.引入 3.创建地图二.使用高德地图 1.覆盖物 (1) 点标记 (2) 海量点标记 (3) 轨迹回放 2.矢量图形 (1) 多边形 3.图层 (1) ...
vue 高德地图api爬坑之路（一）初始化
由于使用vue-amap插件有点问题,所以使用了原生高德地图api. 集成: public/index.html 添加 <script type="text/javascript&qu ...
Vue+高德地图API的使用
浏览器搜索高德开放平台或者高德地图API 链接地址:https://lbs.amap.com/ 二.创建Vue项目 Vue2跟Vue3的差别不大,用哪个都可以使用npm 安装高德地图按 N ...
vue 高德地图api爬坑之路（三）Autocomplete 和 PlaceSearch
添加页面控件 <div class="search-div" ><el-input id="tipInput" v-model="i ...
Vue+高德地图API的使用(插件的使用)
接上次地图显示官方文档:根据自己需求引入想要的插件在AMapLoader.load中的plugins引入你所需要的插件 //这里是我引入的插件 plugins: ["AMap.ToolB ...
Vue+高德地图API的使用(电子围栏)
页面绘制 <template><el-table :data="fencingData" border st ...
html调用高德地图得到城市,高德地图API获取行政区域
高德地图API提供的行政区划查询,可以获取到行政区域的区号.城市编码.中心点.边界.下辖区域的详细信息.基于该工具进行扩展,对边界数据做转换处理,保存为GeoJson格式文件,方便使用.现已可以单个城 ...

vue 高德地图API根据地址获取经纬度/根据经纬度获取地址

1.引入

2.初始化地图

3.地址获取经纬度

4.经纬度获取地址

vue 高德地图API根据地址获取经纬度/根据经纬度获取地址相关推荐

最新文章

热门文章