最近再写一个大屏 需要引入原生的高德地图
就想着简单封装一下，避免后面重复造轮子！
高德地图 简介
封装思路很简单，建立一个amap.js文件，所有的地图功能全部写入到amap.js里面
<template>
<div :style="height:300px">
<!-- 基本地图 -->
<div id="container"></div>
</div>
</template>
<script>
import amap from "@/utils/subeiMap/amap.js";
export default {
name: 'index',
data() { return {} },
mounted() {
//地图-初始化显示地图
//传入地图的ID 就可以了
amap.mapInit("container")
}
}
</script>
amap.js
- amap.js文件
import AMap from 'AMap'
let map
let marker
const isTest = false
//中心点
const locationTest = {
lat: '108.967391',
lng: '34.272724'
}
//坐标点
const makersTest = [{
name: '幸福林带安置小区',
address: '陕西省西安市新城区东盛北路',
deviceStatus: 2, //状态，用来显示每个点位的状态
location: {
lat: '108.967391',
lng: '34.272724'
}
}, {
name: '自定义图标',
address: '陕西省西安市新城区东盛北路',
deviceStatus: 3, //状态，用来显示每个点位的状态
location: {
lat: '108.956843',
lng: '34.267785'
}
}]
//区域点
const areasTest = [{
name: '西安市',
},
{
name: '光明区',
},
{
name: '广州市',
},
]
//地图初始化 可实现要点，1初始化，地图级别，以某点为中心， 自定义效果
function mapInit(obj) {
console.log("初始化---")
let center
if (isTest) {
center = [locationTest.lat, locationTest.lng]
} else {
center = ['108.956843', '34.267785']
}
map = new AMap.Map(obj, {
mapStyle: 'amap://styles/darkblue', //自定义效果
resizeEnable: true,
rotateEnable: false,
pitchEnable: false,
expandZoomRange: true,
zoom: 10, //设置地图级别
// zooms: [9, 20], //设置缩放级别
center: center //设置中心点
})
return map
}
//地图-标点（单个或多个）
function map_addMaker(makers, callback) {
if (isTest) {
// 多个测试点位循环
makersTest.forEach((item) => {
// 创建点位
marker = new AMap.Marker({
// icon: icon, //图标
imageSize: new AMap.Size(22, 28), // 图标大小(32, 32),
position: [item.location.lat, item.location.lng], //坐标
offset: new AMap.Pixel(-12, 0)
})
marker.setMap(map)
marker.name = item.name
// 给标记加一个点击事件，传入对应的参数
marker.on('click', (e) => {
// console.log("触发点位的点击事件" + e)
callback(e.target.name)
})
})
} else {
// 创建点位
marker = new AMap.Marker({
// icon: icon, //图标
imageSize: new AMap.Size(22, 28), // 图标大小(32, 32),
position: [makers.location.lat, makers.location.lng], //坐标
offset: new AMap.Pixel(-12, 0)
})
marker.setMap(map)
marker.name = makers.name
// 给标记加一个点击事件，传入对应的参数
marker.on('click', (e) => {
// console.log("触发点位的点击事件" + e)
callback(e.target.name)
})
}
}
//地图-区域展示
function map_addArea(area) {
let areasData
if (isTest) {
areasData = areasTest
} else {
areasData = area
}
AMap.service('AMap.DistrictSearch', function () {
let opts = {
subdistrict: 1, // 返回下一级行政区
extensions: 'all', // 返回行政区边界坐标组等具体信息
level: 'city' // 查询行政级别为市
}
// 实例化DistrictSearch
let district = new AMap.DistrictSearch(opts)
district.setLevel('district')
// 行政区查询
areasData.forEach(item => {
district.search(`${item.name}`, function (status, result) {
// 获取边界信息
let bounds = result.districtList[0].boundaries
let polygons = []
if (bounds) {
for (let i = 0, l = bounds.length; i < l; i++) {
// 生成行政区划polygon
let polygon = new AMap.Polygon({
map: map,
strokeWeight: 1,
path: bounds[i],
fillOpacity: 0.2,
fillColor: 'rgba(71,228,194,0.44)',
strokeColor: 'rgba(83,204,79,0.65)'
})
polygons.push(polygon)
}
}
})
})
})
}
//地图-弹出层
function map_show(makers, name, callback) {
if (isTest) {
makersTest.forEach((item) => {
if (!item.name.includes(name)) {
return
}
// 设置中心点
map.setZoomAndCenter(12, [item.location.lat, item.location.lng])
callback(item)
})
} else {
makers.forEach((item) => {
if (!item.name.includes(name)) {
return
}
// 设置中心点
map.setZoomAndCenter(12, [item.location.lat, item.location.lng])
callback(item)
})
}
}
// 地图-自定义点位样式
function map_addMakerStyle(makers, callback) {
if (isTest) {
// 多个测试点位循环
makersTest.forEach((item) => {
// 创建点位
var info = []
info.push(`<div class='waringBox'>报警</div>`)
marker = new AMap.Marker({
position: [item.location.lat, item.location.lng], //坐标
content: info.join('') // 使用默认信息窗体框样式，显示信息内容
})
marker.setMap(map)
marker.name = item.name
// 给标记加一个点击事件，传入对应的参数
marker.on('click', (e) => {
callback(e.target.name)
})
})
} else {
// 创建点位
var info = []
info.push(`<div class='waringBox'>报警</div>`)
marker = new AMap.Marker({
position: [makers.location.lat, makers.location.lng], //坐标
content: info.join('') // 使用默认信息窗体框样式，显示信息内容
})
marker.setMap(map)
marker.name = makers.name
// 给标记加一个点击事件，传入对应的参数
marker.on('click', (e) => {
callback(e.target.name)
})
}
}
export default {
mapInit,
map_addMaker,
map_addMakerStyle,
map_addArea,
map_show
}
