<template> <div style="width:100%; height:100%; background-color:gray; display:flex; justify-content:center; align-items:center"> <!-- loding-icon --> <div v-if="false" ><i class="el-icon-loading"></i></div> <!-- map --> <div v-if="true" id="container" style="width:99.4%; height:99%;"></div> </div> </template> <script> //点击提示的窗口 var content = [ "<div>北京天安门广场</div>" ]; export default { name: 'Map', data() { return { flag: false, flagicon: true } }, //页面加载完以后渲染 mounted() { this.flag = true; // alert(this.flag) this.flagicon = false; // 创建地图实例 (必须) var map = new AMap.Map("container", { zoom: 13, //缩放级别 center: [116.473195, 39.973253], //经度纬度 resizeEnable: true }) //创建marke实例 (标记功能) var marker = new AMap.Marker({ position: new AMap.LngLat(116.39, 39.9), // 经纬度对象 title: '北京' }) //信息窗口 (信息窗口功能) var infoWindow = new AMap.InfoWindow({ content: content.join("<br>") }) //点击事件 var clickHandler = function (e) { console.log('您在[' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ']的位置点击了地图!') infoWindow.open(map,[116.39, 39.9]) } // 浏览器定位 map.on('click', clickHandler) map.add(marker) }, //页面创建时渲染 created() { }, //方法调用 methods: { } } </script> <style> </style>