vue 高德地图

在public里的index.html里引入

 
       
       
    

引入前把vue.config.js文件添加
// vue.config.js
module.exports = {
  configureWebpack: {
    externals: {
      'AMap': 'AMap'
    }
  }
}
在什么什么.vue里应用
 

        

引入 import AMap from 'AMap' data里面添加 //地图 lnglats: [], list: [], map: null, infoWindow: '', logMapinfo:'', zoom:'', marker: '', visible: false, //watch 监控鼠标缩放 watch:{ zoom(e){ if(e<11){ this.visibleShows = false }else{ this.visibleShows = true } } }, //methods里的函数 //没数据的时候初始定位 getCurrentPos() { AMap.plugin('AMap.Geolocation', () => { var geolocation = new AMap.Geolocation({ enableHighAccuracy: true, // 是否使用高精度定位，默认:true timeout: 10000, // 超过10秒后停止定位，默认：5s // buttonPosition: 'RB', // 定位按钮的停靠位置 // buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默 认：Pixel(10, 20) zoomToAccuracy: true, // 定位成功后是否自动调整地图视野到定位点 }) this.map.addControl(geolocation) geolocation.getCurrentPosition((status, result) => { if (status === 'complete') { this.pcd.province = result.addressComponent.province this.pcd.city = result.addressComponent.city this.companyXingzheng() } }) }) }, //这个接口是获取经纬度的 可以换成你们的 请求参数不一样我们可能 companyXingzheng() { let province = this.pcd.province let city = this.pcd.city let looper = { province: province != "省" ? province : '', // 省 city: city != "市" ? city : '' // 市 } this.$api.companyXingzheng(looper) .then((res) => { this.lnglats = [] if (res.code == 1) { if (JSON.stringify(res.data) !== "{}") { res.data.map((item) => { this.lnglats.push([item.location.lng, item.location.lat]) }) this.list = res.data this.Maplable() } else { this.$message.error('该区域暂无数据'); this.visibleShows = false } } }) }, //初始渲染图像 Maplable() { // 初始化地图对象，加载地图 this.map = new AMap.Map('container', { zoom: 18, }) var marker='' this.logMapinfo = function (){ this.zoom = this.map.getZoom(); //获取当前地图级别 }; this.logMapinfo(); this.zoomOn() this.map.on('click', function(e) { console.log(e) }); // 给按钮绑定事件 // 初始化信息窗口 // this.infoWindow = new AMap.InfoWindow({ // offset: new AMap.Pixel(0, -30) // }) // 循环遍历 for (var i = 0; i < this.lnglats.length; i++) { this.marker = new AMap.Marker({ position: this.lnglats[i], content: `

${this.list[i].title} 约 ${this.list[i].num.toLocaleString()}条

`, icon:null, zoom: 8, map: this.map, }) // this.marker = new AMap.Marker({ // position: this.lnglats[i], // content: ``, // icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // map: this.map // }) this.marker.on('click', this.markerClick) this.marker.emit('click', { target: this.marker }) // 点击事件 this.map.setFitView() } }, markerClick() { this.visibleShows = false setTimeout(() => { this.visibleShows = true }, 100) }, mapZoomstart(){ // '缩放开始'; }, mapZoom(){ this.logMapinfo(); // '正在缩放'; }, mapZoomend(){ // '缩放结束'; }, // 事件绑定 zoomOn(){ this.map.on('zoomstart', this.mapZoomstart); this.map.on('zoomchange', this.mapZoom); this.map.on('zoomend', this.mapZoomend); },

地图缩放相关事件-地图事件-示例中心-JS API 2.0 示例 | 高德地图API (amap.com)