高德地图引入 vue初始化高德地图报错‘AMap‘ is not defined

最新推荐文章于 2025-06-06 11:41:46 发布

星空小梦

最新推荐文章于 2025-06-06 11:41:46 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

文章标签：前端 vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_50885665/article/details/123692882

在Vue项目中引入高德地图遇到'AMap' is not defined的错误，通过在.eslintrc.js配置解决。文章介绍了如何使用vue-amap插件实现地图定位、搜索、marker标记点，并展示了自定义marker图标和大小的方法。

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

<template>
  <div class="web-main">
    <div id="container" style="width:1000px; height:900px"></div>
  </div>
</template>
<script>
import { getActionData } from "@/api/manage.js";
export default {
  name: "MidMap",
  data() {
   
    return {
      description: "中间高德地图",
     
    // 地图参数结束
  },
  watch: {},
  created() {
    
  },
  mounted() {
    this.xx();
  },
  methods: {
    xx() {
      var map = new AMap.Map("container", {
        zoom: 15, //级别
        center: [121.473678, 31.230516], //中心点坐标
        viewMode: "2D", //使用3D视图
      });

      // 创建一个 Marker 实例：
      var marker = new AMap.Marker({
        position: new AMap.LngLat(121.473678, 31.230516), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        offset: new AMap.Pixel(-10, -10),
        icon: require("../../../assets/img/real-estate-overview-img/mapdidian.png"),
        // icon: "image/gdmap_icon.png", // 添加 Icon 图标 URL
        title: "北京",
      });
      marker.setLab