Vue-Cli 3.0 中配置高德地图的两种方式


Posted in Javascript onJune 19, 2019

 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-Cli 3.0 中配置高德地图的两种方式,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
深入理解vue Render函数
Jul 19 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
Jul 21 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
JS实现Cookie读、写、删除操作工具类示例
Aug 28 Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
vue修饰符.capture和.self的区别
Apr 22 Vue.js
vue axios重复点击取消上一次请求封装的方法
Jun 19 #Javascript
javascript创建元素和删除元素实例小结
Jun 19 #Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 #Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 #Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 #Javascript
ionic4+angular7+cordova上传图片功能的实例代码
Jun 19 #Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 #Javascript
You might like
用PHP程序实现支持页面后退的两种方法
2008/06/30 PHP
php 删除记录实现代码
2009/03/12 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
js 自定义的联动下拉框
2010/02/07 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
初步讲解Python中的元组概念
2015/05/21 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
Python 统计字数的思路详解
2018/05/08 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
python与idea的集成的实现
2020/11/20 Python
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
英国最大的电子零件及配件零售商:Partmaster
2017/04/24 全球购物
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
C语言如何决定使用那种整数类型
2016/11/26 面试题
C/C++ 笔试、面试题目大汇总
2015/11/21 面试题
经典演讲稿范文
2013/12/30 职场文书
甜品店创业计划书
2014/08/14 职场文书
作风大整顿心得体会
2014/09/10 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
年度考核表个人总结
2015/03/06 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技