先上效果图：
后台那边会给我返回需要展示的地点的信息，包括地名和经纬度。我的任务就是需要把这些地点都显示到地图上，然后点击表格里的地名，地图会相对应放大定位到该地点为中心的位置。然后地图是可以通过滚轮放大缩小滴。废话不多说，来看看要怎么整。
1.引入高德cdn。
我是通过异步加载js的方式去引入的，没有使用依赖包。在你自己的工具类目录下，创建js异步加载文件。 我放在了assets目录下。
/* AMap.js
* 异步加载的高德地图插件
*/
export default function MapLoader() {
if (window.AMap) { // 已经加载成功，不重复加载
return new Promise((resolve) => {
resolve(window.AMap)
})
}
const loadMaps = new Promise((resolve, reject) => {
let mapsScript = document.createElement("script")
mapsScript.type = "text/javascript"
mapsScript.src = "//webapi.amap.com/maps?v=1.4.6&key=xxx&callback=init" // key的值记得修改补充一下
mapsScript.onerror = reject('fail') // 引入失败
mapScript.onload = () => {
resolve(AMap)
}
document.head.appendChild(mapsScript)
})
const loadMapsUI = new Promise((resolve, reject) => {
let uiScript = document.createElement("script")
uiScript.type = "text/javascript"
uiScript.src = "//webapi.amap.com/ui/1.0/main-async.js"
uiScript.onerror = reject('fail') // 引入失败
uiScript.onload = () => {
resolve('success')
}
document.head.appendChild(uiScript)
})
return Promise.all([loadMaps, loadMapsUI]).then((res) => {
return res[0]
}).catch(e => {
console.log(e)
})
// promise.all中的then的成功回调返回res是一个数组，分别代表loadMaps和loadMapsUI的结果，这里只返回p1的结果（map对象）就ok
}
2. 层级地图组件
高德地图引入后，就可以开始我们的表演了，定义一个地图组件，哪里需要用到就引入组件就可。这项目里我用了elementUI。
<!-- Amap.vue层级地图组件 -->
<template>
<div v-loading="mapLoading" class="amap-container">
<div ref="amapContent" style="min-width: 310px; height: 600px; margin: 0 auto"></div>
</div>
</template>
<script>
import MapLoader from '@/assets/AMap/AMap.js'
export default {
props: {
markers: { // 地图上的坐标点
type: Array,
default: () => {
return []
}
},
center: { // 地图中心坐标
type: String,
default: ''
},
containerIdName: { // 定义的地图容器的id名字
type: String,
default: ''
}
},
data() {
return {
map: null, // 定义地图实例
mapLoading: false
}
},
watch: {
// 如果地图中心坐标点发生改变，重新定位
center(newData, oldData) {
if (newData !== oldData) {
document.getElementById(this.containerName).scrollIntoView()
this.map.setZoomAndCenter(18, newData)
}
},
// 如果地图标记点发生改变，重绘地图
markers(newData, oldData) {
if (newData !== oldData) {
this.createMap()
}
}
},
mounted() {
this.createMap()
},
methods: {
async createMap() {
// 初始化Map
await MapLoader().then(async AMap => {
console.log('地图加载成功')
// 初始化地图
await (this.map = new AMap.Map(this.containerName, {
center: this.center,
resizeEnable: true,
zoom: 15
}))
if (!window.AMapUI) { // 如果还没有初始化
await initAMapUI() // 这里调用initAMapUI初始化
}
await this.addMarkers() // 增加点坐标
this.mapLoading = false
}).catch(err => {
console.log('地图加载失败', err)
this.$message({
message: '地图加载失败',
type: 'error',
duration: 3000
})
})
// 加载工具栏
await AMap.plugin(['AMap.ToolBar'], () => {
const toolbar = new AMap.ToolBar()
this.map.addControl(toolbar)
})
},
// 初始化标注点
addMarkers() {
AMapUI.loadUI(['overlay/SimpleMarker'], SimpleMarker => {
this.markers.forEach((item, index) => {
new SimpleMarker({
// 设置节点属性
iconLabel: {
// 普通文本
innerHTML: `${index + 1}`,
// 设置样式
style: {
color: '#fff',
fontSize: '120%',
marginTop: '2px'
}
},
iconStyle: 'blue',
map: this.map,
position: [item.lon, item.lat] // 标注点的经纬度
})
})
})
}
}
}
</script>
3. 在页面中运用地图组件
<template>
<div v-loading="loading" class="page">
<el-table :data="tableData.data" border >
<template v-for="(item,index) in tableData.header">
<el-table-column
v-if="index == 'addressDetail'"
:key="index"
:label="item"
align="center"
min-width="110px"
>
<template slot-scope="scope">
<a
style="color:#00a4ff"
@click="changeCenter(scope.$index)"
>{{ scope.row.addressDetail }}</a>
</template>
</el-table-column>
<el-table-column
v-else
:key="index"
:label="item"
:min-width="index == 'count' ? 50 : 110"
:prop="index"
align="center"
show-overflow-tooltip
/>
</template>
</el-table>
<pagination v-if="tableData.data" :pager="pager" @search="getAddressData"/>
<amap
v-if="tableData.data"
:center="mapCenter"
:markers="mapMarkers"
container-id-name="amapLL"
style="margin: 20px 0 40px"
/>
</div>
</template>
<script>
import amap from '@/components/AMap/Amap'
import pagination from '@/components/Pagination/Pagination'
export default {
components: {
pagination,
amap
},
data() {
return {
// 分页跟表格
pager: {
pageSize: 10,
currentPage: 1,
totalPage: 1
},
loading: false,
// 返回的数据
tableData: [],
mapCenter: [],
mapMarkers: []
}
},
mounted() {
this.getAddressData()
},
methods: {
// 获取页面数据，请求后台接口，这里先定义假数据
getAddressData() {
this.loading = true
const resData = {
data: {
list: [
{
addressDetail: "吉林省长春市宽城区站前街道西广南区",
resortCount: "3",
resortSum： "22"
},
{
addressDetail: "吉林省长春市宽城区站前街道嫩江路282号西广南区",
resortCount: "55",
resortSum： "22"
}
],
pageNum: 0,
pageSize: 0,
total: 0
},
header: {
addressDetail: "位置",
resortCount: "到过人数",
resortSum： "到过次数"
},
map: [
{
count: 1,
lat: "43.901522",
location: "[125.320801,43.901522]",
lon: "125.320801"
},
{
count: 1,
lat: "43.90155327690972",
location: "[125.32062065972222,43.90155327690972]",
lon: "125.32062065972222"
}
]
}
this.tableData.header = resData.header
this.tableData.data = resData.list
this.pager.totalPage = resData.data.total
this.mapMarkers = resData.map
// 第一个位置信息作为地图中心点
this.mapCenter = this.mapMarkers.length ? [this.mapMarkers[0].lon,this.mapMarkers[0].lat] : []
},
// 定位点击的地址
changeCenter(index) {
const mapIndex = index + (this.pager.currentPage - 1) * this.pager.pageSize
this.mapCenter = [
this.mapMarkers[mapIndex].lon,
this.mapMarkers[mapIndex].lat
]
}
}
}
</script>
这样就实现了以表格展示列表数据，点击地点名称地图组件定位到相对应位置的功能，希望能帮到你~
