前端系列19集-vue3引入高德地图，响应式，自适应

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

import AMapLoader from '@amap/amap-jsapi-loader' // 使用加载器加载JSAPI，可以避免异步加载、重复加载等常见错误加载错误
//为地图注册click事件获取鼠标点击出的经纬度坐标 
map.on("click", function (e: any) { 
// 点击事件 
}); let infoWindow = new AMap.InfoWindow({ 
//创建信息窗体 
isCustom: false, 
//使用自定义窗体 
anchor: "top-right", 
//信息窗体的三角所在位置 
content: `XXX信息`, 
//信息窗体的内容可以是任意html片段 
offset: new AMap.Pixel(-10, -5), }); 
infoWindow.open(map, [116.397128, 39.916527]); 
//填写想要窗体信息指示的坐标

import AMapLoader from '@amap/amap-jsapi-loader';
export function loadAMap() {
  return new Promise(function (resolve, reject) {
    AMapLoader.load({
      key: '', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [
        'AMap.ControlBar',
        'AMap.LineSearch',
        'AMap.StationSearch',
        'AMap.PolylineEditor',
        'AMap.PolygonEditor',
        'AMap.CircleEditor',
        'AMap.AutoComplete',
        'AMap.AutoComplete',
        'AMap.DistrictSearch',
        'AMap.PlaceSearch',
        'AMap.MouseTool',
      ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap: any) => {
        window.AMap = AMap
        resolve(window.AMap);
      })
      .catch((e: any) => {
        console.log(e);
        reject();
      });
  });
}

import AMapLoader from '@amap/amap-jsapi-loader'

要在Vue 3中引入高德地图，你可以按照以下步骤进行操作：

在项目目录中使用npm或yarn安装高德地图的JavaScript API库。你可以使用以下命令之一：

npm install @amap/amap-jsapi-loader

yarn add @amap/amap-jsapi-loader

在Vue组件中引入并使用高德地图。

在你的Vue组件中，你可以使用AmapLoader从高德地图加载API，然后在地图准备好后使用AmapMap组件进行展示。以下是一个简单的示例：

// return new Promise(function (resolve, reject) {
    //     AMapLoader.load({
    //         key: '', // 申请好的Web端开发者Key，首次调用 load 时必填
    //         version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    //         plugins: [
    //             'AMap.ControlBar',
    //             'AMap.LineSearch',
    //             'AMap.StationSearch',
    //             'AMap.PolylineEditor',
    //             'AMap.PolygonEditor',
    //             'AMap.CircleEditor',
    //             'AMap.AutoComplete',
    //             'AMap.AutoComplete',
    //             'AMap.DistrictSearch',
    //             'AMap.PlaceSearch',
    //             'AMap.MouseTool'
    //         ] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    //     })
    //         .then((AMap: any) => {
    //             const map = new AMap.Map('container', {
    //                 //设置地图容器id
    //                 viewMode: '3D', //是否为3D地图模式
    //                 zoom: 5, //初始化地图级别
    //                 center: [116.397428, 39.90923] //初始化地图中心点位置
    //             })
    //         })
    //         .catch((e: any) => {
    //             console.log(e)
    //             reject()
    //         })
    // })

请确保替换代码中的你的高德地图API密钥为你自己的API密钥，以及经度、纬度和缩放级别为合适的值。

使用在其他Vue组件中显示地图。

在其他的Vue组件中，你可以使用标签来显示地图：

const map = new AMap.Map(wrapEl, {
        zoom: 15,
        center: [116.397428, 39.90923],
        viewMode: '3D'
    })

//进行地图初始化
const initMap = async () => {
    await toPromise() // 等待脚本加载完成的 Promise 解析
    await nextTick() // 等待 Vue 的下一个更新周期
    const wrapEl = unref(wrapRef) // 获取未包装的包裹元素的值
    if (!wrapEl) return // 如果包裹元素不存在，则返回
    const AMap = (window as any).AMap // 获取全局的 AMap 对象

    // 创建一个新的 AMap.Map 实例，并将其绑定到包裹元素上
    const map = new AMap.Map(wrapEl, {
        zoom: 15,
        center: [116.397428, 39.90923],
        viewMode: '3D'
    })

    AMap.plugin(['AMap.HawkEye'], () => {
        // 将缩略图控件添加到地图实例中
        map.addControl(new AMap.HawkEye())
    })
}

AMap.plugin(['AMap.HawkEye'], () => {
        // 将缩略图控件添加到地图实例中
        map.addControl(new AMap.HawkEye())
    })

在Vue 3中引入高德地图时，如果地图拖动不了其他地方，可能是由于以下原因：

1. 容器尺寸问题：检查包裹地图的容器元素的尺寸设置。确保容器具有足够的宽度和高度以容纳地图，并且不会被其他元素覆盖。

2. CSS 样式问题：检查容器元素的 CSS 样式，确保没有设置不正确的定位或溢出属性。地图容器应该使用适当的 CSS 属性（例如position: relative）来确保地图可以正确地进行定位和拖动。

3. 脚本加载问题：确认高德地图的相关脚本和依赖已经正确加载，并且没有出现任何错误或警告。可以检查浏览器的开发者工具控制台，查看是否有与地图加载相关的错误信息。

4. 地图初始化设置：检查地图初始化设置，包括缩放级别、中心点位置和视图模式。确保这些设置正确，以便在地图加载后能够正确显示和拖动地图。

如果问题仍然存在，可以提供更多关于你的代码和具体情况的信息，以便更好地理解问题并提供更精确的帮助。

//进行地图初始化
const initMap = async () => {
    await toPromise() // 等待脚本加载完成的 Promise 解析
    await nextTick() // 等待 Vue 的下一个更新周期
    const wrapEl = unref(wrapRef) // 获取未包装的包裹元素的值
    if (!wrapEl) return // 如果包裹元素不存在，则返回
    const AMap = (window as any).AMap // 获取全局的 AMap 对象

    const lineArr = data.map((item) => [item.longitude, item.latitude])

    // 创建一个新的 AMap.Map 实例，并将其绑定到包裹元素上
    const map = new AMap.Map(wrapEl, {
        center: [116.397428, 39.90923]
    })

    const marker = new AMap.Marker({
        // Map: 要显示该marker的地图对象
        map: map,
        // LngLat: 点标记在地图上显示的位置，默认为地图中心点，数组类型的格式也可以
        // 或 position: new AMap.LngLat(116.478935, 39.997761),
        position: lineArr[0],
        // String/Icon: 需在点标记中显示的图标。可以是一个本地图标地址，或者Icon对象。有合法的content内容时，此属性无效
        icon: 'https://webapi.amap.com/images/car.png',
        /*
        Pixel: 点标记显示位置偏移量，默认值为Pixel(-10,-34)
        Marker指定position后，默认以marker左上角位置为基准点，对准所给定的position位置，若需使marker指定位置对准在position处，需根据marker的尺寸设置一定的偏移量
        */
        offset: new AMap.Pixel(-26, -13),
        // Boolean: 是否自动旋转。点标记在使用moveAlong动画时，路径方向若有变化，点标记是否自动调整角度，默认为false。广泛用于自动调节车辆行驶方向
        autoRotation: true,
        // Number: 点标记的旋转角度，广泛用于改变车辆行驶方向
        angle: -90
    })

    // 绘制整条轨迹
    const polyline = new AMap.Polyline({
        // Map: 要显示该polyline的地图对象
        map: map,
        // Array: 折线的节点坐标数组
        path: lineArr,
        // Boolean: 是否延路径显示白色方向箭头,默认false。Canvas绘制时有效，建议折线宽度大于6时使用
        showDir: true,
        // String: 线条颜色，使用16进制颜色代码赋值。默认值为#006600
        strokeColor: '#28F',
        // Number: 线条透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
        strokeOpacity: 1,
        // Number: 线条宽度，单位：像素
        strokeWeight: 6,
        // String: 线样式，实线:solid，虚线:dashed
        strokeStyle: 'solid'
    })
}

地图的创建

地图加载完成

地图加载完成事件 map.on("complete")

        

地图的销毁

地图的销毁 map.destroy

       

创建、销毁地图

                    创建地图         销毁地图