高德地图不显示问题

Mtao&

已于 2022-08-17 10:26:45 修改

阅读量2.3k

点赞数

分类专栏：高德地图文章标签：前端 javascript vue.js

于 2022-05-13 09:34:43 首次发布

本文链接：https://blog.csdn.net/qq_45186619/article/details/124745479

版权

高德地图专栏收录该内容

1 篇文章

订阅专栏

本文指导如何使用高德地图API在Vue应用中实现3D地图及实时交通层，包括下载依赖、配置Web端开发者Key，并展示了关键代码片段。遇到问题时，建议更新到1.4.15版本并创建官方实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

高德地图刚开始不会操作照着官网操作,但是出现一点问题, 可以去官网创建一下.下面就直接上代码

下载依赖

   npm  i  @amap/amap-jsapi-loader

<template>
  <div>
    <div id="container"></div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window.AMapSecurityConfig = {
  securityJsCode: "53f1dbb1d3585c00ad5fcad8d4c1fc10",
};
export default {
  name:"GetVueAmap",
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    //不能写在created 里面
    this.initMap()
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "5bf5ba46b673d8ecf0ce3763ee437cd6", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 10, //初始化地图级别
            center: [105.602725, 37.076636], //初始化地图中心点位置
          });
          let trafficLayer = new AMap.TileLayer.Traffic({
            zIndex: 600
          }); 
          this.map.add(trafficLayer);
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script> 

<style lang="less">
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 400px;
}
</style>

如果有不显示的将version改为"1.4.15"

AMapLoader.load({
        key: "5bf5ba46b673d8ecf0ce3763ee437cd6", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })