Vue3.0中引入地图(谷歌+高德+腾讯+百度)
1 概述
项目需求需要引入地图,对于目前最新的Vue3.0
,无论是百度/高德/腾讯地图目前还没有适配,只有Vue 2.x
版本的:
目前只有谷歌地图的Vue3.0
适配:
但是没有适配并不代表不能使用,本文的重点就是如何使用这四种地图,不废话了进入正题。
2 谷歌地图
步骤:
- 获取
API Key
- 安装
- 使用
2.1 获取API Key
戳这里按提示进行:
首先点击第一个链接创建项目:
输入项目名字:
戳这里查看自己的凭据:
选择创建凭据里面的API密钥:
将已创建后的密钥复制即可。
2.2 安装
npm install --save vue3-google-map
# 或
cnpm install --save vue3-google-map
# 或
yarn add vue3-google-map
2.3 使用
在需要引入的组件中添加如下示例代码:
<template>
<GoogleMap
api-key="YOUR_GOOGLE_MAPS_API_KEY"
style="width: 100%; height: 500px"
:center="center"
:zoom="15"
>
<Marker :options="{ position: center }" />
</GoogleMap>
</template>
<script>
import { GoogleMap, Marker } from 'vue3-google-map'
export default {
components: { GoogleMap, Marker },
setup() {
const center = { lat: 40.689247, lng: -74.044502 }
return { center }
},
})
</script>
并将KEY
修改为自己的KEY
。
若KEY
没问题的话,运行后即可看到地图,笔者这里遇到了一下错误:
提示说是地图API
还没有激活,点击提示中的链接进行激活:
启用:
但是这里又报了一个错误:
按照控制台提示的链接激活:
激活后即可看到地图。
3 百度地图
步骤:
- 获取
ak
- 安装
- 使用
3.1 获取ak
ak
类似谷歌地图中的API KEY
,戳这里注册百度地图开发者账号,然后创建一个应用:
注意应用类型需要选择浏览器端
,并且需要配置域名限制,若无限制域名需要输入*
。
创建后即可看到ak
:
3.2 安装
使用Vue2.x
的可以从npm
/cnpm
安装:
vue-baidu-map-v3
vue-baidu-map
coalbr-vue-baidu-map
具体查看文档即可。
百度地图目前有4套JS API
:
JavaScript API GL
JavaScript API v2.0
JavaScript API v3.0
JavaScript API Lite
这里以v3.0
的API
进行操作,对于这套API
,官方文档只提供了<script>
引入的方式,因此在Vue3.0
中需要手动引入JS
:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
具体流程为,在Vue
应用下的index.html
直接引入该JS
:
3.3 使用
在需要的组件中创建一个固定宽高的容器:
<div id="container" style="width: 800px;height: 800px"></div>
在mounted()
中创建地图:
mounted(){
var map = new BMap.Map('container')
var point = new BMap.Point(116.404, 39.915)
map.centerAndZoom(point, 15)
map.enableScrollWheelZoom(true)
}
运行效果:
更详细的使用请看官方文档。
4 高德地图
流程:
- 注册账号获取
KEY
- 安装
- 使用
4.1 KEY
戳这里注册高德开放平台账号:
创建:
选择添加:
选择Web端(JS API)
,同时需要域名限制请按提示进行输入:
创建完成后即可看到KEY
。
4.2 安装
高德地图JS API
目前有两个版本:v1.4
/v2.0
,v1.4
的地图只能通过<script>
引入,而在v2.0
中,高德官方额外提供了JSAPI Loader
,可以通过该JSAPI Loader
去加载地图,这里以v2.0
版本进行操作。
JSAPI Loader
使用npm
/cnpm
安装:
npm i @amap/amap-jsapi-loader --save
# 或
cnpm i @amap/amap-jsapi-loader --save
另一种方式是传统的<script>
,但不建议,需要的可以看官方文档。
4.3 使用
在需要的组件中定义一个容器,确定高宽:
<div id="container" style="height: 800px;width: 800px;"></div>
下一步就是import
:
import AMapLoader from '@amap/amap-jsapi-loader';
并在setup()/mounted()
中加载:
setup(){
AMapLoader.load({
"key": "", // 申请好的Web端开发者Key,首次调用 load 时必填
"version": "1.4.15", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
"plugins": [], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
"AMapUI": { // 是否加载 AMapUI,缺省不加载
"version": '1.1', // AMapUI 缺省 1.1
"plugins":[], // 需要加载的 AMapUI ui插件
},
"Loca":{ // 是否加载 Loca, 缺省不加载
"version": '1.3.2' // Loca 版本,缺省 1.3.2
},
}).then((AMap)=>{
var map = new AMap.Map('container', {
zoom:11, //级别
center: [116.397428, 39.90923], //中心点坐标
viewMode:'3D' //使用3D视图
});
}).catch(e => {
console.log(e);
})
},
修改为自己的KEY
,示例效果:
更详细使用请查看官方文档。
5 腾讯地图
步骤类似:
- 注册账号
- 安装
- 使用
5.1 注册账号
戳这里注册账号:
创建KEY
:
5.2 安装
腾讯地图目前同样有两个版本:v1
/v2
,这里以v2
示例。
腾讯地图与百度地图类似,只提供了<script>
去引入地图,因此操作方式与百度地图类似,在index.html
中引入:
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=KEY"></script>
修改为自己的KEY
。
5.3 使用
对应组件创建容器:
<div id="container" style="width: 800px;height: 800px"></div>
mounted()
中引入:
mounted(){
var myLatlng = new qq.maps.LatLng(39.90923,116.397428)
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: qq.maps.MapTypeId.ROADMAP
}
var map = new qq.maps.Map(document.getElementById("container"), myOptions);
}
示例效果:
6 附录:坐标系转换
国内主要有以下三种坐标系:
WGS84
:一种大地坐标系,目前广泛使用的GPS
系统使用的坐标系GCJ02
:又叫火星坐标系/国测局坐标系,中国国家测绘局制订的地理信息系统坐标系统,是WGS84
坐标加密后的坐标系BD09
:百度坐标系,在GCJ02
基础上再次进行加密
而各种地图使用的坐标系如下:
- 谷歌国内地图、高德地图、腾讯地图:
GCJ02
- 百度地图:
BD09
- 谷歌国外地图、
osm
地图等:WGS84
当坐标系不一致时,需要进行转换,这里推荐两个坐标系转换开源库(3.1k
/1.8k
star
):
如果觉得文章好看,欢迎点赞。
同时欢迎关注微信公众号:氷泠之路。
Vue3.0中引入地图(谷歌+高德+腾讯+百度)的更多相关文章
- C# 5.0中引入了async 和 await
C# 5.0中引入了async 和 await.这两个关键字可以让你更方便的写出异步代码. 看个例子: public class MyClass { public MyClass() { Displa ...
- vue3.0中的双向数据绑定方法
熟悉vue的人都知道在vue2.x之前都是使用object.defineProperty来实现双向数据绑定的 而在vue3.0中这个方法被取代了 1. 为什么要替换Object.definePrope ...
- C# 9.0中引入的新特性init和record的使用思考
写在前面 .NET 5.0已经发布,C# 9.0也为我们带来了许多新特性,其中最让我印象深刻的就是init和record type,很多文章已经把这两个新特性讨论的差不多了,本文不再详细讨论,而是通过 ...
- Vue组件篇——Vue3.0中使用高德地图
VUE-CLI 3.0 中配置高德地图 在项目开发中,地图组件 1.首先,需要注册高德开放平台的账号,并在[应用管理]页面[创建新应用],为应用添加Key值 高德开放平台:https://lbs.am ...
- vue2.0中引入UEditor的一些坑。。。。
开发后台系统的时候,富文本编辑器肯定是必不可少的,然后呢~在天朝当然要属百度编辑器(UEditor)最成熟了,功能全面,文档齐全(相对),ui优美(...,对于程序员来说)等等许多方面(MMP,还不是 ...
- vue3.0中如何使用ueditor
1.在官网下载一个ueditor版本[https://ueditor.baidu.com/website/download.html],解压后放到public文件下的static文件中重命名为Edit ...
- 如何在 vue 2.0+ 中引入全局的stylus文件,且能正常
由于stylus在引用时,不能像一般的css文件直接在main.js中引用,就算引用了也会只能使用转换后的css,不能使用里面的函数,方法等,原因可能是:在这里引入会被直接编译成css,不能在别的模板 ...
- vue3.0 + ueditor
公司有个需求,需要做个发送邮件的模版(富文本对于模版的扩展性更好吧) 关于富文本,也找了一些好看且支持vue的,但是功能都没有百度全面 反正这个系统也是自己人用,颜值无所谓了 关于vue2.0+ued ...
- vue3系列:vue3.0自定义弹框组件V3Popup|vue3.x手机端弹框组件
基于Vue3.0开发的轻量级手机端弹框组件V3Popup. 之前有分享一个vue2.x移动端弹框组件,今天给大家带来的是Vue3实现自定义弹框组件. V3Popup 基于vue3.x实现的移动端弹出框 ...
随机推荐
- 【转】ICP算法(Iterative Closest Point迭代最近点算法)
原文网址:https://www.cnblogs.com/sddai/p/6129437.html.转载主要方便随时可以查看,如有版权要求请及时联系. 最近在做点云匹配,需要用c++实现ICP算法,下 ...
- Prometheus时序数据库-内存中的存储结构
Prometheus时序数据库-内存中的存储结构 前言 笔者最近担起了公司监控的重任,而当前监控最流行的数据库即是Prometheus.按照笔者打破砂锅问到底的精神,自然要把这个开源组件源码搞明白才行 ...
- Java基础语法:注释
书写注释是一个非常好的习惯. 注释并不会被执行,是给我们写代码的人看的. Java中的注释有三种: 单行注释(Line comment) 多行注释(Block comment) 文档注释(JavaDo ...
- 看完我的笔记不懂也会懂----Ajax
Ajax(Asynchronous JavaScript And XML) - 本次学习所用到的插件 - XML - JSON - 关于AJAX - HTTP协议 - AJAX重点之XMLHttpRe ...
- 鸿蒙的js开发部模式18:鸿蒙的文件上传到python服务器端
1.首先鸿蒙的js文件上传,设置目录路径为: 构建路径在工程主目录下: 该目录的说明见下面描述: 视图构建如下: 界面代码: <div class="container"&g ...
- SSM整合再回顾
一.spring 前言:提起spring就不得不说到它的IOC和AOP的概念.IOC就是一个对象容器,程序员可以将对象的创建交给spring的IOC容器来创建,不再使用传统的new对象方式,从而极大程 ...
- C# smtp邮件发送
第一种方式发送邮件,不读取配置文件发送邮件,(本地测试可以,但是服务器上不行) /// <summary> /// 发送邮件 /// </summary> /// <pa ...
- PCA——主成分分析
PCA(Principal Components Analysis)主成分分析是一个简单的机器学习算法,利用正交变换把由线性相关变量表示的观测数据转换为由少量线性无关比变量表示的数据,实现降维的同时尽 ...
- [数据结构与算法-13]ST表
ST表 主要用来快速查询静态数据区间最大值 思路 数组\(A[i][j]\)存储数列\(\{a_i\}\)中区间\(i \in [i, i+2^j)\)的最大值 查询时只需要查询\(max\{A[i] ...
- 三分钟教你提升应用推送的ROI
推送是App应用性价比最高也是最直接的营销运营手段,其细节颇多,非常考验运营人员的功力,本文将从ROI角度来分析怎么提升营销类推送的收益.(非IM类.系统类等功能服务型推送) 以一个日活100万的应用 ...