mirror of
https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git
synced 2026-05-18 00:38:33 +08:00
Merge branch 'dev' of http://192.168.2.2:8099/jsowell/jsowell-charger-web into dev
This commit is contained in:
@@ -7,6 +7,7 @@
|
|||||||
v-model="inputObject.userInput"
|
v-model="inputObject.userInput"
|
||||||
placeholder="请输入你要查找的关键词"
|
placeholder="请输入你要查找的关键词"
|
||||||
type="text"
|
type="text"
|
||||||
|
@keyup.enter.native="send"
|
||||||
></el-input>
|
></el-input>
|
||||||
<el-button style="width: 85px" type="primary" @click="send"
|
<el-button style="width: 85px" type="primary" @click="send"
|
||||||
>搜索
|
>搜索
|
||||||
|
|||||||
@@ -1,176 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div style="width: 85%; height: 500px">
|
|
||||||
<div>
|
|
||||||
<el-input
|
|
||||||
style="width: 60%"
|
|
||||||
v-model="inputObject.userInput"
|
|
||||||
placeholder="请输入你要查找的关键词"
|
|
||||||
type="text"
|
|
||||||
></el-input>
|
|
||||||
<el-button type="primary" @click="send">搜索</el-button>
|
|
||||||
</div>
|
|
||||||
<div id="container"></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: "829b6b73f84682c2eb982eaa47a745b8",
|
|
||||||
};
|
|
||||||
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);
|
|
||||||
// 向表单 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);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
initMap(lat, lng) {
|
|
||||||
// console.log(lat, lng);
|
|
||||||
AMapLoader.load({
|
|
||||||
key: "61436c9c789d301a5b73853d176710cf", // 申请好的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: 5, //初始化地图级别
|
|
||||||
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);
|
|
||||||
bus.$emit("lnglat", 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);
|
|
||||||
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", lnglat.lng, lnglat.lat, address);
|
|
||||||
//需求:固定的窗体信息进行展示!
|
|
||||||
} 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%;
|
|
||||||
}
|
|
||||||
// #search_container {
|
|
||||||
// height: 50%;
|
|
||||||
// width: 50%;
|
|
||||||
// display: flex;
|
|
||||||
// justify-content: baseline;
|
|
||||||
// align-items: center;
|
|
||||||
// #searchBtn {
|
|
||||||
// height: 100%;
|
|
||||||
// width: 65px;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user