<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>
12-13 22:40
查看更多