vue加载高德地图

实现效果

安装依赖并引入

amap-jsapi-loader 是高德开放平台官网提供的地图 JSAPI 的加载器，可帮助开发者快速定位、有效避免加载引用地图 JSAPI 各种错误用法。

yarn add  @amap/amap-jsapi-loader

在需要的页面引入该依赖

import AMapLoader from "@amap/amap-jsapi-loader"; // 按需引入依赖

申请好的Web端开发者Key

初始化地图

设置一个地图容器并设置大小

<template>
  <div id="map" class="map-main"></div>
</template>

初始化地图

onMounted(() => {
    initMap()
})

高德Loca数据可视化 前置知识：Loca API 2.0版本是一个基于高德地图JS API 2.0的高性能地图数据可视化库，对AMap JS API 2.0版本的可视化封装。 用高德Loca数据可视化加载geojson,将准备好的区域json引入到文件中，使用Loca的PolygonLayer图层加载区域，具体教程参考: 高德Loca数据可视化参考手册

import GeoJson from 'GeoJson.json' // 事先准备好的geojson
const initMap = () => {
    AMapLoader.load({
        key: 'cbc945a8a1b127ca4a60b0f18a9456d2', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.GeoJSON', 'AMap.Marker'],// 需要使用的的插件列表
        Loca: {
            version: '2.0.0', // Loca 版本，缺省 1.3.2
        },
    })
        .then((Vmap) => {
            AMap = Vmap
            map = new AMap.Map('map', {//设置地图容器id
                mapStyle: props.mapStyle, //设置地图的显示样式
                showLabel: props.showLabel,// 是否显示地图文字标记
                expandZoomRange: true,// 是否支持扩展最大缩放级别，和zooms属性配合使用
                viewMode: '3D',//是否为3D地图模式
                rotation: 0,
                terrain: true, // 开启地形图
                // pitch: props.pitch,
                zooms: props.zooms, //设置地图的缩放级别
            })
            loca = new Loca.Container({
                map: map,
            })
            // 用GeoJSONSource方法处理准备好的geojson       
            geo = new Loca.GeoJSONSource(
            { data: GeoJson })
           
            polygon = new Loca.PolygonLayer(
            { map: map, zIndex: 11, hasSide: true }
            )
            
            polygon.setSource(geo)

            map.add(vlgLayer)
            
        })
        .catch((e) => {
            // console.log(e)
        })
}