基本使用方法:
先把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>
Logo

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐