高德地图添加点击事件实例（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>

热门工具换一换