vue 初始化高德地图
时间:2022-07-24
本文章向大家介绍vue 初始化高德地图,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
由于项目中需要,但是vue-AMap 又满足不了项目需求。只能赶鸭子上架,看看怎么引入高德原生 地图 api 。( 三大步骤 )
- 登录高德地图,申请个人 key。
- 创建 单独的 .js 文件
- 在 .vue 项目中,import 引入
1.首先在项目根目录创建一个 AMap.js 文件
export default async function MapLoader (key) {
return new Promise((resolve, reject) => {
if (window.AMap) {
window.onload = function () {
resolve(window.AMap)
}
} else {
var script = document.createElement('script');
script.type = 'text/javascript';
script.axync = true;
script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=' + key; // 申请个人 key
script.onerror = reject;
document.head.appendChild(script);
window.onload = function () {
resolve(window.AMap)
}
}
})
}
如果直接在 HTML,通过script 的方式引入,即使添加 async,也不能获取到 AMap 构造函数。
所以,通过 promise 方式,引入 AMap.js 文件
2.在每个需要 AMap 的.vue 组件中,直接 import 引入。
<script>
import MapLoader from '../../AMap' // AMap.js 文件(请核对 项目路径是否正确)
export default {
name: 'Home',
data() {
return {
map: null,
}
},
mounted() {
this.init_map(); // 页面加载,初始化 AMap。
},
methods: {
init_map() {
let that = this
MapLoader('3d053e40e060b0fc8e39fff2023c95c6').then((AMap) => { // MapLoader(key) ---> 申请的个人 key
that.map = new AMap.Map('container', { // html 放置 一个 id = container 的div
mapStyle: 'amap://styles/7e8dadf307af8b4a5da5a98e53fd2657', // *** 地图的背景颜色 ( 可以自己在高德官网 查看如何配置 )
zoom: 13,
resizeEnable: true,
})
AMap.plugin('AMap.Geolocation', function () { // 返回当前的 个人所在的位置 (定位)
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位,默认:true
timeout: 10000, //超过10秒后停止定位,默认:5s
buttonPosition: 'RB', //定位按钮的停靠位置
buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
})
that.map.addControl(geolocation)
geolocation.getCurrentPosition()
AMap.event.addListener(geolocation, 'complete', onComplete)
AMap.event.addListener(geolocation, 'error', onError)
function onComplete(data) {
// data是具体的定位信息
console.log(data)
}
function onError(data) {
// 定位出错
}
})
})
}
},
}
</script>
仅限于 pc端, 移动端还在测试中...........
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- php apache开启跨域模式过程详解
- laravel5.6实现数值转换
- python中return不返回值的问题解析
- php装饰者模式简单应用案例分析
- php常用日期时间函数实例小结
- PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
- 基于laravel缓冲cache的用法详解
- Python使用sys.exc_info()方法获取异常信息
- laravel通用化的CURD的实现
- Laravel修改验证提示信息为中文的示例
- PHP+redis实现微博的推模型案例分析
- Laravel 解决composer相关操作提示php相关异常的问题
- laravel 实现根据字段不同值做不同查询
- php实现获取近几日、月时间示例
- PHP+redis实现微博的拉模型案例详解