Vue-Cli 3.0 中配置高德地图
vue 中使用高德地图有两种方式
一、vue-amap 组件
官网: https://elemefe.github.io/vue-amap/#/
开始的时候是打算用这个组件做地图功能的,但是尝试之后存在些问题,所以就放弃了,可能是我的使用方式不对。我所遇到的问题: 1. 安装之后使用,始终提示跨域问题。 2. 页面刷新之后地图出不来,第一次进入页面时没问题。因为这两个问题所以放弃了这个组件的使用。我想可能是我哪个地方代码有问题。
二、直接引用高德地图 SDK
因为第一种方式尝试失败了,所以我选择了直接引用SDK的方式。使用这种方式没有出现方式一中存在的问题。直接引用SDK的方式步骤:
1. 在 public 文件夹下的 index.html 中加入
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=你申请的key"></script>
2. 在 vue.config.js 文件中配置 externals
module.exports = {
devServer: {
port: 57103 // 端口号配置
},
configureWebpack: {
externals: {
'AMap': 'AMap' // 高德地图配置
}
}
}
注: vue.config.js 文件要自己创建,vue-cli 3.0 不会自动生成此文件。 此外,修改 vue.config.js 不会触发热加载,也就是修改之后你需要重新 run 一下你的项目,它才能生效。
3. 实际使用
<template>
<div class="box">
<div id="container" style="width:500px; height:300px"></div>
</div>
</template> <script>
import AMap from 'AMap' // 引入高德地图
export default {
mounted () {
this.init()
},
methods: {
init () {
let map = new AMap.Map('container', {
center: [116.397428, 39.90923],
resizeEnable: true,
zoom: 10
})
}
}
}
</script>
注:init() 方法请在 mounted 生命周期中调用,因为如果在 created 阶段调用,会找不到 html 元素 div#container
4. 效果图
Vue-Cli 3.0 中配置高德地图的更多相关文章
- Vue组件篇——Vue3.0中使用高德地图
VUE-CLI 3.0 中配置高德地图 在项目开发中,地图组件 1.首先,需要注册高德开放平台的账号,并在[应用管理]页面[创建新应用],为应用添加Key值 高德开放平台:https://lbs.am ...
- 专访Vue作者尤雨溪:Vue CLI 3.0重构的原因
1.为什么要对 Vue CLI 进行大规模修改? 尤雨溪认为旧版本的 Vue CLI 本质上只是从 GitHub 拉取模版,这种拉模版的方式有几个问题: (1) 在单个模版里面同时支持太多选项会导致模 ...
- Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
- @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件
目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...
- vue cli 4.0.5 的使用
vue cli 4.0.5 的使用 现在的 vue 脚手架已经升级到4.0的版本了,前两日vue 刚发布了3.0版本,我看了一下cli 4 和cli 3 没什么区别,既然这样,就只总结一下vue cl ...
- vue/cli 3.0脚手架搭建
在vue 2.9.6中,搭建vue-cli脚手架的流程是这样的: 首先 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cli 安装成功: 安装完成 ...
- @vue/cli 4.0+express 前后端分离实践
之前总结过一篇vue-cli 2.x+express+json-server实现前后端分离的帖子,@vue/cli3.0及4.0搭建的项目与vue-cli2.x的项目结构有很大的不同.这里对@vue/ ...
- VUE CLI 3.0 安装及创建项目
一.安装 VUE CLI 3.0 官网: https://cli.vuejs.org/ 详细资料可以自己先把官网过一遍. 1. 安装(默认你的电脑上已安装node及npm) npm install ...
随机推荐
- 【Elasticsearch 7 探索之路】(五)搜索相关 Search-API
本节主要讲解 Elasticsearch 的 搜索相关功能 Search-API,讲解什么是 URL Search 和 Request Body Search 的语法,对常用的语法都会一一进行详细介绍 ...
- 牛客剑指offer(持续更新~)
第一题:二维数组的查找 题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数, ...
- Python必学之编译器用哪个好?你用错了吧!
学python要知道怎么用好编译器.当我们编写Python代码时,我们得到的是一个包含Python代码的以.py为扩展名的文本文件.要运行代码,就需要Python解释器去执行.py文件由于整个Pyth ...
- Spring Boot 外部化配置(一)- Environment、ConfigFileApplicationListener
目录 前言 1.起源 2.外部化配置的资源类型 3.外部化配置的核心 3.1 Environment 3.1.1.ConfigFileApplicationListener 3.1.2.关联 Spri ...
- Nginx安装echo模块echo-nginx-module
https://github.com/openresty/echo-nginx-module 这个模块不包含在 Nginx 源码中,安装方法: 1. 首先下载模块源码:https://github.c ...
- Linux-(2)Linux安装
二.Linux 安装 2.1 物理机安装 使用相关镜像制作软件(软碟通等)制作U盘启动盘即可,按照正常的安装步骤安装即可,一般来说(迷你版本)有线网卡直接会有驱动,无线网卡的驱动需要自行编译或者查找. ...
- display:none和visibility:hidden两者的区别
display与元素的隐藏 如果给一个元素设置了display: none,那么该元素以及它的所有后代元素都会隐藏,它是前端开发人员使用频率最高的一种隐藏方式.隐藏后的元素无法点击,无法使用屏幕阅读器 ...
- 据说60%的Java程序员不明白分布式一致性?这次彻底搞懂!
前言 在计算机科学领域,分布式一致性是一个相当重要且被广泛探索与论证问题,首先来看三种业务场景. 1.火车站售票 假如说我们的终端用户是一位经常坐火车的旅行家,通常他是去车站的售票处购买车票,然后拿着 ...
- python基础入门 列表
列表 1.关键字---list 2.定义:用来存储数据可存储多种数据类型 支持索引,切片 是有序的 可变的 3.定义一个列表 l1 = ['列表','字符串','lnh',123,'kk0','ttt ...
- Ubuntu16.04+GTX2070+Driver418.43+CUDA10.1+cuDNN7.6
最近需要用到一台服务器的GPU跑实验,其间 COLMAP 编译过程出错,提示 cuda 版本不支持,cmake虽然通过了,但其实没有找到支持的CUDA架构. cv@cv:~/mvs_project/c ...