vue加载高德地图，加标记点，点出文本框

1.配置 build---webpack.base.conf.js---module.exports-----

externals: {
  'AMap': 'AMap',
},
2.

<template>
  <div>
    <div id="container" style="width:2500px; height:900px"></div>
    <div style="width: 100%;height: 100px;position:absolute;top:50px;">
      <div align="center" style="font-size: 40px;color: black;width: 800px;height: 52px;position:absolute;cursor:pointer;left:27%">
        物联网监测
      </div>
    </div>
    <div style="width: 100%;height: 100px;position:absolute;top:100px;">
      <div align="center" style="font-size: 30px;color: black;width: 800px;height: 52px;position:absolute;cursor:pointer;left:-10%">
        监测数量
      </div>
    </div>
    <div style="width: 100%;height: 100px;position:absolute;top:150px;">
      <div align="center" style="font-size: 30px;color: black;width: 800px;height: 52px;position:absolute;cursor:pointer;left:-10%">
        数据转换时间
      </div>
    </div>
  </div>
</template>


<script>
  import AMap from 'AMap'
  var district, map
  export default {
    mounted: function() {
      this.init()
    },
    methods: {
      init: function() {
        map = new AMap.Map('container', {
          center: [126.5351300000, 45.8033600000],
          resizeEnable: true,
          zoom: 10
        })
        var lnglats = [
          [130.5423444, 45.77215307],
          [130.5798314, 45.75359363],
          [130.5318421, 45.78454601],
          [130.5329888, 45.78296477]
        ]
        var marker
        for (var i = 0; i < lnglats.length; i++) {
          marker = new AMap.Marker({
            position: lnglats[i],
            map: map
          })
          if (i === 0) {
            marker.on('click', function openInfo() {
              var infoWindow
              var info = []
              var position = new AMap.LngLat(130.5423444, 45.77215307)
              info.push('<div style="height: 800px ; width: 1200px"><div>勃利县土地确权地块1信息（10户）</div>')
              info.push('<a href="index2.html">地块详细信息</a>  ')
              info.push('</div>')
              infoWindow = new AMap.InfoWindow({
                content: info.join('<br/>')
              })
              infoWindow.open(map, position)
            })
          }
          if (i === 1) {
            marker.on('click', function openInfo() {
              var infoWindow
              var info = []
              var position = new AMap.LngLat(130.5798314, 45.75359363)
              info.push('<div id="atent"><div>勃利县土地确权地块1信息（10户）</div>')
              info.push('<a href="index2.html">地块详细信息</a>  ')
              info.push('</div>')
              infoWindow = new AMap.InfoWindow({
                content: info.join('<br/>')
              })
              infoWindow.open(map, position)
            })
          }
        }
        map.setFitView()
        addheilongjang()
        function addheilongjang() {
          AMap.service('AMap.DistrictSearch', function() {
            var opts = {
              subdistrict: 1,
              extensions: 'all',
              level: 'city'
            }
            district = new AMap.DistrictSearch(opts)
            district.setLevel('district')
            district.search('黑龙江', function(status, result) {
              var bounds = result.districtList[0].boundaries
              var polygons = []
              if (bounds) {
                for (var i = 0, l = bounds.length; i < l; i++) {
                  var polygon = new AMap.Polygon({
                    map: map,
                    strokeWeight: 1,
                    path: bounds[i],
                    fillOpacity: 0.7,
                    fillColor: '#CCF3FF',
                    strokeColor: '#CC66CC'
                  })
                  polygons.push(polygon)
                }
                map.setFitView()
              }
            })
          })
        }
      }
    }
  }
</script>
<style>

  html, body {
    margin: 0;
    height: 100%;
    width: 100%;
    position: absolute;
  }

  #container {
    position: absolute;
    top: 100%;
    left:-10%;
    right: 0%;
    bottom: 100%;
    width: 500%;
    height: 500%;
  }

  .button-group {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 12px;
    padding: 10px;
  }

  .button-group .button {
    height: 28px;
    line-height: 28px;
    background-color: #0D9BF2;
    color: #FFF;
    border: 0;
    outline: none;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 3px;
    margin-bottom: 4px;
    cursor: pointer;
  }
  .button-group .inputtext {
    height: 26px;
    line-height: 26px;
    border: 1px;
    outline: none;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 3px;
    margin-bottom: 4px;
    cursor: pointer;
  }
  /*
  .tip {
     position: absolute;
     bottom: 30px;
     right: 10px;
     
     text-align: center;
     border: 1px solid #ccc;
     line-height: 30px;
     border-radius: 3px;
     padding: 0 5px;
     font-size: 12px;
  }
  */
  #tip {
    background-color: #fff;
    padding-left: 10px;
    padding-right: 10px;
    position: absolute;
    font-size: 12px;
    right: 10px;
    top: 20px;
    border-radius: 3px;
    border: 1px solid #ccc;
    line-height: 30px;
  }

  /*
  #tip input[type='button'] {
      margin-top: 10px;
      margin-bottom: 10px;
      
      height: 30px;
      text-align: center;
      line-height: 30px;
      color: #fff;
      font-size: 12px;
      border-radius: 3px;
      outline: none;
      border: 0;
  }
  */
  .amap-info-content {
    font-size: 12px;
  }

  #myPageTop {
    position: absolute;
    top: 5px;
    right: 10px;
    background: #fff none repeat scroll 0 0;
    border: 1px solid #ccc;
    margin: 10px auto;
    padding:6px;
    font-family: "Microsoft Yahei", "微软雅黑", "Pinghei";
    font-size: 14px;
  }
  #myPageTop label {
    margin: 0 20px 0 0;
    color: #666666;
    font-weight: normal;
  }
  #myPageTop input {
    width: 170px;
  }
  #myPageTop .column2{
    padding-left: 25px;
  }
</style>