vue/vuecli引入原生高德地图

雪花女神

已于 2023-05-11 11:24:17 修改

阅读量384

点赞数

分类专栏：地图文章标签：前端

于 2021-11-22 15:48:10 首次发布

本文链接：https://blog.csdn.net/weixin_46279019/article/details/121473078

版权

地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. index.html


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>demo</title>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=YOURKEY"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

2.vue.config.js

module.exports = {
  configureWebpack:{
    externals: {
      'AMap': 'AMap'
    }
  },
};

3.引用页面

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


<script>
export default {
  mounted () {
    this.init()
  },
  methods: {
    init() {
      let map = new AMap.Map('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 scoped>
.map {
  width: 500px;
  height: 500px;
}
</style>

雪花女神

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue/vuecli引入原生高德地图

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>demo</title> <script type="text/javascript" sr
复制链接

扫一扫