在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)
