<template>
  <div class="map-container">
    <div ref="mapContainer" class="map" :style="{ height: mapHeight }"></div>
    <div class="map-controls">
      <div class="control-item">
        <label>经度:</label>
        <input v-model="longitude" type="text" placeholder="请输入经度" />
      </div>
      <div class="control-item">
        <label>纬度:</label>
        <input v-model="latitude" type="text" placeholder="请输入纬度" />
      </div>
      <button @click="updateMap">更新位置</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MapComponent',
  data() {
    return {
      map: null,
      marker: null,
      longitude: '116.397428', // 默认经度（北京）
      latitude: '39.90923',    // 默认纬度（北京）
      mapHeight: '400px',
      amapKey: '你的高德地图API Key' // 替换为你的API Key
    };
  },
  mounted() {
    this.loadMapScript();
  },
  methods: {
    // 加载高德地图脚本
    loadMapScript() {
      if (window.AMap) {
        this.initMap();
        return;
      }
      
      const script = document.createElement('script');
      script.src = `https://webapi.amap.com/maps?v=2.0&key=${this.amapKey}&callback=onAMapLoaded`;
      script.async = true;
      document.body.appendChild(script);
      
      // 定义地图加载完成后的回调
      window.onAMapLoaded = () => {
        this.initMap();
      };
    },
    
    // 初始化地图
    initMap() {
      this.map = new window.AMap.Map(this.$refs.mapContainer, {
        zoom: 13, // 初始缩放级别
        center: [this.longitude, this.latitude], // 初始中心点
        resizeEnable: true
      });
      
      // 添加默认标记
      this.addMarker();
      
      // 添加地图控件
      this.map.addControl(new window.AMap.ToolBar());
      this.map.addControl(new window.AMap.Zoom());
    },
    
    // 添加标记点
    addMarker() {
      // 如果已有标记，则移除
      if (this.marker) {
        this.marker.setMap(null);
      }
      
      // 创建新标记
      this.marker = new window.AMap.Marker({
        position: [this.longitude, this.latitude],
        map: this.map,
        title: '当前位置',
        draggable: true, // 允许拖动
        animation: 'AMAP_ANIMATION_DROP' // 标记动画
      });
      
      // 添加信息窗口
      const infoWindow = new window.AMap.InfoWindow({
        content: `<p>坐标: ${this.latitude}, ${this.longitude}</p>`,
        offset: new window.AMap.Pixel(0, -30)
      });
      
      // 点击标记显示信息窗口
      this.marker.on('click', () => {
        infoWindow.open(this.map, this.marker.getPosition());
      });
      
      // 拖动结束更新坐标
      this.marker.on('dragend', (e) => {
        const position = e.lnglat;
        this.longitude = position.lng;
        this.latitude = position.lat;
      });
      
      // 地图居中到标记位置
      this.map.setCenter([this.longitude, this.latitude]);
    },
    
    // 更新地图位置
    updateMap() {
      if (!this.map) return;
      
      // 验证经纬度
      const lng = parseFloat(this.longitude);
      const lat = parseFloat(this.latitude);
      
      if (isNaN(lng) || isNaN(lat)) {
        alert('请输入有效的经纬度数值');
        return;
      }
      
      this.addMarker();
    }
  },
  beforeDestroy() {
    // 销毁地图实例
    if (this.map) {
      this.map.destroy();
    }
  }
};
</script>

<style scoped>
.map-container {
  margin: 20px;
}

.map {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 10px;
}

.map-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.control-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

label {
  font-weight: bold;
}

input {
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 120px;
}

button {
  padding: 6px 12px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #3a8ee6;
}
</style>
