Vue 引入AMap高德地图的实现代码
2019-05-19 07:02
1096 查看
本文代码仅针对 Vue CLI 3.x 生成的项目有效,但是在第二步配置的时候,可以直接配置 webpack.externals,所以本引入思路是通用的,并不局限于该项目
资源
引入 AMap
在 public/index.html 文件 </body> 前引入
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=您申请的key值"></script>
配置 Webpack
项目根目录新建配置文件 vue.config.js,填入内容:
module.exports = { configureWebpack: { externals: { AMap: "window.AMap" } } };
在项目中使用
新建 Index.vue 文件,填入内容:
<template> <div> <div style="width: 100vw;height: 100vh" id="container"></div> </div> </template> <script> // eslint-disable-next-line import AMap from "AMap"; export default { name: "Index", data() { return {}; }, mounted() { new AMap.Map("container", { resizeEnable: true, zoom: 11 }); } }; </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 小猿圈web前端Vue引入AMap高德地图实现代码
- vue引入js数字小键盘的实现代码
- nginx+vue.js实现前后端分离的示例代码
- vue中多个倒计时实现代码实例
- vue项目tween方法实现返回顶部的示例代码
- vue动态绑定组件子父组件多表单验证功能的实现代码
- vue 指令之气泡提示效果的实现代码
- Vue全局分页组件的实现代码
- Vue弹出菜单功能的实现代码
- Vue.js实现按钮的动态绑定效果及实现代码
- vue使用mint-ui实现下拉刷新和无限滚动的示例代码
- 基于Vue组件化的日期联动选择器功能的实现代码
- 基于vue 实现token验证的实例代码
- 在vue项目中引入高德地图及其UI组件
- vue实现可视化可拖放的自定义表单的示例代码
- Vue配合iView实现省市二级联动的示例代码
- vue+element UI实现树形表格带复选框的示例代码
- 基于Vue 2和高德地图的地图组件 - vue-amap
- vue.js通过路由实现经典的三栏布局实例代码
- 基于Vue实现后台系统权限控制的示例代码