zoukankan      html  css  js  c++  java
  • vue-cli2.X中引入高德地图,将其设为全局对象

    平时一般未用脚手架构建或用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>
  • 相关阅读:
    dubbo 学习
    JSTL 实现 为Select赋多个值
    Spring MVC 单元测试Demo
    IDEA git commit push revert
    高并发处理
    Redis Expire TTL命令
    Redis 原子操作INCR
    Redis 安装
    慢日志查询
    angularJs 处理多选框(checkbox)
  • 原文地址:https://www.cnblogs.com/lwj-blog/p/11379425.html
Copyright © 2011-2022 走看看