vue-amap使用

引入vue-amap

安装

npm install vue-amap --save

引入

import VueAMap from 'vue-amap';

配置key和插件

VueAMap.initAMapApiLoader({
  key: '高德地图key',
  //插件
  plugin: [
    'AMap.Autocomplete', 
    'AMap.PlaceSearch', 
    'AMap.Scale', 
    'AMap.OverView', 
    'AMap.MapType', 
    'AMap.PolyEditor', 
    'AMap.CircleEditor',
    "AMap.ToolBar",
    "AMap.Geolocation",
  ],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4',
  uiVersion: '1.0'

});

全局注册

Vue.use(VueAMap);

使用

map.vue

• template

<!-- 渲染地图标签 -->
   <div class="map_container" style="width:100%;height:70vh;">
     <el-amap 
        ref="map" 
        vid="amap" 
        :amap-manager="amapManager" 
        :center="center" 
        :zoom="zoom" 
        :plugin="plugin" 
        class="amap-demo">
        <!-- 地图绘线 -->
          <el-amap-polygon
              v-for="(polygon, index) in polygons"
              :key="index"
              :vid="index"
              :ref="`polygon_${index}`"
              :path="polygon.path"
              editable="true"
              strokeColor="#FF0000"
              strokeWeight="2"
              strokeOpacity="0.8"
              fillOpacity="0.3"
              fillColor="#00000000"
              :events="polygon.events"
          ></el-amap-polygon>
          <!-- 地图标点 -->
        <el-amap-marker 
          v-for="(marker, index) in markers" 
          :position="marker.position" 
          :events="marker.events" 
          :visible="marker.visible" 
          :draggable="marker.draggable" 
          :vid="index"
        >
        </el-amap-marker >
        <!-- 点对应提示信息 -->
        <el-amap-info-window
        v-if="window"
        :position="window.position"
        :visible="window.visible"
        :content="window.content"
        :offset="window.offset"
        :close-when-click-map="true"
        :is-custom="true"
      >
        <div id="info-window">
          <p>用户名：{{ window.address }}</p>
          <p>经度：{{ window.position[0] }}</p>
          <p>纬度：{{ window.position[1] }}</p>
        </div>
      </el-amap-info-window>
      <!-- 自定义图例 -->
        <div class="legend">
          <div>
            <img src="../../assets/marker.png" />
            <div>
              人类活动标点
            </div>
          </div>
          <div>
            <div class="red_line"></div>
            <div>红线边界</div>
          </div>
        </div>
      </el-amap>
  </div>

• script

import { AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";
let amapManager = new AMapManager();


export default {
	data(){
		return {
			  amapManager,
		      zoom: 5,
		      // 默认中心度
		      center: [108.02032, 35.81911],
		      // 插件
		      plugin: [
		        {
		          pName: "MapType",
		          defaultType: 1,
		        },
		        {
		          pName: "ToolBar",
		        },
		        {
		          pName: "Scale",
		        },
		      ],
		      // 点坐标
		      markers: [],
		      // 线坐标
		      polygons: [],
		      options: [],
		      loading: false,
		      // 提示信息数组
		      windows: [],
		      // 当前获取的提示信息
		      window: "",
		}
	},
	methods:{
		    getLocation(params) {
      getLocation(params)
        .then((res) => {
          const windows = [];
          const that = this;
          const markers = [];
          let data = res.data.data;
          // console.log(data)
          data.forEach((ele, index) => {
            if (ele.redLineData) {
              this.polygons.push({
                path: JSON.parse(ele.redLineData.jsonData).features[0].geometry
                  .rings[0],
              });
            }
            let tempMark = [];
            tempMark[0] = ele.locationLon;
            tempMark[1] = ele.locationLat;
            markers.push({
              position: tempMark,
              visible: true,
              address: ele.userName,
              locationTime: ele.locationTime,
              events: {
                click() {
                  console.log(that.windows);
                  // 方法：鼠标移动到点标记上，显示相应窗体
                  that.windows.forEach((window, index) => {
                    window.visible = false; // 关闭窗体
                  });
                  that.window = that.windows[index];
                  that.$nextTick(() => {
                    that.window.visible = true;
                  });
                },
              },
            });
            let lon = Number(ele.locationLon).toFixed(6);
            let lat = Number(ele.locationLat).toFixed(6);
            windows.push({
              position: [lon, lat],
              isCustom: true,
              offset: [150, 50], // 窗体偏移
              showShadow: false,
              visible: false, // 初始是否显示
              address: ele.userName,
              locationTime: ele.locationTime,
            });
          });
          this.windows = windows;
          if (markers.length !== 0) {
            this.markers = markers;
          } else {
            this.$message({
              duration: 1500,
              type: "error",
              message: "没有要搜索的点!",
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
	}
}

• style

<style lang="scss" scoped>
#info-window {
  padding: 0 10px;
  margin-left: 30px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  p {
    height: 30px;
    display: flex;
    align-items: center;
  }
  .detail {
    width: 100%;
    height: 24px;
    color: #fff;
    background-color: #1a73e8;
    position: absolute;
    bottom: 0;
    font-size: 12px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
  }
}

.legend {
  width: 110px;
  height: 70px;
  padding: 5px;
  background: rgb(243, 240, 240);
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  div {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 12px;

    img {
      width: 20px;
      margin-right: 10px;
    }

    .red_line {
      width: 22px;
      height: 2px;
      background: red;
      margin-right: 10px;
    }
  }
}

.el-amap {
  width: 100%;
  height: 100%;
}
.map_container {
  position: relative;
}
.map_tabel_container {
  position: relative;
}
</style>