记录一次成功的vue调用高德地图

无需安装任何东西，无需调用任何模块，只需联网

<template>

  <div class="bbox">

    <div id='container'></div>

    <div class='info'>操作说明：圆和矩形通过拖拽来绘制，其他覆盖物通过点击来绘制</div>

    <div class="input-card" style='width: 24rem;'>

        <div class="input-item">

          <input type="radio" name='func' checked="" value='marker'><span class="input-text">画点</span>

          <input type="radio" name='func' value='polyline'><span class="input-text">画折线</span>

          <input type="radio" name='func' value='polygon'><span class="input-text" style='width:5rem;'>画多边形</span>

        </div>

        <div class="input-item">

          <input type="radio" name='func' value='rectangle'><span class="input-text">画矩形</span>

          <input type="radio" name='func' value='circle'><span class="input-text">画圆</span>

        </div>

        <div class="input-item">

            <input id="clear" type="button" class="btn" value="清除" />

          <input id="close" type="button" class="btn" value="关闭绘图" />

        </div>

    </div>

  </div>

</template>

<script>

export default {

  data() {

    return {

      map: null,

      mouseTool: null,

      overlays: []

    }

  },

  mounted() {

    const script = document.createElement('script')

    script.src = `https://webapi.amap.com/maps?v=2.0&key=放置你的key&plugin=AMap.MouseTool`

    document.body.appendChild(script)

    script.onload = () =>{

      console.log('第一个 JavaScript 文件加载成功');

      this.map = new window.AMap.Map('container', {

        zoom: 14

      });

      this.mouseTool = new window.AMap.MouseTool(this.map);

      this.mouseTool.on('draw', (e) => {

        this.overlays.push(e.obj);

      })

      var radios = document.getElementsByName('func');

      for (var i = 0; i < radios.length; i += 1) {

        radios[i].onchange = (e) => {

          this.draw(e.target.value)

        }

      }

      this.draw('marker')

      document.getElementById('clear').onclick = () => {

        this.map.remove(this.overlays)

        this.overlays = [];

      }

      document.getElementById('close').onclick = () => {

        this.mouseTool.close(true)//关闭，并清除覆盖物

        for (var i = 0; i < radios.length; i += 1) {

          radios[i].checked = false;

        }

      }

    }

  },

  methods: {

    draw(type) {

        switch (type) {

          case 'marker': {

            this.mouseTool.marker({

              //同Marker的Option设置

            });

            break;

          }

          case 'polyline': {

            this.mouseTool.polyline({

              strokeColor: '#80d8ff'

              //同Polyline的Option设置

            });

            break;

          }

          case 'polygon': {

            this.mouseTool.polygon({

              fillColor: '#00b0ff',

              strokeColor: '#80d8ff'

              //同Polygon的Option设置

            });

            break;

          }

          case 'rectangle': {

            this.mouseTool.rectangle({

              fillColor: '#00b0ff',

              strokeColor: '#80d8ff'

              //同Polygon的Option设置

            });

            break;

          }

          case 'circle': {

            this.mouseTool.circle({

              fillColor: '#00b0ff',

              strokeColor: '#80d8ff'

              //同Circle的Option设置

            });

            break;

          }

        }

      }

  }

}

</script>

<style>

@import url(@/utils/demo-center.css);

.bbox{

  width: 100%;

  height: 100%;

}

html,body,#container{

  height: 100%

}

.input-item{

  height: 2.2rem;

}

.btn{

  width: 6rem;

  margin: 0 1rem 0 2rem;

}

.input-text{

  width: 4rem;

  margin-right:1rem;

}

</style>