Vue 3.0 中配置原生高德地图

直接引用高德地图 SDK

1、在根目录 public 文件夹下的 index.html 中加入

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=你申请的key"></script> <!-- 下面这个ui样式暂时不引入也可以 -->
<!-- <script type="text/javascript" src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></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: 100%;height: 800px"></div></div>
</template><script>
import AMap from 'AMap' // 引入高德地图
export default {mounted () {this.init()},methods: {init () {const dom = document.getElementById('amapArea');this.map = new AMap.Map(dom, {resizeEnable: true,zoom: 10,center: [116.397428, 39.90923],showLabel: false //不显示地图文字标记, 终于可以配置了TAT});}}
}
</script>

注：init() 方法请在 mounted 生命周期中调用，因为如果在 created 阶段调用，会找不到 html 元素 div#container

4、效果图

5、剩下的就可以在html中使用高德地图api地图一样了

参考文章：
https://juejin.cn/post/6964668556071927839
https://www.cnblogs.com/similar/p/11050455.html

Vue 3.0 中配置原生高德地图相关推荐

vue.js项目中配置mapbox可视化地图api
1. 本地创建vue.js项目 cmd或者terminal中运行下面的命令开出vue project manager,之后按照所需要配置创建vue.js项目 vue ui 2. 在mapbox官网上申 ...
Vue引用原生高德地图标注
Vue引用原生高德地图标注一.引用高德? 首先在vue项目中的pubic下的index.html的head中引用. 二.在你的模板中设置一个div你的地图容器 <template>< ...
Vue CLI3.0 中使用jQuery 和 Bootstrap
Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Boo ...
vue（移动端）使用高德地图实现精准定位
目录效果图前提准备代码展示效果图两个页面页面一(粗略定位) 点击城市进入页面二 (粗略定位),搜索框输入具体位置(以大连理工大学为例) 点击大连理工大学,回到页面一,并展示精准位置再次点 ...
html调用腾讯地图定位当前位置,vue web项目中调用腾讯地图API获取当前位置的经纬度...
vue web项目中调用腾讯地图API获取当前位置的经纬度 vue web项目中调用腾讯地图API获取当前位置的经纬度在main.js 中添加一下代码 import axios from 'axio ...
anaconda新建python2环境安装不了jupyterlab_Anaconda 5.0.0 JupyterLab 0.27.0 中配置多Python环境支持...
Anaconda 5.0.0 JupyterLab 0.27.0 中配置多Python环境支持概述 Anaconda 5.0.0 中自带了 JupyterLab 0.27.0 版本,这是 Anaco ...
在vue.config.js中配置uglifyjs-webpack-plugin压缩代码
如果vue项目打完包,js文件夹里面只有一个app.js的话,就会在首页加载所有的js代码.如果需要分包打包的话,可以执行以下代码,这样的话每个页面就只会加载对应的js文件,减少首页的负担 1.安装代 ...
在 PyCharm 2017.2.3 中设置 Anaconda 5.0.0 中配置的多Python环境
Anaconda 相关文章请先阅读安全的安装Anaconda3 5.0.0 Windows x86_64 http://blog.csdn.net/hu_zhenghui/article/detai ...
vue 2.0 中函数`return false` 使用
vue 2.0 中函数return false 使用问题在注册页面下,判断输入框是否为空,想把这种函数封装一下,外部调用,返回return false 时,只是终止当前的判断函数,不是终止整个注 ...

Vue 3.0 中配置原生高德地图

直接引用高德地图 SDK

Vue 3.0 中配置原生高德地图相关推荐

最新文章

热门文章