高德地图添加点击事件实例（vue）

基本使用方法：
先把map对象new出来，传入参数为html里的div id

var map=new AMap.Map('container');

然后就可以使用map对象了。map，覆盖物等常用的类，官方推荐用on方法绑定，如下代码绑定了一个mouseover事件，鼠标进入时会弹出alert：

        map.on('mouseover',function () {
          alert('over')
        })

也可以用AMap.event绑定。如下：

        AMap.event.addListener(map,'click',function () { //添加点击事件,传入对象名，事件名，回调函数
          alert('click')
        })

注意在不同的方法里绑定事件前，都要重新new一个对象，再使用。否则会报错。完整实例代码如下：

<template>
  <div id="container" class="mymap">

  </div>
</template>

<style>
  #container {width:300px; height: 180px; }
</style>

<script>
  import AMap from 'AMap';   //在页面中引入高德地图

  export default {
    mounted(){
      this.loadmap();     //加载地图和相关组件
    },
    methods: {
      loadmap(){
        var map = new AMap.Map('container', { //new一个对象，传入初始化设置
          zoom: 10,
        });
        this.testevent();
        this.test2();
      },
      testevent(){
        var map=new AMap.Map('container');//重新new出一个对象，传入参数是div的id
        AMap.event.addListener(map,'click',function () { //添加点击事件,传入对象名，事件名，回调函数
          alert('click')
        })
      },
      test2(){
        var map=new AMap.Map('container'); //注意，在不同的方法里，对象需要重新new出来，否则报错
        map.on('mouseover',function () {
          alert('over')
        })
      }
    }
  }
</script>