vue中高德地图常用功能使用步骤【区域掩膜】【背景贴图】【点聚合】

Nian.Baikal

已于 2024-01-25 10:29:40 修改

阅读量2k

点赞数 26

文章标签： vue.js 贴图前端

于 2024-01-24 16:32:35 首次发布

本文链接：https://blog.csdn.net/weixin_46447553/article/details/135675013

版权

本文介绍了在Vue.js中使用高德地图的详细步骤，包括地图初始化、设置显示范围、区域掩膜的两种实现方式、删除网格线和背景颜色、背景贴图的添加，以及省份名称标注和鼠标移入高亮效果。同时讲解了点聚合功能，以解决大量点位展示问题。并提供了全国及省份地图数据的下载链接。

摘要由CSDN通过智能技术生成

简介

高德地图的用法介绍，包括地图初始化、区域掩膜、背景贴图、点聚合，地图事件

key、密钥准备

使用高德地图需要创建高德地图账号，获取 key 和安全密钥

操作步骤：高德地图开放平台

安装

安装高德地图依赖

npm安装

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

yarn安装

yarn  add  @amap/amap-jsapi-loader -S

地图初始化

1、引入AMapLoader

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
</script>

2、使用密钥

<script>
window._AMapSecurityConfig = {
   
  securityJsCode: '', // 申请的密钥
}
</script>

3、地图初始化

<template>
  <div id="mapContainer">
  </div>
</template>
<script>
export default {
   
  data() {
   
    return {
   
      map: null, // 地图实例
    }
  },
  mounted() {
   
  	// 页面挂载完成之后 进行地图初始化
    this.initMap()
  },
  methods:{
   
    initMap(){
   
      AMapLoader.load({
   
        key: '', // 申请的key
        version: '2.0', // 使用的地图版本
        plugins: ['AMap.DistrictSearch','AMap.MarkerCluster',], // 使用的地图插件
      }).then((AMap) =>{
   
      	// mapContainer 为加载地图的容器的id
        this.map = new AMap.Map("mapContainer", {
   
          center: [116.368324, 39.915085], // 地图中心点
          zoom: 3, // 地图缩放级别
          zIndex: 2, // 叠加层级
          expandZoomRange: true, // 开启显示范围设置
          mapStyle: 'amap://styles/blue', //  地图样式
        })
      }).catch((e) => {
   
      	console.log(e)
      })
	}
  }
}
</script>

此时的地图效果
在这里插入图片描述

设置地图显示范围

通过setBounds方法设置地图视图范围，可以使指定区域缩放至适应画布大小，并居中显示

此处以全国区域居中为例

setMapBounds() {
   
  const bound = new AMap.Bounds(
    [73.502355, 9.83703], // 西南
    [135.09567, 53.563624], // 东北
  ) // 经纬度范围
  const immediately  = true //立即缩放到指定位置 为true时无缩放动画
  const avoid = [120,