react、vue中使用高德地图

在react、vue框架中使用高德地图功能

安装

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

新建map.tsx文件（vue使用同例）

import { useEffect } from "react";
import AMapLoader from '@amap/amap-jsapi-loader';

const Home = ()=>{
    let map: any = null; // 地图实例（地图实例不要定义为响应式数据）
    // 初始化地图
    const initMap = ()=>{
        AMapLoader.load({
            key:"高德地图Key", // 申请好的Web端开发者Key，
            version:"2.0",// 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins:['AMap.MapType','AMap.ElasticMarker'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap)=>{
            map = new AMap.Map("container",{  //设置地图容器id
                viewMode:"3D",  //是否为3D地图模式
                pitch:15, //倾斜度	
                terrain: true, // 开启地形图
                zoom:8, //初始化地图级别
                center:[109.40,33.92], //初始化地图中心点位置
                mapStyle: 'amap://styles/darkblue',
            });
            map.addControl(new AMap.MapType());
        }).catch(e=>{
            console.log(e);
        })
    };
    const initFun = ()=>{
        initMap();
    }
    useEffect(()=>{
        initFun()
        return()=>{
			map?.destroy();
        }
    },[])
    
    return <>
        <div>
            <div id="container" style={{
                width: "1000px",
                height: "1000px",
                backgroundColor: "red"
            }}></div>
        </div>
    </>
}

export default Map;

效果