在vue项目中使用高德地图_vue 高德地图

1.安装高德地图插件

npm install vue-amap --save

2.申请高德地图账号和key

官网地址：高德开放平台 | 高德地图API

3.在main.js中引入

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

4.创建存放地图的容器

    <div class="box">
      <div class="mapBox" id="myMap"></div>
      <div class="btn" @click="screenFull">放大</div>
    </div>

5.初始化地图

    //初始化地图容器
      initMap(){
        // console.log("初始化地图容器")
        this.myMap = new AMap.Map('myMap',{
          zoom: 10,  //设置地图显示的缩放级别
          // center: [116.397428, 39.90923],//设置地图中心点坐标
          layers: [new AMap.TileLayer()],  //设置图层,可设置成包含一个或多个图层的数组
          // mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
          viewMode: '3D',  //设置地图模式
 
        });
        // console.log("创建地图容器end.....")
      },

6.渲染数据，标记坐标点

    //获取位置信息
      point() {
        //接口请求数据
        this.$api.amap.getLocation().then((res) => {
          if(res.data.status == 200) {
        this.pointMarker = res.data.data.list;
        console.log(this.pointMarker)
        // console.log("开始创建点了")
        //     根据状态在地图上标记点
        this.pointMarker.forEach((item) => {
          if(item.status===1){
            item.status="在线"
            this.icons=require('../../../assets/icons/3.png')//自定义图标
          }else if(item.status===0){
            item.status="离线"
            this.icons=require('../../../assets/icons/2.png')
          }
          if (item.longitude != null && item.latitude != null) {
            var myMarker = new AMap.Marker({
              position: [Number(item.longitude), Number(item.latitude)],
              icon: new AMap.Icon({
                image: this.icons,
                size: new AMap.Size(52, 52,),  //图标大小
                imageSize: new AMap.Size(26,38)
              })
            });
            myMarker.data = item;
            myMarker.on("click", this.markerClick);
            this.myMap.add(myMarker);
          }
        });
        // console.log("创建点完成了。。。。")
          }else{
            this.$message(res.data.message);
          }
        });
      },

7.坐标点击显示位置信息

  //位置信息 点击事件
      markerClick(e){
        var a = e.target.data;
        console.log(e);
        var infoWindow = new AMap.InfoWindow({
          anchor: 'top-center',
          // isCustom:true,
          // content: "这是信息窗体！获取到数据吧"+a.longitude+a.deviceName+a.status
          content: `
        <div class="locations">
        城市名称:${a.deviceName}<br/>
        详细地址:${a.tenantName}
        </div>`,
          closeWhenClickMap: true,
          offset: new AMap.Pixel(3, 5)
        });
        infoWindow.open(this.myMap,[Number(a.longitude),Number(a.latitude)]);
      },

8.全屏显示地图

   screenFull(){
        let element = document.getElementById('myMap');//设置后就是   让id==box的容器全屏
        if (this.changeScreen) {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
        } else {
          if (element.requestFullscreen) {
            element.requestFullscreen();
          } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
          } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
          } else if (element.msRequestFullscreen) {
            // IE11
            element.msRequestFullscreen();
          }
        }
        this.changeScreen = this.changeScreen;
      },