标签：map vue 控件 地图 AMap marker new infoWindow 高德

1. npm install amap --save

2. 在index.html中写入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.4&key=f447aabbe4424273395c076040a34b9e&plugin=AMap.Geocoder&plugin=AMap.Autocomplete&plugin=AMap.PolyEditor"></script>

3. vue.config.js中写入

configureWebpack: {
  externals: {
    "AMap": "AMap"
  }
}
解决AMap报错：AMap undefined报错

4. 新建myMap.vue

<template>
  <div>
    <div id="mapContainer"></div>
  </div>
</template>

<style>
#mapContainer {
  width: 500px;
  height: 500px;
  background-color: #ffffff;
  margin: 50px;
}
</style>
<script>
import AMap from "AMap";

export default {
  data() {
    return {
      infoWindow: ""
    };
  },
  mounted() {
    this.showMap();
  },
  methods: {
    showMap() {
      let map = new AMap.Map("mapContainer", {
        resizeEnable: true,
        center: [104.037969, 30.521942],
        zoom: 13
      });

      // 坐标点
      let marker = new AMap.Marker({
        position: new AMap.LngLat(104.037969, 30.521942), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "北京"
      });

      // 将创建的点标记添加到已有的地图实例：
      map.add(marker);
      // 同时引入工具条插件，比例尺插件和鹰眼插件
      AMap.plugin(
        [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.OverView",
          "AMap.MapType",
          "AMap.Geolocation"
        ],
        function() {
          // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
          map.addControl(new AMap.ToolBar());

          // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
          map.addControl(new AMap.Scale());

          // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
          map.addControl(new AMap.OverView({ isOpen: true }));

          // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
          map.addControl(new AMap.MapType());

          // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
          map.addControl(new AMap.Geolocation());
        }
      );
　　　　// 这里是信息窗体，不需要可以删除
      this.infoWindow = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        content: this.createInfoWindow("服务区", ""),
        offset: new AMap.Pixel(16, -25)
      });
      marker.on("mouseover", e => {
        this.infoWindow.setContent(
          this.createInfoWindow(e.target.name,)
        );
        // console.log('markerMouseOver',e)
        this.infoWindow.open(map, e.target.getPosition());
      });
      // marker.on("mouseout", e => {
      //   map.clearInfoWindow();
      // });
      marker.on("click", e => {
        console.log(111, e);
        this.infoWindow.setContent(
          this.createInfoWindow(e.target.name,)
        );
      });
      marker.emit("click", { target: marker });
    },

    // 自定义信息窗体
    createInfoWindow() {
      let info ='<div>\n' +
        '    <el-card class="box-card" style="padding: 0 80 30 80;width: 400px;border-radius: 10px;">\n' +
        '      <div id="del-div">\n' +
        '        <el-link type="primary" icon="el-icon-close" @click="close()"></el-link>\n' +
        '      </div>\n' +
        '      <div style="text-align: center;">\n' +
        '        <h4>详 情</h4>\n' +
        '      </div>\n' +
        '      <p v-if="isInfo">部署 : 测试一下</p>\n' +
        '      <p v-if="isInfo">地点 : 测试一下2222</p>\n' +
        '      <p v-if="isInfo">说明 : 测试一下111111</p>\n' +
        '      <p v-if="!isInfo" style="text-align: center;color: #b3b3b3;">暂无信息</p>\n' +
        '      <div id="infoWindowTool">\n' +
        '        <el-link type="primary" @click="edit()">编辑</el-link>\n' +
        '        <el-link type="primary" @click="del()">删除</el-link>\n' +
        '      </div>\n' +
        '    </el-card>\n' +
        '    <div class="amap-info-sharp">\n' +
        '      <i class="el-icon-caret-bottom"></i>\n' +
        '    </div>\n' +
        '  </div>'
      return info;
    },
    initialize(e) {
      this.overlay = e.overlay;
      this.infoWindow = e.infoWindow;
    },
    //关闭
    close() {
      this.infoWindow.close();
    },
    edit() {
      console.log("编辑按钮测试");
    },
    del() {
      console.log("删除按钮测试");
    }
  }
};
</script>
<style>
.position_amap .amap-simple-marker-def-style .amap-simple-marker-label {
  line-height: 120px;
  width: 400px;
  height: 60px;
  text-align: left;
}
.amap-info-sharp {
  bottom: -1px;
  left: 48.5%;
  position: absolute;
  color: #fff;
  z-index: -1;
}
#del-div {
  position: absolute;
  right: 20px;
  top: 20px;
  transform: scale(1.2);
}
</style>

标签：map,vue,控件,地图,AMap,marker,new,infoWindow,高德
来源： https://www.cnblogs.com/shine-lovely/p/13973523.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。