vue 使用高德地图

最新推荐文章于 2025-04-09 14:15:04 发布

Echo-潔

最新推荐文章于 2025-04-09 14:15:04 发布

阅读量570

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_44094296/article/details/118753511

版权

vue 专栏收录该内容

13 篇文章

订阅专栏

本文档详细介绍了如何在Vue项目中配置高德地图SDK，包括修改webpack配置，通过直接引入和异步加载两种方式在HTML中加载地图，以及在Vue组件中初始化地图、添加工具栏和缩放控件，最后展示了自定义点标记和信息窗口的实现。

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

1、修改webpac.base.conf.js文件

添加：

externals: {
  'AMap': 'AMap'
}

在这里插入图片描述

2、在`index.html`引入sdk

引入有两种方式：
（1）页面直接引入（一般用这个）

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

（2）异步加载

<script src="http://webapi.amap.com/maps?v=1.4.14&amp;key=您申请的key值&callback=init"></script>
<script>
    function init(){
        var map = new AMap.Map('container', {
            center: [118.68976, 32.068327],
            zoom: 6
        });
        map.plugin(["AMap.ToolBar"], function() {
            map.addControl(new AMap.ToolBar());
        });
    }
</script>

3、在当前需要加载vue页面引入与使用

<template>
  <div class='map_warp'>
    // 地图容器
    <div id="container" style="width:100%; height:600px"></div>
  </div>
</template>

<script>
// 引入 AMap
import AMap from 'AMap'
export default {
  components: {},
  data () {
    return {

    };
  },
  computed: {},
  watch: {},
  created () {

  },
  mounted: function () {
    this.init()
  },
  methods: {
    // 初始化地图
    init: function () {
      var map = new AMap.Map('container', {
        center: [118.68976, 32.068327],
        resizeEnable: true,
        zoom: 10
      })
      // 添加工具
      AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
        map.addControl(new AMap.ToolBar())
        map.addControl(new AMap.Scale())
      })
      var content = `
      <h3>南京江北新区人民法院自由贸易区法庭</h3>
      <p>地址：南京市江北新区滨江大道396号扬子江新金融示范区11号楼</p>
      <p>全国法院系统公益服务热线：12368</p>
      `
      // 添加点标记
      var marker = new AMap.Marker({
        position: new AMap.LngLat(118.68976, 32.068327),
        icon: '',
        label: {
          content: content,
          offset: new AMap.Pixel(-152, -170)
        },
      })
      map.add(marker);
    }
  }
}
</script>
<style lang='scss'>
// 修改点标记lable的样式
#container .amap-marker-label {
  position: absolute;
  z-index: 2;
  border: 1px solid #ccc !important;
  padding: 20px;
  h3,p{
    line-height: 40px;
  }
}
</style>