高德地图（前端入门学习）

参考文档

官方教程

基础知识

lng：经度
lat：纬度

在百度地图中，习惯经度在前，纬度在后

地球上同一个地理位置的经纬度，在不同的坐标系中，会有少于偏移，国内目前常见的坐标系主要分为三种：

地球坐标系——WGS84：常见于 GPS 设备，Google 地图等国际标准的坐标体系。
火星坐标系——GCJ-02：中国国内使用的被强制加密后的坐标体系，高德坐标就属于该种坐标体系。
百度坐标系——BD-09：百度地图所使用的坐标体系，是在火星坐标系的基础上又进行了一次加密处理。

准备

1、注册开发者账号
2、创建新应用
3、为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

vue项目使用（方案一：引用原生api）（全局注册）（不推荐）

首先，申请 Key
其次，引入地图 js，在public/index.html里面添加下面代码

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> 

然后，创建vue.config.js文件，写入

module.exports = {
  configureWebpack: {
    externals: {
      'AMap': 'AMap',
      'AMapUI': 'AMapUI'
    }
  }
};

最后，组件引入，mounted时初始化地图（注意要设置容器的宽高）

<template>
  <div class="wrap">
    <!-- 1、创建地图容器 -->
    <div id="container"
         style="width:100%;height:600px"></div>
  </div>
</template>

<script>
// 2、引用地图类
import AMap from "AMap"
// import AMapUI from 'AMapUI'
export default {
  data () {
    return {
      map: null,
    }
  },
  // 3、mounted时初始化地图
  mounted () {
    this.init();
  },
  methods: {
    init () {
      this.map = new AMap.Map("container", {
        zoom: 11, //级别
        resizeEnable: true
      });
    },
  }
};
</script>

vue项目使用（方案二：引用原生api）（单页面按需加载）

1、创建utils/AMap.js文件，写入初始化函数loadAMap，用于动态加载地图api。

/* eslint-disable */
export default function loadAMap(ak) {
  return new Promise(function(resolve, reject) {
    if (typeof AMap !== 'undefined') {
      resolve(AMap)
      return true
    }
    window.onAMapCallback = function() {
      resolve(AMap)
    }
//     let script = document.createElement('script')
//     script.type = 'text/javascript'
//     script.src = 'https://webapi.amap.com/maps?v=2.0&key=' + ak + '&callback=onAMapCallback'
//     script.onerror = reject
//     document.head.appendChild(script)
    let AMapURL = 'https://webapi.amap.com/maps?v=2.0&key=' + ak + '&callback=onAMapCallback'
    let scriptNode = document.createElement('script')
    scriptNode.setAttribute('type', 'text/javascript')
    scriptNode.setAttribute('src', AMapURL)
    scriptNode.onerror = reject
    document.body.appendChild(scriptNode)
  })
}

2、页面使用

a、创建地图容器Div
b、引用import loadAMap from "@/utils/AMap.js"
c、在mounted使用loadAMap函数创建地图实例

<template>
  <div class="home">
    <h1>高德地图</h1>
    <div id="container"
         style="width:100%;height:500px"></div>
  </div>
</template>

<script>
import loadAMap from "@/utils/AMap.js"
export default {
  data () {
    return {
      map: {},
    }
  },
  mounted () {
    let that = this
    this.$nextTick(() => {
      loadAMap("您申请的key值")
        .then((AMap) => {
          // 创建地图实例
          var map = new AMap.Map('container', {
            zoom: 11,//级别
            center: [116.397428, 39.90923],//中心点坐标
            viewMode: '3D'//使用3D视图
          });
          that.map = map
          //异步加载控件
          AMap.plugin('AMap.ToolBar', function () {
            var toolbar = new AMap.ToolBar();
            that.map.addControl(toolbar);
          });
        })
        .catch((err) => {
          console.log("地图加载失败", err);
        });
    })
  }
}
</script>

vue项目使用（方案三：引用原生api）（按 NPM 方式使用 Loader）（推荐）

JSAPI 脚本加载详解

安装：

npm i @amap/amap-jsapi-loader --save

使用：

import AMapLoader from '@amap/amap-jsapi-loader';

let that = this
AMapLoader.load({
    "key": "您申请的key值",              // 申请好的Web端开发者Key，首次调用 load 时必填
    "version": "1.4.15",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    "AMapUI": {             // 是否加载 AMapUI，缺省不加载
        "version": '1.1',   // AMapUI 缺省 1.1
        "plugins":[],       // 需要加载的 AMapUI ui插件
    },
    "Loca":{                // 是否加载 Loca， 缺省不加载
        "version": '1.3.2'  // Loca 版本，缺省 1.3.2
    },
}).then((AMap)=>{
    that.map = new AMap.Map('container');
}).catch(e => {
    console.log(e);
})

vue项目使用（方案四：vue-amap组件）

官方文档
npm地址

参考案例

点线面地图选点组件封装案例（vue引用原生api）

<template>
  <a-modal title="坐标拾取"
           :width="1000"
           :visible="visible"
           :maskClosable="false"
           @ok="handleConfirm"
           @cancel="handleCancel"
           :bodyStyle="{padding:'12px'}">
    <div style="position: relative;">
      <a-select size="small"
                placeholder="请选择地点类型"
                v-model="locationType"
                @change="changeType"
                style="position: absolute;top: 0;right: 0;z-index:2;width:160px;">
        <a-select-option :value="0">点</a-select-option>
        <a-select-option :value="1">线</a-select-option>
        <a-select-option :value="2">面</a-select-option>
      </a-select>
      <div id="pickUpMap"
           style="height:500px"></div>
    </div>
  </a-modal>
</template>
<script>

import AMap from 'AMap'
// import AMapUI from 'AMapUI'
import { IconFont } from '@/core/my_icon'
export default {
  components: { IconFont },
  data () {
    return {
      submitLoading: false,
      visible: false,
      // 覆盖物集合
      overlays: [],
      coordinate: [],
      locationType: 0,
      oldType: 0,
      map: null,
      mouseTool: null,
      oldMarker: null,
      oldPolyline: null,
      oldPolygon: null
    }
  },
  computed: {
    show: {
      get: function () {
        return this.visible
      },
      set: function () { }
    }
  },
  watch: {
    visible (newVal, oldVal) {
      // if (newVal) {
      //   setTimeout(() => {
      //     this.init()
      //   }, 400)
      // }
    }
  },
  methods: {
    showMap (coordinate, locationType) {
      this.visible = true
      this.locationType = locationType || 0
      this.oldType = locationType || 0
      this.coordinate = coordinate ? coordinate.split(',') : []
      setTimeout(() => {
        this.init()
      }, 100)
    },
    // 地图初始化
    init () {
      const that = this
      that.map = new AMap.Map('pickUpMap', {
        zoom: 11,
        resizeEnable: true
      })
      // 添加工具类
      this.addTool()
      // 如果有覆盖物，触发绘制函数
      if (this.coordinate.length) {
        this.initDraw()
      }
    },
    initDraw () {
      const arr = this.coordinate.map(item => ({
        lng: parseFloat(item.split(' ')[0]),
        lat: parseFloat(item.split(' ')[1])
      }))
      // console.log(this.oldType, arr)
      if (this.oldType == 0) {
        this.oldMarker = new AMap.Marker({
          position: new AMap.LngLat(arr[0].lng, arr[0].lat)
        })
        // console.log('marker', this.oldMarker)
        this.map.add(this.oldMarker)
        this.map.setFitView()
      } else if (this.oldType == 1) {
        var path1 = arr.map(item => {
          return new AMap.LngLat(item.lng, item.lat)
        })
        // console.log('path1', path1)
        this.oldPolyline = new AMap.Polyline({
          path: path1,
          strokeColor: '#80d8ff'
        })
        this.map.add(this.oldPolyline)
        this.map.setFitView()
      } else if (this.oldType == 2) {
        var path2 = arr.map(item => {
          return new AMap.LngLat(item.lng, item.lat)
        })
        // console.log('path2', path2)
        this.oldPolygon = new AMap.Polygon({
          path: path2,
          fillColor: '#00b0ff',
          strokeColor: '#80d8ff'
        })
        this.map.add(this.oldPolygon)
        this.map.setFitView()
      }
    },
    addTool () {
      const that = this
      // 缩放控制条-地图工具条（ToolBar）
      AMap.plugin(['AMap.ToolBar'], () => {
        const toolbar = new AMap.ToolBar()
        that.map.addControl(toolbar)
      })
      // 缩略图-鹰眼(OverView)
      AMap.plugin(['AMap.OverView'], () => {
        const overView = new AMap.OverView({
          visible: true // 初始化显示鹰眼
        })
        that.map.addControl(overView)
        overView.open() // 展开鹰眼
      })
      //  比例尺（Scale）
      AMap.plugin(['AMap.Scale'], () => {
        const scale = new AMap.Scale()
        that.map.addControl(scale)
        scale.show()
      })
      //  添加鼠标工具（MouseTool）
      AMap.plugin(['AMap.MouseTool'], () => {
        const MouseTool = new AMap.MouseTool(that.map)
        that.mouseTool = MouseTool
      })
      // 添加绘制事件
      that.draw(that.locationType)
      // 监听绘图事件，获取覆盖物对象信息
      that.mouseTool.on('draw', function (e) {
        // console.log(e.obj)
        // 先清空再添加覆盖物信息
        that.clearAll()
        that.overlays.push(e.obj)
      })
    },
    clearAll () {
      const that = this
      that.map.remove(that.overlays)
      // 清空当前绘画物
      that.overlays = []
      // 如果是修改，有且仅需要操作一次  清空原来的绘制覆盖物
      if (that.coordinate.length) {
        that.coordinate = []
        if (that.oldType == 0) {
          that.map.remove(that.oldMarker)
        } else if (that.oldType == 1) {
          that.map.remove(that.oldPolyline)
        } else if (that.oldType == 2) {
          that.map.remove(that.oldPolygon)
        }
      }
    },
    changeType (val) {
      this.draw(val)
    },
    // 绘图
    draw (type) {
      switch (type) {
        case 0: {
          this.mouseTool.marker({
            // 同Marker的Option设置
          })
          break
        }
        case 1: {
          this.mouseTool.polyline({
            strokeColor: '#80d8ff'
            // 同Polyline的Option设置
          })
          break
        }
        case 2: {
          this.mouseTool.polygon({
            fillColor: '#00b0ff',
            strokeColor: '#80d8ff'
            // 同Polygon的Option设置
          })
          break
        }
      }
    },
    handleCancel () {
      this.visible = false
      this.overlays = []
      this.coordinate = []
      this.locationType = 0
      this.oldType = 0
      this.map = null
      this.mouseTool = null
      this.oldMarker = null
      this.oldPolyline = null
      this.oldPolygon = null
    },
    handleConfirm () {
      const { overlays, locationType } = this
      const coordinate = this.toPosition(overlays[0])
      this.$emit('confirm', { coordinate, locationType })
      this.handleCancel()
    },
    toPosition (overlay) {
      let str = ''
      if (overlay['CLASS_NAME'] == 'AMap.Marker') {
        // //console.log('Marker', overlay.getPosition())
        const marker = overlay.getPosition()
        str = marker['R'] + ' ' + marker['Q']
        return str
      } else if (overlay['CLASS_NAME'] == 'AMap.Polyline') {
        // //console.log('Polyline', overlay.getPath())
        const arr = overlay.getPath().map(item => {
          return item['R'] + ' ' + item['Q']
        })
        str = arr.join(',')
        return str
      } else if (overlay['CLASS_NAME'] == 'AMap.Polygon') {
        // //console.log('Polygon', overlay.getPath())
        const arr = overlay.getPath().map(item => {
          return item['R'] + ' ' + item['Q']
        })
        arr.push(arr[0])
        str = arr.join(',')
        return str
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>

组件使用

<CoordinateMap ref="CoordinateMap"
               @confirm="pickUpConfirm" />


coordinate: '',
locationType: null


// 坐标拾取
openCoordinateMap () {
  const { coordinate, locationType } = this
  this.$refs.CoordinateMap.showMap(coordinate, locationType)
},
// 组件回调
pickUpConfirm (obj) {
  // console.log('pickUpConfirm', obj)
  this.coordinate = obj.coordinate
  this.locationType = obj.locationType
},