vue调用高德地图Web端JS API

最新推荐文章于 2024-07-16 16:09:32 发布

lee_amazing

最新推荐文章于 2024-07-16 16:09:32 发布

阅读量2.8k

点赞数 3

分类专栏：路径规划高德地图文章标签： vue

本文链接：https://blog.csdn.net/lee_amazing/article/details/112574824

版权

路径规划同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

高德地图

2 篇文章 0 订阅

订阅专栏

在网上找了很多vue调用高德地图的方法，可是都各不相同，还有很多因为是老版本，vue-cli不同，我用的是vue-cli 4.0以上的，vue是2.0版本，然后参考一下他们的自己捣鼓出来了。
首先要在高德开放平台获取key
进入官网链接: https://lbs.amap.com/.
右上角控制台注册登录
选择应用管理-我的应用-添加
其中要选择Web端（JS API），ps:Web服务是不一样的。
在这里插入图片描述

然后在public文件夹下的index.html的body中添加

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

接着就可以在页面使用了

<template>
    <div id="amap-container">
    </div>
</template>
 
<script>
export default {
  name: "PathPlanning",
  mounted: function () {
    this.init();
  },
  methods: {
    init: function () {
      var map = new AMap.Map("amap-container", {
        //地图中心位置
        center: [116.397428, 39.90923],
        resizeEnable: true,
        //地图层级
        zoom: 10,
      });
      AMap.plugin(["AMap.ToolBar", "AMap.Scale"], function () {
        //地图缩放移动工具
        map.addControl(new AMap.ToolBar());
        //地图比例尺
        map.addControl(new AMap.Scale());
      });
    },
  },
};
</script>

<style lang="less" scoped>
.amap-container {
   height: 100%;
   width: 100%;
}
</style>