1、背景

由于本人平常高德地图用的不多，头一次做一些高德地图路线规划、点聚合、地图Marker等操作，到现在还用的不是很熟练，遂决定简单记录一下，方便以后使用了可以过来看。

2、高德地图API

参考链接：

地图API示例：细线 ThinLine-线 Line-示例中心-JS API 示例 | 高德地图API

地图覆盖物文档：覆盖物-参考手册-地图 JS API | 高德地图API

信息窗体示例：默认样式信息窗体-信息窗体-示例中心-JS API 示例 | 高德地图API

3、使用心得

地图初始化

首先高德要有一个基准路径：'https://webapi.amap.com/maps?v=1.4.15&key=自己申请的key值&plugin=AMap.MouseTool,AMap.PolyEditor,AMap.DistrictLayer,AMap.MarkerClusterer(这些都是使用高德的API名称)'

设置一个具有宽高的地图容器后，使用

new AMap.Map('地图容器ID', {

        zoom:  12 , //级别

        center: [lng, lat], // 中心点坐标 ： 经纬度

        viewMode: '3D',  //使用3D视图

        zooms: [3, 16],  //设置地图级别范围

        mapStyle: 'amap://styles/xxxxxxxxxxxxxxx',  // 自定义地图主题色

     });

 此处声明地图保存在自己创建的变量 mapRef 中，然后封装了获取地图示例的方法，每次调用返回当前地图对象，以调用其他API。

 

标准样式主题-自定义地图样式-示例中心-JS API 示例 | 高德地图API 主题色可以使用官方提供的几种主题，也可以自己进行模块颜色配置，自定义主题。

地图中几个常用方法

1、地图描线 -- Polyline

解释一下代码底部的

setZoomAndCenter(缩放级别，中心点数组) -- 改变地图中心点及缩放级别

多配合与地图中的切换使用，切换场景时自动定位到该场景的中心

 如图所示，高德地图提供的描线方法为 

AMap.Polyline(opt:PolylineOptions) -- 构造折线对象，通过PolylineOptions指定折线样式

其中：

map： 当前地图实例对象

path：lines:Array，注意，该数据格式必须是[[lng1,lat1],[lng2,lat2],[lng3,lat3].....]，即数组包数组的格式，里面每个数组都是一组经纬度组成，以此会画成一条线。

strokeWeight:Number     线条宽度，单位：像素

strokeColor:String    线条颜色，使用16进制颜色代码赋值。默认值为#006600

如代码最后所示，此方法会返回 line (这条线的示例对象)，于是在其他文件调用时，可以用一个变量来接收，然后通过 line.on('click',（)=>{代码体}) 来为此线段绑定点击事件。

此处只简单介绍常用的属性，及说明最重要的 path 属性数据结构，详情移步：

覆盖物-参考手册-地图 JS API | 高德地图API -- Polyline

2、信息窗体 -- InfoWindow

如图所示，高德地图中信息窗体所使用的 Content 都是元素字符串，写起来稍微有些费劲.

AMap.InfoWindow(opt:PolylineOptionsInfoWindowOptionsPolylineOptions) -- 构造详细信息展示窗体。

isCustom ： 是否自定义窗体。设为true时，信息窗体外框及内容完全按照content所设的值添加（默认为false，即在系统默认的信息窗体外框中显示content内容）

autoMove：是否自动调整窗体到视野内（当信息窗体超出视野范围时，通过该属性设置是否自动平移地图，使信息窗体完全显示）

closeWhenClickMap：控制是否在鼠标点击地图后关闭信息窗体，默认false，鼠标点击地图后不关闭信息窗体

content：显示内容，可以是HTML要素字符串或者HTMLElement对象

anchor：信息窗体锚点。

offset：信息窗体显示位置偏移量。默认基准点为信息窗体的底部中心。

此处只简单介绍常用的属性，详情移步：

信息窗体-参考手册-地图 JS API | 高德地图API

但注意，写成 html 字符串，无法很好的去为元素添加点击事件，如果只有一行的代码逻辑体，可以直接写在 htmlString 中，如图

 但如果结构体比较多时，有两种方案

方案1：事件委托：通过e.target找到你绑定的具体id，书写逻辑

      document.querySelector('body').addEventListener('click', function (e) {

        if (e.target.getAttribute('id') == 'closeBtn') {

          iw.close();

        }

      });

方案2：在生命周期中给Window事先注册事件，再将事件传给 ts 文件(htmlString)。

在window对象上注册函数，并在同文件声明这个函数

 

声明函数

3、点聚合 -- MarkerClusterer  插件

点聚合是一个比较复杂的功能，可以在地图缩放很小时将地图画的点聚合在一起，点击时再放大，这里需要用到高德的工具类 - MarkerClusterer  插件

文档：工具类-参考手册-地图 JS API | 高德地图API

示例：点聚合-点标记-示例中心-JS API 示例 | 高德地图API

过程：

1>首先，地图描点添加 Marker 我使用的是某个图片，需要用到 AMap.Icon(),如下图所示

size：  图标尺寸，默认值(36,36)   //类型为高德提供的Size类型，下面会放链接 

 imageOffset: 图标取图偏移量。当image中指定了一个大图时，可通过size和imageOffset配合，显示图标的指定范围    //类型为高德提供的Pixel类型，下面会放链接 

image: 图标的取图地址。默认为蓝色图钉图片  // String  可以直接导入

imageSize：图标所用图片大小，根据所设置的大小拉伸或压缩图片，等同于CSS中的background-size属性。可用于实现高清屏的高清效果 

文档地址：覆盖物-参考手册-地图 JS API | 高德地图API

2>这样，我们就成功的将你想在地图上展示的图标生成好了，下一步为地图添加覆盖物：

position： 点标记在地图上显示的位置，默认为地图中心点

icon：需在点标记中显示的图标。可以是一个本地图标地址，或者Icon对象。有合法的content内容时，此属性无效

label：结构为 {content,offset,direction}  content 为文本标注的内容。direction 为文本标注方位。offset 为偏移量（默认基准点为图标左上角）

angle：点标记的旋转角度，广泛用于改变车辆行驶方向

文档地址：覆盖物-参考手册-地图 JS API | 高德地图API

3>生成覆盖物之后，还可以直接在当前给该覆盖物添加点击事件。(上述写的方式是将线段对象放回，通过on添加，此处是第二种方式，如下图)。

4>循环添加覆盖物，生成一个数组 调用MarkerClusterer方法

        AMap.plugin('AMap.MarkerClusterer', () => {

          new AMap.MarkerClusterer(mapInstance, firePoint.value, {

            gridSize: 80,

            maxZoom: 12,

            minClusterSize: 1,

          });

        });

注意 由于 AMap.MarkerClusterer 是一个插件方法，在调用时必须加上

   AMap.plugin('AMap.MarkerClusterer', () => { 代码体 });

否则会报错：MarkerClusterer is undefined

具体属性参考文档：工具类-参考手册-地图 JS API | 高德地图API

先写到这里，后续继续补充.....

比较简单的原生方式

<template>
        <div style="margin: 0px;padding: 0px">
            <div id="panel"></div>
            <div
                    :id="mapId"
                    style="width:100%;height:80vh"
                    class="m-map"/>
            <a-button @click="buildMarker">添加标记</a-button>
            <a-button @click="buildTools">添加工具栏</a-button>
            <a-button @click="buildDriving">路线规划</a-button>
        </div>
</template>
 
<script>
    export default {
        data () {
            return {
                mapId: 'mapId', // 地图id，多次调用该地图组件时，id必须动态生成
                map: null
            }
        },
        watch: {
            // 经纬度
            point: function (val) {
                this.map.setCenter(val)
                this.marker.setPosition(val)
            }
        },
        mounted () {
        },
        created () {
            console.log('create begin')
            this.createMap()
            console.log('create end')
        },
        methods: {
            createMap () {
                const _this = this
                this.mapId = `map${Math.random().toString().slice(4, 6)}`
                window.onMapLoad = function () {
                    console.log('window.AMap', window.AMap)
                    const map = new window.AMap.Map(_this.mapId, {
                        resizeEnable: true, // resizeEnable: true, //是否监控地图容器尺寸变化
                        zoom: 11, // zoom:11, //初始化地图层级
                        center: [ 116.397428, 39.90923 ]// center: [116.397428, 39.90923] //初始化地图中心点
                    })
                    _this.map = map
                }
                const url = 'https://webapi.amap.com/maps?v=1.4.15&key=你的Key&callback=onMapLoad'
                const jsapi = document.createElement('script')
                jsapi.charset = 'utf-8'
                jsapi.src = url
                document.head.appendChild(jsapi)
            },
            createMapTools () {
                const self = this
                // 地图id，多次调用该地图组件时，id必须动态生成
                self.id = `map${Math.random().toString().slice(4, 6)}`
 
                // 封装回调函数，为了防止与其他地方定义的load冲突，最好重命名，如onmaploaded
                window.onmaploaded = () => {
                    // 地图基础控件添加，传递的第一个参数是DOM元素的id
                    const map = new window.AMap.Map(self.id, {
                        // resizeEnable: true, //是否监控地图容器尺寸变化
                        // zoom:11, //初始化地图层级
                        // center: [116.397428, 39.90923] //初始化地图中心点
                        resizeEnable: true,
                        zoom: 11,
                        center: self.point
                    })
                    // 地图图面
                    self.map = map
 
                    // 同时引入工具条插件
                    window.AMap.plugin(['AMap.ToolBar', 'AMap.Driving'], () => {
                        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
                        const toolbar = new window.AMap.ToolBar()
                        map.addControl(toolbar)
 
                        // 创建地图点标记：
                        const marker = new window.AMap.Marker({
                            icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
                            position: self.point
                        })
                        self.marker = marker
                        // 将创建好的地图点标记控件 添加到地图map
                        marker.setMap(map)
                        console.log('----------------------')
                        // 构造路线导航类
                        var driving = new window.AMap.Driving({
                            map: map,
                            panel: 'panel'
                        })
                        // 根据起终点名称规划驾车导航路线
                        driving.search([
                            { keyword: '北京市地震局(公交站)', city: '北京' },
                            { keyword: '亦庄文化园(地铁站)', city: '北京' }
                        ], function (status, result) {
                            // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                            if (status === 'complete') {
                                console.success('绘制驾车路线完成')
                            } else {
                                console.error('获取驾车数据失败：' + result)
                            }
                        })
                    })
                }
            },
            buildMarker () {
                var marker = new window.AMap.Marker({
                    position: new window.AMap.LngLat(116.39, 39.9),
                    title: '北京'
                })
                this.map.add(marker)
            },
            buildTools () {
                window.AMap.plugin(['AMap.ToolBar'], () => { // 同时引入工具条插件
                    // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
                    const toolbar = new window.AMap.ToolBar()
                    this.map.addControl(toolbar)
                })
            },
            buildDriving () {
                const _this = this
                window.AMap.plugin(['AMap.Driving'], () => {
                    var driving = new window.AMap.Driving({
                        map: _this.map,
                        panel: 'panel'
                    })
                    // 根据起终点名称规划驾车导航路线
                    driving.search([
                        { keyword: '北京市地震局(公交站)', city: '北京' },
                        { keyword: '亦庄文化园(地铁站)', city: '北京' }
                    ], function (status, result) {
                        // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                        if (status === 'complete') {
                            console.log('绘制驾车路线完成')
                        } else {
                            console.log('获取驾车数据失败：' + result)
                        }
                    })
                })
            }
        }
    }
</script>
 
<style>
 
</style>

代码比较简洁好用的原生高德地图api

1、在根目录 public 文件夹下的 index.html 中加入

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=你申请的key"></script> 
 
<!-- 下面这个ui样式暂时不引入也可以 -->
<!-- <script type="text/javascript" src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script> -->

2、在 vue.config.js 文件中配置 externals

module.exports = {
  devServer: {
    port: 57103 // 端口号配置
  },
  configureWebpack: {
    externals: {
      'AMap': 'AMap' // 高德地图配置
    }
  }
}

注： vue.config.js 文件要自己创建，vue-cli 3.0 不会自动生成此文件。 此外，修改 vue.config.js 不会触发热加载，也就是修改之后你需要重新 run 一下你的项目，它才能生效。
3、实际使用

<template>
  <div class="box">
    <div id="container" style="width: 100%;height: 800px"></div>
  </div>
</template>
 
<script>
import AMap from 'AMap' // 引入高德地图
export default {
  mounted () {
    this.init()
  },
  methods: {
    init () {
      const dom = document.getElementById('amapArea');
      
      this.map = new AMap.Map(dom, {
          resizeEnable: true,
          zoom: 10,
          center: [116.397428, 39.90923],
          showLabel: false //不显示地图文字标记, 终于可以配置了TAT
      });
	}
 }
}
</script>

注：init() 方法请在 mounted 生命周期中调用，因为如果在 created 阶段调用，会找不到 html 元素 div#container

4、效果图

5、剩下的就可以在html中使用高德地图api地图一样了

参考文章：
https://juejin.cn/post/6964668556071927839
https://www.cnblogs.com/similar/p/11050455.html