文档章节

vue-cli2.X中引入高德地图,将其设为全局对象

o
 osc_g8254g7s
发布于 2019/08/19 20:22
字数 383
阅读 13
收藏 0

精选30+云产品,助力企业轻松上云!>>>

平时一般未用脚手架构建或用webpack构建的项目只要用script标签引入即可,在vue-cli 2.X构建的项目中,需要用如下方式引入高德地图:

  1. 首先在高德地图开放平台中注册开发者账号并获取key,传送门:https://lbs.amap.com/api/javascript-api/guide/abc/prepare
  2. 接下来在cli项目根目录下的index.html中的<header>标签中用script标签引入
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

     

  3. 这一步做好了ok 下一步就是在build目录下找到webpack.base.conf.js下插入如下代码
     1   output: {
     2     path: config.build.assetsRoot,
     3     filename: '[name].js',
     4     publicPath: process.env.NODE_ENV === 'production'
     5       ? config.build.assetsPublicPath
     6       : config.dev.assetsPublicPath
     7   },
     8   externals:{
     9     'AMap':'AMap'
    10   },


    4.下一步,在你要放地图的组件里设置一个存放地图的container,按照高德地图JS API的照做就可以了

TIP:我们经常有时候要把map作为全局对象使用,以便于各组件之间对该地图对象的复用和传值,

  1. 那么我们可以在src目录下新建一个global.vue作为全局组件来设置全局变量,在global.vue中定义:
     1 <template>
     2 </template>
     3 
     4 <script>
     5     const map = '';
     6     export default {
     7         map,
     8     }
     9 </script>
    10 
    11 <style>
    12 </style>
  2. 接下来在要用到该全局变量的组件中 import 使用即可
     1 <script>
     2     import global from '@/global.vue';
     3     export default {
     4         data() {
     5             return {
     6 
     7             }
     8         },
     9 
    10         mounted() {
    11             console.log("全局变量" + global.map);
    12 
    13         },
    14 <script>

     

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

hbase2.1.9 centos7 完全分布式 搭建随记

hbase2.1.9 centos7 完全分布式 搭建随记 这里是当初在三个ECS节点上搭建hadoop+zookeeper+hbase+solr的主要步骤,文章内容未经过润色,请参考的同学搭配其他博客一同使用,并记得根据实际情...

osc_4tfw1dxv
46分钟前
11
0
zookeeper3.5.5 centos7 完全分布式 搭建随记

zookeeper3.5.5 centos7 完全分布式 搭建随记 这里是当初在三个ECS节点上搭建hadoop+zookeeper+hbase+solr的主要步骤,文章内容未经过润色,请参考的同学搭配其他博客一同使用,并记得根据实...

osc_6jhxf9ab
48分钟前
19
0
steam夏日促销悄然开始,用Python爬取排行榜上的游戏打折信息

前言 很多人学习python,不知道从何学起。 很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手。 很多已经做案例的人,却不知道如何去学习更加高深的知识。 那么针对这三类人,...

osc_ur9mmbck
48分钟前
16
0
python 里 certifi 库的作用

python 里 certifi 库的作用 安装了certifi之后,和requests库一样也有一个cacert.pem,可以用编辑器打开cacert.pem,里面包含了很多可信任知名公司的证书/公钥 库的路径,我这里是python2.7...

osc_1x6ycmfm
50分钟前
11
0
干掉"ZooKeeper",阿里为什么不用ZK做服务发现?

  20大进阶架构专题每日送达   链接:yq.aliyun.com/articles/601745   2020年Java面试题库连载中   !   正文   站在未来的路口,回望历史的迷途,常常会很有意思,因为我们会不...

osc_q5m9dzk0
52分钟前
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部