vue项目实战系列二十八：集成高德地图

1. 注册高德开发者账号,申请KEY:

应用管理 -> 添加新KEY -> web服务

https://lbs.amap.com/demo/javascript-api/example/selflayer/heatmap

---

2. 安装vue-amap:

vue-amap是饿了么开源的一套基于Vue 2.x和高德地图的地图组件

yarn add vue-amap

---

3. 引入:

(1). index.html引入:

// script引入
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=你的key"></script>

// 配置vue.config.js:
module.exports = {
  configureWebpack: {
    externals: {
      // 通过externals配置,就可以在.vue文件中使用import引入
      'AMap': 'AMap' // 高德地图配置,后面的名称是全局变量名
    }
  }
}

①. webpack中的externals配置:
    a. 表示不从bundle中引用依赖的方式
    b. 即:不通过npm下载的类库,在html文件中以script引入,再在页面中使用import导入的方式

(2). min.js引入:

import VueAMap from 'vue-amap'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  key: '', // 高德的key
  plugin:  [
    'AMap.Autocomplete', 'AMap.PlaceSearch',
    'AMap.Scale', 'AMap.OverView',
    'AMap.ToolBar', 'AMap.MapType',
    'AMap.PolyEditor', 'AMap.CircleEditor',
    'AMap.Geolocation'
  ], // 按需引入引用的插件
  uiVersion: '1.0', // UI库版本
  v: '1.4.4', // 高德SDK版本
})

---

4. 组件:

<template>
  <div id="container" style="width:750px; height:300px"></div>
</template>

<script>
import AMap from 'AMap' // 引入高德地图
import { onMounted } from 'vue'
// import heatmapData  from '@/assets/js/heatmapData'; 

const heatmapData = [
  {
      "lng": 117.184469,
      "lat": 39.078996,
      "count": 11
  },
  {
      "lng": 117.222882,
      "lat": 39.105249,
      "count": 11 // 出现次数
  }
]

export default {
  setup() {
    onMounted(() => {
      // 1. 加载地图
      var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [117.184469, 39.078996],
        zoom: 11, // 表示地图打开时,默认的缩放级别(数值变大,地图相当于放大)
        mapStyle: "amap://styles/whitesmoke", // 模版样式
      })
      
      // 2. 加载热点图
      var heatmap;
      map.plugin(["AMap.Heatmap"], function () {
          // 初始化heatmap对象
          heatmap = new AMap.Heatmap(map, {
              // 控制单个点的笼罩半径,半径范围内所有的点都会算作此点的数目,变相增大x的值.设置合适的半径,确定每个点的笼罩范围
              radius: 25, // 每个点的覆盖范围半径,单位是像素
              /**
                * 热力图的透明度,包含两个值(取值范围从0到1),表示透明度从完全透明到完全不透明的变化值
                * 对应着热力图颜色的渐变
                * 例:
                * opacity: [0, 1],则坐标点的数目在最小梯度的区域是完全透明的,在最大梯度的区域是完全不透明的
                * opacity: [1, 1],则整个热点图的区域都是完全不透明的
                * 梯度为下面的gradient参数
                */
              opacity: [0, 0.8]
              /**
                * 颜色梯度配置,设目标值(某点范围内点数目/下面配置的max)为x
                * key是x的区间配置,value是对应区间的颜色
                * 例:
                * 假设gradient和max的配置均是下面的代码
                * 当某个点出现的数目为10时,x = 某点范围内点数目/下面配置的max = 10/10 = 1
                * x > 0.9，则目标区域显示的颜色为红色
                * 具体的范围如下:
                * x > 0.9 			   red
                * 0.9 > x > 0.7    yellow
                * 0.7 > x > 0.5	   green
                * 0.5 > x > 0.3 	 blue
                * 0.3 > x			     blue
                * 注：即使x的值小于0.3还是会有颜色
                */
              /*,
              gradient:{
                0.3: 'blue',
                0.5: 'green',
                0.7: 'yellow',
                0.9: 'red'
              }
              */
          })
          // 设置数据集
          heatmap.setDataSet({
              data: heatmapData, // 热力图数据
              // 热点图区分热度的界限,某地区的点数超过max一定比例,即显示对应gradient配置的颜色
              max: 10 // 见gradient的例子
          })
      })
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css");

#container {
  width: 100vw;
  height: 100vh;
}
</style>