|
|
@@ -8,14 +8,14 @@
|
|
|
<template #header
|
|
|
><h4 class="full-width text-left">地理位置</h4></template
|
|
|
>
|
|
|
- <input
|
|
|
+ <el-input
|
|
|
v-model="keyword"
|
|
|
id="input"
|
|
|
+ type="text"
|
|
|
placeholder="搜索位置"
|
|
|
- style="z-index: 9999"
|
|
|
@keyup.enter="searchKeyword"
|
|
|
/>
|
|
|
- <div class="flex flex-center flex-justify-start flex-col">
|
|
|
+ <div class="flex flex-center flex-justify-start flex-col mt-10">
|
|
|
<div id="container" class="map"></div>
|
|
|
<el-divider />
|
|
|
<div class="flex flex-center flex-justify-start full-width">
|
|
|
@@ -38,34 +38,21 @@
|
|
|
|
|
|
<script>
|
|
|
import filepicker from '@/components/filepicker/index.vue'
|
|
|
-import AMapLoader from '@amap/amap-jsapi-loader'
|
|
|
-import { shallowRef } from 'vue'
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
filepicker
|
|
|
},
|
|
|
- setup() {
|
|
|
- const map = shallowRef(null)
|
|
|
- return {
|
|
|
- map
|
|
|
- }
|
|
|
- },
|
|
|
watch: {
|
|
|
show: {
|
|
|
handler(val) {
|
|
|
if (val) {
|
|
|
- this.initMap()
|
|
|
+ setTimeout(() => {
|
|
|
+ this.initMap()
|
|
|
+ }, 1000)
|
|
|
}
|
|
|
},
|
|
|
immediate: true
|
|
|
- },
|
|
|
- latitude: {
|
|
|
- handler(val) {
|
|
|
- if (val.length > 0 && this.show) {
|
|
|
- this.addMarker()
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
},
|
|
|
props: {
|
|
|
@@ -86,8 +73,8 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
show: false,
|
|
|
- aMap: null,
|
|
|
- keyword: '',
|
|
|
+ map: null,
|
|
|
+ keyword: '相国',
|
|
|
auto: null,
|
|
|
lnglat: [], // 经纬度数组 [lng,lat]
|
|
|
placeSearch: null
|
|
|
@@ -95,29 +82,27 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
initMap() {
|
|
|
- AMapLoader.load({
|
|
|
- key: '6577c6fd4841e6c69d5fb1bd15bd4696', // 申请好的Web端开发者Key，首次调用 load 时必填
|
|
|
- version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
|
|
- plugins: ['AMap.Scale', 'AMap.PlaceSearch', 'AMap.AutoComplete'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
|
|
+ window._AMapSecurityConfig = {
|
|
|
+ securityJsCode: 'b7c07b56f6647ae56ff3d926a42d9565'
|
|
|
+ }
|
|
|
+ this.map = new AMap.Map('container', {
|
|
|
+ // 设置地图容器id
|
|
|
+ viewMode: '2D', // 是否为3D地图模式
|
|
|
+ zoom: 13, // 初始化地图级别
|
|
|
+ features: ['bg', 'road', 'building', 'point']
|
|
|
+ })
|
|
|
+ const _this = this
|
|
|
+ AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
|
|
|
+ _this.map.addControl(new AMap.ToolBar())
|
|
|
+ _this.map.addControl(new AMap.Scale())
|
|
|
+ })
|
|
|
+ this.map.on('complete', () => {
|
|
|
+ this.addMarker(this.latitude, this.longitude)
|
|
|
+ this.mapSearchInit()
|
|
|
})
|
|
|
- .then(AMap => {
|
|
|
- this.map = new AMap.Map('container', {
|
|
|
- // 设置地图容器id
|
|
|
- viewMode: '2D', // 是否为3D地图模式
|
|
|
- zoom: 15, // 初始化地图级别
|
|
|
- mapStyle: 'amap://styles/whitesmoke',
|
|
|
- center: [this.latitude, this.longitude] // 初始化地图中心点位置
|
|
|
- })
|
|
|
- this.addMarker(this.latitude, this.longitude)
|
|
|
- this.addEvent()
|
|
|
- this.mapSearchInit()
|
|
|
- })
|
|
|
- .catch(e => {
|
|
|
- console.log(e)
|
|
|
- })
|
|
|
},
|
|
|
addMarker(lng, lat) {
|
|
|
- console.log('位置', lng, lat) // lnglat=[经度,纬度]
|
|
|
+ this.map.setCenter([lng, lat])
|
|
|
const marker = new AMap.Marker({
|
|
|
position: [lng, lat]
|
|
|
})
|
|
|
@@ -130,33 +115,26 @@ export default {
|
|
|
},
|
|
|
/** 初始化搜索工具 */
|
|
|
mapSearchInit() {
|
|
|
- // 绑定自动提示
|
|
|
const autoOptions = {
|
|
|
input: 'input'
|
|
|
}
|
|
|
- this.auto = new AMap.Autocomplete(autoOptions)
|
|
|
- // 注册placeSearch组件
|
|
|
- this.placeSearch = new AMap.PlaceSearch({
|
|
|
- city: '大理'
|
|
|
+ const _this = this
|
|
|
+ AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function () {
|
|
|
+ const auto = new AMap.AutoComplete(autoOptions)
|
|
|
+ const placeSearch = new AMap.PlaceSearch({
|
|
|
+ map: _this.map
|
|
|
+ }) // 构造地点查询类
|
|
|
+ _this.auto = auto
|
|
|
+ _this.placeSearch = placeSearch
|
|
|
})
|
|
|
- console.log(this.auto, this.placeSearch)
|
|
|
},
|
|
|
/** 关键词搜索 */
|
|
|
searchKeyword() {
|
|
|
- console.log(this.keyword)
|
|
|
this.placeSearch.search(this.keyword, function (status, result) {
|
|
|
// 查询成功时，result即对应匹配的POI信息
|
|
|
console.log(status)
|
|
|
console.log(result)
|
|
|
})
|
|
|
- },
|
|
|
-
|
|
|
- // 当选中某条搜索记录时触发
|
|
|
- selectSite(e) {
|
|
|
- console.log(e)
|
|
|
- this.lnglat = [e.poi.location.lng, e.poi.location.lat]
|
|
|
- this.placeSearch.setCity(e.poi.adcode)
|
|
|
- this.placeSearch.search(e.poi.name)
|
|
|
}
|
|
|
}
|
|
|
}
|
scorpio