在Vue中使用高德地图开发工具

╰+哭是因爲堅強的太久メ 2023-07-10 11:10 41阅读 0赞

在Vue中使用高德开发工具非常简单，只需要在你的`public`中的`index.html`中，导入一条链接即可。

一般使用高德地图中，里面有各种各样的插件，你可以直接在链接上跟上插件名，直接同步加载插件。

具体可以看下官方文档，讲的很详细  
[https://lbs.amap.com/api/javascript-api/guide/abc/plugins][https_lbs.amap.com_api_javascript-api_guide_abc_plugins]

然后在在`vue.config.js`中加入高德的配置，如果没有这个js文件，你可以在项目根目录新建一个就好了

module.exports = { 
        configureWebpack(config) { 
            config.externals = { 
                'AMap': 'AMap', // 高德地图配置
            }
        }
    }

使用的时候

<template>
      <div class="map_box">
        <div
          class="map"
          id="map"
        >
        </div>
      </div>
    </template>
    
    <script>
    import AMap from "AMap"
    var map
    export default { 
      mounted() { 
        this.MapInit();
      },
      methods: { 
        //初始化高德地图
        MapInit() { 
          mapObj = new AMap.Map("mapId", { 
            zoom: 12, //缩放级别
            center: [116.39, 39.9], //地图中心点
          });
          //然后你还可以加载高德的一些插件，加载插件的时候注意下作用域问题，绑在那个变量里面，因为要保证后面一些事件调用这些插件
          AMap.plugin(["AMap.ToolBar", "AMap.Driving"], function() { 
            //异步同时加载多个插件
            var toolbar = new AMap.ToolBar();
            mapObj.addControl(toolbar);
            var driving = new AMap.Driving(); //驾车路线规划
            driving.search(/*参数*/);
          });
        },
      },
    };
    </script>
    
    <style>
    .map { 
      width: 100%;
      height: 600px;
    }
    </style>

这个时候就可以使用了

个人水平有限，有问题欢迎大家留言指导，仅供学习和参考。

学海无涯！努力二字，共勉！

[https_lbs.amap.com_api_javascript-api_guide_abc_plugins]: https://lbs.amap.com/api/javascript-api/guide/abc/plugins