基于若依前后端分离的地图选点
基于若依前后端分离的地图选点
·
- 拉依赖
npm install vue-amap --save
-
写配置
文件: vue.config.js
// 找到这个代码
configureWebpack: {
name: name,
resolve: {
alias: {
'@': resolve('src')
}
},
//这个是添加的,其他的是自带的
externals: {
'AMap': 'AMap',
'AMapUI': 'AMapUI'
},
// 添加的到这结束
plugins: [
// http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
new CompressionPlugin({
cache: false, // 不启用文件缓存
test: /\.(js|css|html)?$/i, // 压缩文件格式
filename: '[path].gz[query]', // 压缩后的文件名
algorithm: 'gzip', // 使用gzip压缩
minRatio: 0.8 // 压缩率小于1才会压缩
})
],
},
在public的 index.html页面。
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key(在高德上申请)"></script>
- 页面引用
import AMap from 'AMap'
//页面上的:
<div id="mapContainer">
加载地图中···
</div>
//data中的:
mapCenter: [108.974943,34.153137],
map: null
// 样式
#mapContainer{
width: 100%;
height: 300px;
text-align: center;
line-height: 300px;
font-size: 20px;
font-weight: bold;
}
//init的方法:
// 创建地图实例
let that = this;
this.map = new AMap.Map('mapContainer', {
center: that.mapCenter,
zoom: 13
})
// 监听地图点击事件
this.map.on('click', (event) => {
console.log(event.lnglat) // 获取经纬度信息
that.form.addressLat = `${event.lnglat.lng},${event.lnglat.lat}`
// that.form.longitudeNum = event.lnglat.lng;
// that.form.latitudeNum = event.lnglat.lat;
})
更多推荐
已为社区贡献4条内容
所有评论(0)