VUE-Amap简单使用

1. 安装 :https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install

npm install vue-amap --save

main.js 文件修改

// 初始化vue-amap
VueAMap.initAMapApiLoader({
  key: "", // 这里写你申请的高德地图的key
  plugin: [
  'AMap.DistrictSearch',
  'AMap.Autocomplete', // 输入提示插件
  'AMap.PlaceSearch', // POI搜索插件
  'AMap.Scale', // 右下角缩略图插件 比例尺
  'AMap.OverView', // 地图鹰眼插件
  'AMap.ToolBar', // 地图工具条
  'AMap.MapType', // 类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
  'AMap.PolyEditor', // 编辑 折线多，边形
  'AMap.CircleEditor', // 圆形编辑器插件
  'AMap.Geolocation', // 定位控件，用来获取和展示用户主机所在的经纬度位置
  'AMap.Geocoder'
],
v: "1.4.15",
uiVersion: "1.1"
});

 

2. 实例：
图示：

 

 

template：

<div>
  <el-amap :vid="vid" class="amap-demo" :style="{'width': '100%','height':_height}">
  </el-amap>
</div>

script：

import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap';
const amapManager = new AMapManager();
import mapHouse from '@/assets/other_pics/mapHouse.png'
export default {
  props:['_height','vid','zoom'],
  data() {
    return {
      //地图列表
      mapList: [
        {lng:121.273701 ,lat:31.330416,colorStyle:'#145CD3',isExamine:false,isNew:true,},
        {lng:121.473701 ,lat:31.230416,colorStyle:'#145CD3',isExamine:true,isNew:false},
        {lng:121.381709 ,lat:31.112813,colorStyle:'#145CD3',isExamine:false,isNew:false},
      ],
      amapManager,
      map:'',
      mapHouse
    };
  },

  //必须写在mounted方法中
  mounted() {
    lazyAMapApiLoaderInstance.load().then(() => {
      this.map = new AMap.Map(this.vid, {
        center: [121.473701, 31.230416], //地图显示的中心位置
        zoom: this.zoom, //地图缩放比例
        mapStyle: 'amap://styles/whitesmoke', //自定义地图皮肤，用的规划夜皮肤
        animation: true,
      });
      //地图标记点方法
      this.markers();
    });
  },

  methods: {
    markers() {
      // 标记点未渲染完 login加载中
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });
      //地图列表 从后台获取
      let mapList = this.mapList;

      // 循环渲染标记点
      for (var i = 0; i < mapList.length; i++) {
        // 获取的经纬度126.53,45.8
        let position = mapList[i].lng + ',' + mapList[i].lat;
        //将字符串分割成数组形式 ["126.53", "45.8"]
        position = position.split(',');
        let str=`<div style="background: ${mapList[i].isNew?'#145CD3':'#fff'};">
          <span style="display: inline-block;width: 28px;height: 28px;text-align: center;border-radius: 4px 0 0 4px;background: #145CD3;"><img style="width: 12px;vertical-align: text-top;" src="${this.mapHouse}"/></span>
          <span style="color: ${mapList[i].isNew?'#FFFFFF':'#172B37'} ;letter-spacing: 0;">上海态格汽车服务有限公司</span>
          <span style="display: ${mapList[i].isNew?'none':'initial'};">
            <span style="display: inline-block;width: 1px;height: 12px;background: #E4E5E6;margin:0 8px;"></span>
            <span style="color: #86909C;">距离：900米</span>
            <span style="display: inline-block;width: 1px;height: 12px;background: #E4E5E6;margin:0 8px;"></span>
            <span style="display: inline-block;width: 10px;height: 10px;border-radius: 50%;background: ${mapList[i].isExamine?'#145CD3':'#76DA56'};border: 2px solid #C8D9FF"></span>
            <span style="color: ${mapList[i].isExamine?'#145CD3':'#76DA56'};margin-right: 12px;}">${mapList[i].isExamine?'未审核':'已审核'}</span>
          </span>
        </div>`

        var text = new AMap.Text({
          text: '.',
          anchor: 'center', // 设置文本标记锚点
          draggable: false,
          cursor: 'pointer',
          angle: 0,
          style: {
            width: '10px',
            height: '10px',
            'border-radius': '50%', //设置为圆形
            'background-color': mapList[i].colorStyle, //标记点颜色
            'border-color': mapList[i].colorStyle, //标记点边框颜色
            color: mapList[i].colorStyle, //文字颜色
            opacity: '1', //透明度
            border: '2px solid #FFFFFF',
            'box-shadow': '0 2px 4px 0 rgba(20,92,211,0.16)'
          },
          position: position, //圆点位置 经纬度
          //鼠标放到圆点上显示的信息
          label: {content:str,offset: [100,100]},
        });
        text.setMap(this.map);

　　　　　　 // 鼠标移入

       　　 text.on('mouseover', this.clickMapHandler)

        　　// 鼠标移出

        　　text.on('mouseout',this.clickMapHandler)

        //关闭加载框
        setTimeout(() => {
          loading.close();
        }, 500);
      }
    },

  },
};

style:

  .amap-demo{
    .amap-marker-label{
      min-width: 192px;
      height: 28px;
      line-height: 28px;
      padding: 0;
      background: #FFFFFF;
      border: none;
      border-radius: 4px;
      left: -28px;
      top: -35px;
    }
  }