<template> <div class="mapShow"> <div class="selectCity"> <el-select v-model="location" placeholder="选择城市"> <el-option v-for="item in cityOption" :key="item.label" :label="item.name" :value="item.label"> </el-option> </el-select> <input :disabled="form.location === ''" class="el-input__inner" type="text" id="keyword" name="keyword" placeholder="请输入内容"/> <el-button type="warning" plain :disabled="isDisabled" @click="dataChange">确定</el-button> </div> <div id="container" class="map"></div> </div> </template> <script> import { fetchApi } from '@/api/getData' export default { name: 'map-show', data () { return { map: null, location: '',
cityOption: [{
label: 1,
name: '北京'
}, {
label: 2,
name: '杭州'
}, {
label: 3,
name: '上海'
}],
dataRes: {}, isDisabled: true } }, mounted () { this.initMap() }, watch: {
// 搜索城市切换 location: function (name) { this.output(name) } }, methods: { // 实例化地图 initMap () { const AMap = window.AMap this.map = new AMap.Map('container', { resizeEnable: true,
zoom: 12,
center: [120.204388,30.244759] }) },// 输出数据 output(name) { // 位置联想搜索,并标记 let that = this const AMap = window.AMap AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'],function(){ let autoOptions = { city: name, // 城市,默认全国 input: 'keyword' // 使用联想输入的input的id } let autocomplete= new AMap.Autocomplete(autoOptions) const placeSearch = new AMap.PlaceSearch({ city: name, map: new AMap.Map('container', { resizeEnable: true }) }) AMap.event.addListener(autocomplete, 'select', function(res) { const data = res.poi
// 组合需要的数据 that.dataRes = { location: data.location.lng + ',' + data.location.lat, address: data.name, addressDetail: data.district + '' + data.address } that.isDisabled = false // 搜索 placeSearch.search(data.name) }) }) }, // 给父组件传值,输出数据 dataChange() { this.$emit('on-data-change', this.dataRes) } } } </script> <style> .mapShow { height: 600px; } .map { width: 100%; height: 550px; margin-top: 10px; } #keyword { width: 200px; height: 40px; margin: 0 20px; color: #606266; }
// 搜索下拉选项,使其不被隐藏 .amap-sug-result { z-index: 9999 !important; } </style>