地图搜索功能
This commit is contained in:
parent
40ec600459
commit
83c5b77eef
199
god-ui/src/views/cityManage/mapInfo/geography/index1.vue
Normal file
199
god-ui/src/views/cityManage/mapInfo/geography/index1.vue
Normal file
@ -0,0 +1,199 @@
|
|||||||
|
<template>
|
||||||
|
<div class="amap-wrapper">
|
||||||
|
<div id="deviceMap" style="width: 100%;height: 30%;"></div>
|
||||||
|
|
||||||
|
<div id="panel"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import {ImageMap} from "@/views/cityManage/mapInfo/assets/index";
|
||||||
|
window._AMapSecurityConfig = {
|
||||||
|
securityJsCode:'b6314ade5a42c3f3ac2284b6d4d89b1f',
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
map: null,
|
||||||
|
// ImageMap,
|
||||||
|
keyword:"九龙坡区华岩小学",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initMap();
|
||||||
|
// this.searchPlace();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initMap() {
|
||||||
|
var map = new AMap.Map("deviceMap", {
|
||||||
|
resizeEnable: true
|
||||||
|
});
|
||||||
|
AMap.service(["AMap.PlaceSearch","AMap.AutoComplete","AMap.ToolBar"], function() {
|
||||||
|
//构造地点查询类
|
||||||
|
var placeSearch = new AMap.PlaceSearch({
|
||||||
|
pageSize: 5, // 单页显示结果条数
|
||||||
|
pageIndex: 1, // 页码
|
||||||
|
map: map, // 展现结果的地图实例
|
||||||
|
panel: "panel", // 结果列表将在此容器中进行展示。
|
||||||
|
autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
|
||||||
|
});
|
||||||
|
//关键字查询
|
||||||
|
placeSearch.search('北京大学',(status,result)=>{
|
||||||
|
console.log('status',status);
|
||||||
|
console.log('result',result);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
// this.map = new AMap.Map("deviceMap", {
|
||||||
|
// });
|
||||||
|
// this.searchPlace();
|
||||||
|
// this.map.on('click', (e) => {
|
||||||
|
// navigator.clipboard.writeText(`[${e.lnglat.lng.toString()}, ${e.lnglat.lat.toString()}],`)
|
||||||
|
// })
|
||||||
|
//
|
||||||
|
// const markers = [
|
||||||
|
// [108.665706, 31.944799, '类型: 监控摄像', '设备组: 17851241887'],
|
||||||
|
// [108.660474, 31.947869, '类型: 监控摄像', '设备组: 17851241887'],
|
||||||
|
// [108.664254, 31.947395, '类型: 监控摄像', '设备组: 17851241887'],
|
||||||
|
// [108.666735, 31.948749, '类型: 监控摄像', '设备组: 17851241887'],
|
||||||
|
// [108.669169, 31.94507, '类型: 监控摄像', '设备组: 17851241887'],
|
||||||
|
// ]
|
||||||
|
// markers.forEach(item => {
|
||||||
|
// this.addMapMarker([item[0], item[1]], 'icon1', {
|
||||||
|
// plantareaAddress: '监控摄像',
|
||||||
|
// type: '#2061f3',
|
||||||
|
// info: item[2] || '',
|
||||||
|
// info1: item[3] || '',
|
||||||
|
// })
|
||||||
|
// })
|
||||||
|
//
|
||||||
|
// const markers1 = [
|
||||||
|
// [108.660968, 31.945717, '类型: 火焰探测器', '设备组: 17851241887'],
|
||||||
|
// [108.659861, 31.944657, '类型: 火焰探测器', '设备组: 15847474933'],
|
||||||
|
// [108.669525, 31.947081, '类型: 火焰探测器', '设备组: 15621141817'],
|
||||||
|
// ]
|
||||||
|
// markers1.forEach(item => {
|
||||||
|
// this.addMapMarker([item[0], item[1]], 'icon2', {
|
||||||
|
// plantareaAddress: '火焰探测器',
|
||||||
|
// type: '#2061f3',
|
||||||
|
// info: item[2] || '',
|
||||||
|
// info1: item[3] || '',
|
||||||
|
// })
|
||||||
|
// })
|
||||||
|
//
|
||||||
|
// const markers2 = [
|
||||||
|
// [108.664522, 31.946165, '类型: 消防设备', '设备组: 17851241887'],
|
||||||
|
// [108.662459, 31.944531, '类型: 消防设备', '设备组: 15847474933'],
|
||||||
|
// [108.667982, 31.944251, '类型: 消防设备', '设备组: 15621141817'],
|
||||||
|
// ]
|
||||||
|
// markers2.forEach(item => {
|
||||||
|
// this.addMapMarker([item[0], item[1]], 'icon4', {
|
||||||
|
// plantareaAddress: '消防设备',
|
||||||
|
// type: '#2061f3',
|
||||||
|
// info: item[2] || '',
|
||||||
|
// info1: item[3] || '',
|
||||||
|
// })
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
// 添加图形点标记
|
||||||
|
addMapMarker(LngLatData = [], type = '', info = {}) {
|
||||||
|
const marker = new AMap.Marker({
|
||||||
|
position: new AMap.LngLat(LngLatData[0], LngLatData[1]),
|
||||||
|
offset: new AMap.Pixel(-30, -52),
|
||||||
|
title: ''
|
||||||
|
});
|
||||||
|
this.map.add(marker);
|
||||||
|
marker.on('click', (e) => {
|
||||||
|
this.showInfoWindow(LngLatData[0], LngLatData[1], { type: 'red', ...info })
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 显示信息窗体
|
||||||
|
showInfoWindow(lng, lat, sourceInfo = {}) {
|
||||||
|
if (!sourceInfo.plantareaAddress) return;
|
||||||
|
const content = `
|
||||||
|
<div style="padding: 6px;background-color: white;">
|
||||||
|
<div style="background-color: ${sourceInfo.type};color: white;text-align:center;padding: 6px 10px;letter-spacing:1px;font-weight:bold;">
|
||||||
|
${sourceInfo.plantareaAddress || '监控点'}
|
||||||
|
</div>
|
||||||
|
<div style="padding: 6px 10px 0 10px;font-size: 12px;color:#565656;">
|
||||||
|
<div style="padding: 4px;">${sourceInfo.info || ''}</div>
|
||||||
|
<div style="padding: 4px;">${sourceInfo.info1 || ''}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
const infoWindow = new AMap.InfoWindow({
|
||||||
|
content,
|
||||||
|
anchor: 'middle-left',
|
||||||
|
isCustom: true
|
||||||
|
});
|
||||||
|
infoWindow.open(this.map, [lng, lat])
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 查找位置
|
||||||
|
*/
|
||||||
|
searchPlace(){
|
||||||
|
var map=this.map;
|
||||||
|
AMap.plugin(["AMap.PlaceSearch"], function() {
|
||||||
|
//构造地点查询类
|
||||||
|
var placeSearch = new AMap.PlaceSearch({
|
||||||
|
pageSize: 5, // 单页显示结果条数
|
||||||
|
pageIndex: 1, // 页码
|
||||||
|
city: "010", // 兴趣点城市
|
||||||
|
citylimit: true, //是否强制限制在设置的城市内搜索
|
||||||
|
map: map, // 展现结果的地图实例
|
||||||
|
panel: "panel", // 结果列表将在此容器中进行展示。
|
||||||
|
autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
|
||||||
|
});
|
||||||
|
//关键字查询
|
||||||
|
placeSearch.search("北京大学");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
#panel {
|
||||||
|
position: absolute;
|
||||||
|
background-color: white;
|
||||||
|
max-height: 90%;
|
||||||
|
overflow-y: auto;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
width: 280px;
|
||||||
|
}
|
||||||
|
.amap-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh - 84px);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 999;
|
||||||
|
display: flex;
|
||||||
|
background-color: white;
|
||||||
|
box-shadow: 2px 2px 2px #00000020;
|
||||||
|
padding: 0px 9px 2px 9px;
|
||||||
|
border-radius: 12px;
|
||||||
|
.tool-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 6px;
|
||||||
|
img {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-right: 4px;
|
||||||
|
position: relative;
|
||||||
|
top: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.panel{
|
||||||
|
position: absolute;
|
||||||
|
background-color: white;
|
||||||
|
max-height: 90%;
|
||||||
|
overflow-y: auto;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
width: 280px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
119
god-ui/src/views/cityManage/mapInfo/geography/index22.vue
Normal file
119
god-ui/src/views/cityManage/mapInfo/geography/index22.vue
Normal file
@ -0,0 +1,119 @@
|
|||||||
|
<template>
|
||||||
|
<div style="width: 100%; height: 500px">
|
||||||
|
<div>
|
||||||
|
<el-input
|
||||||
|
style="width: 60%"
|
||||||
|
v-model="inputObject.userInput"
|
||||||
|
:id="inputObject.inputId"
|
||||||
|
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";
|
||||||
|
window._AMapSecurityConfig = {
|
||||||
|
securityJsCode:'b6314ade5a42c3f3ac2284b6d4d89b1f',
|
||||||
|
}
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
map: null,
|
||||||
|
autoOptions: {
|
||||||
|
input: "",
|
||||||
|
},
|
||||||
|
inputObject: {
|
||||||
|
userInput: "",
|
||||||
|
inputId: "searchInput",
|
||||||
|
},
|
||||||
|
searchPlaceInput: "",
|
||||||
|
auto: null,
|
||||||
|
placeSearch: "",
|
||||||
|
stationId: this.$route.params.id,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 搜索
|
||||||
|
send() {
|
||||||
|
this.autoOptions.input = this.inputObject.inputId;
|
||||||
|
this.searchPlaceInput = this.inputObject.userInput;
|
||||||
|
// console.log(this.lng, this.lat);
|
||||||
|
},
|
||||||
|
queryStationInfo() {
|
||||||
|
// getStation(this.stationId).then((response) => {
|
||||||
|
// this.lat = response.data.stationLat;
|
||||||
|
// this.lng = response.data.stationLng;
|
||||||
|
this.lat = "39.904989";
|
||||||
|
this.lng = "116.405285";
|
||||||
|
console.log(this.lat, this.lng);
|
||||||
|
this.initMap(this.lat, this.lng);
|
||||||
|
// });
|
||||||
|
},
|
||||||
|
initMap(lat, lng) {
|
||||||
|
// console.log(lat, lng);
|
||||||
|
this.map = new AMap.Map("container", {
|
||||||
|
//设置地图容器id
|
||||||
|
viewMode: "3D", //是否为3D地图模式
|
||||||
|
zoom: 5, //初始化地图级别
|
||||||
|
center: [+lng, +lat], //初始化地图中心点位置
|
||||||
|
});
|
||||||
|
// 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 () {
|
||||||
|
let auto = new AMap.AutoComplete(this.autoOptions);
|
||||||
|
//构造地点查询类
|
||||||
|
auto.on("select", this.select);
|
||||||
|
});
|
||||||
|
this.placeSearch = new AMap.PlaceSearch({
|
||||||
|
map: this.map,
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
select(e) {
|
||||||
|
this.placeSearch.search(e.poi.name); //关键字查询查询
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
//DOM初始化完成进行地图初始化
|
||||||
|
setTimeout(() => {
|
||||||
|
this.queryStationInfo();
|
||||||
|
},10000)
|
||||||
|
|
||||||
|
},
|
||||||
|
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%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user