vue中使用高德地图

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>

vue中使用高德地图

3. vue.config.js中写入

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

4. 新建myMap.vue

<template>
  <div>
    <div , { target: marker });
    },

    // 自定义信息窗体
    createInfoWindow() {
      let info ='<div>
' +
        '    <el-card class="box-card" style="padding: 0 80 30 80; 400px;border-radius: 10px;">
' +
        '      <div >
' +
        '        <el-link type="primary" icon="el-icon-close" @click="close()"></el-link>
' +
        '      </div>
' +
        '      <div style="text-align: center;">
' +
        '        <h4>详 情</h4>
' +
        '      </div>
' +
        '      <p v-if="isInfo">部署 : 测试一下</p>
' +
        '      <p v-if="isInfo">地点 : 测试一下2222</p>
' +
        '      <p v-if="isInfo">说明 : 测试一下111111</p>
' +
        '      <p v-if="!isInfo" style="text-align: center;color: #b3b3b3;">暂无信息</p>
' +
        '      <div >
' +
        '        <el-link type="primary" @click="edit()">编辑</el-link>
' +
        '        <el-link type="primary" @click="del()">删除</el-link>
' +
        '      </div>
' +
        '    </el-card>
' +
        '    <div class="amap-info-sharp">
' +
        '      <i class="el-icon-caret-bottom"></i>
' +
        '    </div>
' +
        '  </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;
   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>

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

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

export default {
  props: {
    mapInfo: {
      type: Object,
      default: () => {
        return {
          remark: "靖江******公司",
          contactMobile: "0512-888888",
          contactAddress: "江苏省*******"
        };
      }
    },
    center: {
      type: Array,
      default: () => [120.437223, 32.088997]
    }
  },
  data() {
    return {
      infoWindow: ""
    };
  },
  mounted() {
    this.showMap();
  },
  methods: {
    showMap() {
      let map = new AMap.Map("mapContainer", {
        resizeEnable: true,
        center: this.center,
        zoom: 13
      });

      // 坐标点
      let marker = new AMap.Marker({
        // position: new AMap.LngLat(this.center[0], this.center[1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        position: this.center,
        title: this.mapInfo.remark,
        iconStyle: "red"
      });

      // 将创建的点标记添加到已有的地图实例：
      map.add(marker);
      // 同时引入工具条插件，比例尺插件和鹰眼插件
      AMap.plugin(
        [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.OverView",
          "AMap.MapType",
          "AMap.Geolocation"
        ],
        function() {}
      );

      this.infoWindow = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        content: this.createInfoWindow(),
        offset: new AMap.Pixel(16, -25)
      });
      this.infoWindow.setContent(this.createInfoWindow());
      this.infoWindow.open(map, marker.getPosition());
    },

    // 自定义信息窗体
    createInfoWindow() {
      let info =
        "<div class='info'>" +
        '    <el-card class="box-card" style="padding: 0 80 30 80; 400px;border-radius: 10px;">' +
        '      <h4>'+this.mapInfo.remark+'</h4>' +
        '      <p><i class="el-icon-map-location"></i>位置：<span class="position">'+this.mapInfo.contactAddress+'</span></p>' +
        '      <p><i class="el-icon-phone-outline"></i>电话：<span class="tel">'+this.mapInfo.contactMobile+'</span></p>' +
        "    </el-card>" +
        "  </div>";
      return info;
    }
  }
};
</script>
<style lang="scss">
.position_amap .amap-simple-marker-def-style .amap-simple-marker-label {
  line-height: 120px;
  width: 670px;
  height: 60px;
  text-align: left;
}
#mapContainer {
  .amap-logo,.amap-copyright{
    display: none!important;
  }
  .info {
    background: #fff;
    width: 340px;
    height: 110px;
    padding: 16px;
    h4 {
      font-size: 18px;
      font-weight: 700;
      text-align: center;
    }
    p {
      font-size: 16px;
      text-align: left;
      text-indent: 0;
      line-height: 20px;
      margin-top: 10px;
    }
  }
}
</style>

vue中使用高德地图

相关推荐