haowanShow/admin/src/components/map/index.vue

<template>
  <div class="qqmap">
    <div class="map-tools">
      <!-- <Select class="map-select" v-model="form.city" size="large">
        <Option value="1">12</Option>
      </Select> -->
      <!-- <Input class="search-input" v-model="form.keyword" size="large" search  enter-button @on-change="onChange" /> -->
    </div>
    <div class="map" id="map_container"></div>
  </div>
</template>

<script>
import { getDistrict, getLocationByIp, getLocationByGeocoder } from 'api/qqmap'
export default {
  props: {
    city: String,
    latitude: [Number, String],
    longitude: [Number, String]
  },
  data () {
    return {
      form: {
        keyword: ''
      },
      location: {},
      map: null,
      markerArr: [],
      searchList: {}
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initMap()
    })
  },
  methods: {
    async initMap() {
      await this.onChange()
      await this.getLocationByIp()
      let center = new TMap.LatLng(this.location.location.lat, this.location.location.lng);
        //定义map变量，调用 TMap.Map() 构造函数创建地图
        this.map = new TMap.Map(document.getElementById('map_container'), {
          center: center, //设置地图中心点坐标
          zoom: 17, //设置地图缩放级别
        });
        this.initMarkerEvent()
      
    },
    search ({lat, lng}) {
      this.map.setCenter(new TMap.LatLng(lat,lng))
      this.marker.remove(["1"])
        const latLng = {lat, lng}
        this.markerArr = [{
          id: '1',
          styleId: 'marker',
          position: latLng,
          properties: {
            title: '1'
          }
        }]
        this.marker.add(this.markerArr)
        getLocationByGeocoder(`${latLng.lat},${latLng.lng}`).then(res => {
          this.$emit('clickMap', {address_component: res.result.address_component,address: res.result.formatted_addresses.recommend, location: res.result.location})
        })
    },
    getLocationByIp () {
      if (this.location.location) {
        return
      }
      return getLocationByIp().then(res => {
        this.location = res.result
      })
    },
    onChange (e) {
      const keyword = this.city
      if (this.latitude && this.longitude) {
        return this.location = {
          location: {
            lat: this.latitude,
            lng: this.longitude
          }
        }
      }
      return getDistrict(keyword).then(res => {
        this.searchList = res.result[0]
        if (this.searchList) {
          this.location = {
            location: {
              lat: this.searchList[0].location.lat,
              lng: this.searchList[0].location.lng
            }
          }
        }
      })
      
    },
    initMarkerEvent () {
      this.marker = new TMap.MultiMarker({
            id: 'marker-layer',
            map: this.map,
            styles: {
                "marker": new TMap.MarkerStyle({
                    "width": 25,
                    "height": 35,
                    "anchor": { x: 16, y: 32 },
                    "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
                })
            },
            geometries: this.markerArr
        })
        this.marker.remove(["1"])
        let latlng = {
              lat: this.latitude,
              lng: this.longitude
            }
        this.markerArr = [{
          id: '1',
          styleId: 'marker',
          position: latlng,
          properties: {
            title: '1'
          }
        }]
        this.marker.add(this.markerArr)
        this.map.on('click', (evt) => {
          this.marker.remove(["1"])
          const latLng = evt.latLng
          this.markerArr = [{
            id: '1',
            styleId: 'marker',
            position: latLng,
            properties: {
              title: '1'
            }
          }]
          this.marker.add(this.markerArr)
          getLocationByGeocoder(`${latLng.lat},${latLng.lng}`).then(res => {
            this.$emit('clickMap', {address_component: res.result.address_component,address: res.result.formatted_addresses.recommend, location: res.result.location})
          })
          
        })
    }
  }
};
</script>

<style lang="less">
.qqmap {
  position: relative;
  width: 100%;
  height: 400px;
  background-color: #28272a;
  margin-top: 20px;
}
.map-tools {
  position: absolute;
  top: 20px;
  left: 20px;
}
.search-input {
  z-index: 10000;
  background: #fff;
  width: 300px;
  position: absolute;
  left: 110px;
  top: 0;
  .ivu-input {
    background-color: #fff;
    color: #515a6e;
    border: 1px solid #dcdee2;
    z-index: 10000;
  }
  
}
.map {
    position: relative;
    width: 100%;
  height: 400px;
  }
.map-select {
  display: inline-block;
  width: 100px;
  .ivu-select-selection {
    background-color: #fff;
    color: #515a6e;
    border: 1px solid #dcdee2;
    z-index: 10000;
  }
  .ivu-select-dropdown {
    background-color: #fff;
    z-index: 10000;
    
  }
  .ivu-select-item {
    color: #515a6e;
    z-index: 10000;
    background-color: #fff;
    &:hover {
      background-color: #fff;
    }
  }
}
</style>