|
@@ -1,122 +1,21 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <div class="dropdown">
|
|
|
- <el-input @clear="clear" @input="searchByKeyword" v-model="formattedAddress" clearable
|
|
|
- placeholder="输入关键字选取地点"></el-input>
|
|
|
- <div class="dropdown-content" v-if="searchResult.length">
|
|
|
- <div class="" v-for="item of searchResult" :key="item.id">
|
|
|
- <div>
|
|
|
- {{ item.name }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div id="container"></div>
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
<script>
|
|
|
-import AMapLoader from "@amap/amap-jsapi-loader";
|
|
|
-import { status } from "nprogress";
|
|
|
export default {
|
|
|
name: "map-view",
|
|
|
data() {
|
|
|
return {
|
|
|
- map: null,
|
|
|
- formattedAddress: null,
|
|
|
- address: '',
|
|
|
- poi: {},
|
|
|
- marker: null,
|
|
|
- box: false,
|
|
|
- searchResult: []
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.initAMap();
|
|
|
},
|
|
|
- // unmounted() {
|
|
|
- // this.map?.destroy();
|
|
|
- // },
|
|
|
methods: {
|
|
|
- clear() {
|
|
|
- this.poi = {};
|
|
|
- this.clearMarker();
|
|
|
- },
|
|
|
- searchByKeyword(val) {
|
|
|
- console.log(val)
|
|
|
- setTimeout(() => {
|
|
|
- this.autocomplete.search(val, (status, result) => {
|
|
|
- console.log(status, result)
|
|
|
- if (status == 'complete' && result.info == 'OK') {
|
|
|
- this.searchResult = result.tips
|
|
|
- }
|
|
|
-
|
|
|
- })
|
|
|
- }, 500)
|
|
|
-
|
|
|
- },
|
|
|
- clearMarker() {
|
|
|
- if (this.marker) {
|
|
|
- this.marker.setMap(null);
|
|
|
- this.marker = null;
|
|
|
- }
|
|
|
- },
|
|
|
- initAMap() {
|
|
|
- window._AMapSecurityConfig = {
|
|
|
- securityJsCode: "3d1fa066dcbd64ac5460f63c189f0634",
|
|
|
- };
|
|
|
- AMapLoader.load({
|
|
|
- key: "41a0c8e6cc45f8c76306900bf45a1431", // 申请好的Web端开发者Key,首次调用 load 时必填
|
|
|
- version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
|
|
|
- plugins: ["AMap.ToolBar", "AMap.Scale", "AMap.PlaceSearch", "AMap.AutoComplete"], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
|
|
|
- AMapUI: {
|
|
|
- version: "1.1", // AMapUI 版本
|
|
|
- },
|
|
|
- })
|
|
|
- .then((AMap) => {
|
|
|
- this.map = new AMap.Map("container", {
|
|
|
- // 设置地图容器id
|
|
|
- viewMode: "2D", // 是否为3D地图模式
|
|
|
- zoom: 13, // 初始化地图级别
|
|
|
- center: [116.397428, 39.90923], // 初始化地图中心点位置,
|
|
|
- });
|
|
|
- const toolbar = new AMap.ToolBar()
|
|
|
- this.map.addControl(toolbar)
|
|
|
- const Scale = new AMap.Scale()
|
|
|
- this.map.addControl(Scale)
|
|
|
- var autoOptions = {
|
|
|
- input: "tipinput"
|
|
|
- };
|
|
|
- this.autocomplete = new AMap.AutoComplete(autoOptions);
|
|
|
- this.placeSearch = new AMap.PlaceSearch({
|
|
|
- map: this.map
|
|
|
- });
|
|
|
- })
|
|
|
- .catch((e) => {
|
|
|
- console.log(e);
|
|
|
- });
|
|
|
- },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
-#container {
|
|
|
- width: 80%;
|
|
|
- height: 600px;
|
|
|
-}
|
|
|
-
|
|
|
-.dropdown {
|
|
|
- position: relative;
|
|
|
- display: inline-block;
|
|
|
-}
|
|
|
|
|
|
-.dropdown-content {
|
|
|
- display: none;
|
|
|
- position: absolute;
|
|
|
- background-color: #f9f9f9;
|
|
|
- min-width: 160px;
|
|
|
- box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
|
|
|
- z-index: 1;
|
|
|
-}
|
|
|
</style>
|