京广线地图：【高德地图api+Vue】点击地图标记点，并获取经纬度

npm i @amap/amap-jsapi-loader --save <template> <div id="container"></div></template><script>import AMapLoader from '@amap/amap-jsapi-loader';export default { name: 'mapContainer', data() { return { map: null, lnglat: [116.397428, 39.90923] }; }, mounted() { // DOM初始化完成进行地图初始化 this.initMap(); }, methods:{ initMap() { AMapLoader.load({ // 申请好的Web端开发者Key，首次调用 load 时必填 key:'', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 version:'2.0', // 需要使用的的插件列表，如比例尺'AMap.Scale'等 plugins:[''] }).then((AMap) => { // 设置地图容器id this.map = new AMap.Map('container', { // 是否为3D地图模式 // viewMode:'3D', // 初始化地图级别 zoom: 13, center: this.lnglat, // layers: [ // // 卫星 // // new AMap.TileLayer.Satellite(), // // 路网 // new AMap.TileLayer.RoadNet() // ], }); // this.handleAddMarker(); this.map.on('click', (ev) => { let lnglat = ev.lnglat; // this.lnglat = [lnglat.lng, lnglat.lat]; this.map.clearMap(); this.handleAddMarker(lnglat); // this.map.setCenter(this.lnglat); }) }) .catch(e => { console.log(e); }); }, handleAddMarker(lnglat) { const marker = new AMap.Marker({ icon: "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", position: lnglat, offset: new AMap.Pixel(-13, -30) }); marker.setMap(this.map); } }};</script><style scoped>#container { padding: 0; margin: 0; width: 100%; height: 800px;}</style>