目录
之前以为 只要地图搜索功能实现，以及能把后端获取的数据渲染至页面， 我就可以解放了，不用在研究地图了(*^▽^*)，谁曾想，我只是完成了一小部分，o(╥﹏╥)o，
后面 就让我把 点击搜索后 ，跳转的地址，以及它的经纬度，渲染至表单中，这个就涉及到高德地图的正向地理编码 API（地址转为经纬度）。
我查阅各种资料（在博客、掘金，官网），博客、掘金上的文字大多都是 逆地理编码（经纬度转地址），官网虽说有正向地理编码，奈何看官网也是实现不了，最后我大哥建议让我使用 使用POI选点，
奈何 一看到 PoiPicker依赖jQuery，我就直接投降的跟大哥说，我不会
最终实现的效果就是点击 地图空白位置时获取 当前位置的经纬度，以及地址信息
后续（☆）：中 实现的效果是 通过搜索展示出来的marker 点击当前的marker获取当前的经纬度，地址，以及地区编码
个人账户每天搜索调用额度为 100次 而企业账户每天1000次
我们是后管系统 选Web端（JS API）
提交成功后弹出提示框
点击 
map.vue
<template>
<div class="basics">
<div class="mapCont">
<div>
<el-input
style="width: 85%"
v-model="inputObject.userInput"
placeholder="请输入你要查找的关键词"
type="text"
></el-input>
<el-button style="width: 85px" type="primary" @click="send"
>搜索</el-button
>
</div>
<div id="container"></div>
</div>
<div class="img">
<el-input placeholder="请选择图片"></el-input>
</div>
</div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { getStation } from "@/api/pile/station.js";
import bus from "@/bus/bus";
window._AMapSecurityConfig = {
securityJsCode: "高德开放平台申请的安全密钥",
};
export default {
data() {
return {
map: null,
autoOptions: {
input: "",
},
inputObject: {
userInput: "",
// inputId: "searchInput",
lnglat: "",
},
searchPlaceInput: "",
auto: null,
placeSearch: "",
stationId: this.$route.params.id,
};
},
methods: {
// 点击搜索按钮
send() {
this.searchPlaceInput = this.inputObject.userInput;
console.log("搜索值", this.searchPlaceInput);
},
queryStationInfo() {
getStation(this.stationId).then((response) => {
this.lat = response.data.stationLat;
this.lng = response.data.stationLng;
console.log(this.lat, this.lng);
this.initMap(this.lat, this.lng);
});
},
initMap(lat, lng) {
// console.log(lat, lng);
AMapLoader.load({
key: "高德开放平台申请的key", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then((AMap) => {
this.map = new AMap.Map("container", {
//设置地图容器id
viewMode: "3D", //是否为3D地图模式
zoom: 15, //初始化地图级别
center: [+lng, +lat], //初始化地图中心点位置
});
// this.map.addControl(new AMap.Geolocation());
// console.log("map", this.map);
// 设置鼠标的样式
this.map.setDefaultCursor("pointer");
// 点标记
let marker = new AMap.Marker({
position: new AMap.LngLat(+lng, +lat),
});
// 将创建的点标记添加到已有的地图实例
this.map.add(marker);
AMap.plugin("AMap.AutoComplete", function () {
auto = new AMap.AutoComplete(this.autoOptions);
//构造地点查询类
auto.on("select", this.select);
});
this.placeSearch = new AMap.PlaceSearch({
map: this.map,
});
// 逆向地理编码 -> 要正向地理编码
this.map.on("click", (e) => {
let lat = e.lnglat.lat;
let lng = e.lnglat.lng;
this.getLngLatService(lat, lng);
let lnglat = [lng, lat];
console.log("经纬度", lnglat);
});
})
.catch((e) => {
console.log(e);
});
},
select(e) {
this.placeSearch.search(e.poi.name); //关键字查询查询
},
//逆向地理编码服务
getLngLatService(lat, lng) {
let pos = [lng, lat];
let lnglat = new AMap.LngLat(lng, lat);
let geocoder = new AMap.Geocoder({
// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
city: "全国",
});
//1.点击地图任意位置生成一个marker
// let marker = new AMap.Marker({
// position: new AMap.LngLat(lng, lat),
// });
// this.map.add(marker);
// 移除已创建的marker
// this.map.remove(marker);
let address = "";
//2.将位置转化为坐标点-->地理信息
//3.根据地理信息（地址）进行搜索获取详细信息！
geocoder.getAddress(lnglat, (status, result) => {
if (status === "complete" && result.regeocode) {
address = result.regeocode.formattedAddress;
let res = {
pos: pos,
address: address,
};
console.log("res", res);
bus.$emit("res", res);
//需求：固定的窗体信息进行展示！
} else {
log.error("根据经纬度查询地址失败");
}
});
},
},
mounted() {
//DOM初始化完成进行地图初始化
this.queryStationInfo();
},
created() {
this.send();
},
watch: {
searchPlaceInput(newValue) {
if (newValue != null) {
console.log(newValue);
this.placeSearch.search(newValue);
this.map.setZoom(16, true, 1);
}
},
},
};
</script>
<style lang="scss">
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 90%;
}
.basics {
display: flex;
height: 500px;
width: 100%;
}
.mapCont {
width: 50%;
}
.img {
margin-left: 20px;
}
// #search_container {
// height: 50%;
// width: 50%;
// display: flex;
// justify-content: baseline;
// align-items: center;
// #searchBtn {
// height: 100%;
// width: 65px;
// }
// }
</style>
<template>
<div class="basics">
<div class="mapCont">
<div>
<el-input
style="width: 85%"
v-model="inputObject.userInput"
placeholder="请输入你要查找的关键词"
type="text"
@keyup.enter.native="send"
></el-input>
<el-button style="width: 85px" type="primary" @click="send"
>搜索
</el-button>
</div>
<div id="container"></div>
</div>
</div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { getStation } from "@/api/pile/station.js";
import bus from "@/bus/bus";
window._AMapSecurityConfig = {
securityJsCode: "安全密钥",
};
export default {
// 父向子传值
props: ["stationLat", "stationLng"],
data() {
return {
dialogImageUrl: "",
dialogVisible: false,
map: null,
autoOptions: {
input: "",
},
inputObject: {
userInput: "",
lnglat: "",
},
searchPlaceInput: "",
auto: null,
placeSearch: "",
stationId: this.$route.params.id,
avatar: "",
};
},
methods: {
// 点击搜索按钮
send() {
this.searchPlaceInput = this.inputObject.userInput;
console.log("搜索值", this.searchPlaceInput);
// 向表单 site-info传值
bus.$emit("inp", this.searchPlaceInput);
},
// queryStationInfo() {
// getStation(this.stationId).then((response) => {
// this.lat = response.data.stationLat;
// this.lng = response.data.stationLng;
// console.log(this.lat, this.lng);
// this.initMap(this.lat, this.lng);
// });
// },
// 在这里处理点击事件
handleSearchResultClick(data) {
// console.log(data,'data'); // 搜索成功后点击当前marker打印出来的数据
let lat = data.location.lat;
let lng = data.location.lng;
this.getLngLatService(lat, lng);
},
initMap() {
// console.log(lat, lng);
AMapLoader.load({
key: "高德开放平台申请的key", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [
"AMap.AutoComplete",
"AMap.PlaceSearch",
"AMap.Geocoder",
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then((AMap) => {
this.map = new AMap.Map("container", {
//设置地图容器id
viewMode: "3D", //是否为3D地图模式
zoom: 15, //初始化地图级别
center: [+this.stationLng, +this.stationLat], //初始化地图中心点位置
});
// 设置鼠标的样式
this.map.setDefaultCursor("pointer");
// 点标记
let marker = new AMap.Marker({
position: new AMap.LngLat(
+this.stationLng,
+this.stationLat
),
});
// 将创建的点标记添加到已有的地图实例
this.map.add(marker);
AMap.plugin("AMap.AutoComplete", function () {
let auto = new AMap.AutoComplete(this.autoOptions);
//构造地点查询类
auto.on("select", this.select);
});
this.placeSearch = new AMap.PlaceSearch({
map: this.map,
});
// 点击搜索结果的回调函数
this.placeSearch.on("markerClick", (e) => {
// 在此处处理点击事件
this.handleSearchResultClick(e.data);
});
// 逆向地理编码 -> 要正向地理编码
marker.on("click", (e) => {
console.log('marker点击事件中的e',e)
let lat = e.lnglat.lat;
let lng = e.lnglat.lng;
this.getLngLatService(lat, lng);
});
})
.catch((e) => {
console.log(e);
});
},
select(e) {
this.placeSearch.search(e.poi.name); //关键字查询查询
},
//逆向地理编码服务
getLngLatService(lat, lng) {
let pos = [lng, lat];
let lnglat = new AMap.LngLat(lng, lat);
let geocoder = new AMap.Geocoder({
// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
city: "全国",
});
geocoder.getAddress(lnglat, (status, result) => {
if (status === "complete" && result.regeocode) {
console.log("geocoder.getAddress result", result);
let address = result.regeocode.formattedAddress;
let adcode = result.regeocode.addressComponent.adcode;
let res = {
pos: pos,
address: address,
adcode: adcode,
};
// console.log("res", res); // 点击当前marker获取它的地区编码，经纬度以及 地址
bus.$emit("res", res);
} else {
console.log("根据经纬度查询地址失败");
// log.error("根据经纬度查询地址失败");
}
});
},
},
mounted() {
//DOM初始化完成进行地图初始化
// this.queryStationInfo()
},
created() {
// this.send();
this.initMap()
},
watch: {
searchPlaceInput(newValue) {
if (newValue != null) {
console.log(newValue);
this.placeSearch.search(newValue);
this.map.setZoom(16, true, 1);
}
},
},
};
</script>
<style lang="scss">
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 90%;
}
.basics {
display: flex;
height: 500px;
width: 100%;
}
.mapCont {
width: 50%;
}
.img {
flex: 1;
margin-left: 100px;
}
</style>
你们把代码 cv过去时，没啥效果，是因为 这里面我使用了 eventBus 传值（传值这个在前面的文章里也提到过）
1. scr -> bus / bus.js
import Vue from "vue";
//兄弟组件之间进行通行
export default new Vue();
2. 自己 封装 表单的 .vue 文件
代码
import bus from "@/bus/bus";
mounted() {
// 接收map 地图传过来的搜索值
bus.$on("res", (data) => {
console.log(data); // data就是它传过来的值
// 赋值
this.station.stationLng = data.pos[0];
this.station.stationLat = data.pos[1];
this.station.address = data.address;
});
},总代码中 关键代码片段
//逆向地理编码服务
getLngLatService(lat, lng) {
let pos = [lng, lat];
let lnglat = new AMap.LngLat(lng, lat);
let geocoder = new AMap.Geocoder({
// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
city: "全国",
});
//1.点击地图任意位置生成一个marker
// let marker = new AMap.Marker({
// position: new AMap.LngLat(lng, lat),
// });
// this.map.add(marker);
// 移除已创建的marker
// this.map.remove(marker);
let address = "";
//2.将位置转化为坐标点-->地理信息
//3.根据地理信息（地址）进行搜索获取详细信息！
geocoder.getAddress(lnglat, (status, result) => {
if (status === "complete" && result.regeocode) {
address = result.regeocode.formattedAddress;
let res = {
pos: pos,
address: address,
};
console.log("res", res);
bus.$emit("res", res);
//需求：固定的窗体信息进行展示！
} else {
log.error("根据经纬度查询地址失败");
}
});
},pos：经纬度