高德地图简介

高德官网DEMO-访问这里

报 “AMap is not defined”,访问这里

封装思路很简单，建立一个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
}

高德地图 简介

amap.js

高德地图简介