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.0API进行操作,对于这套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.0v1.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中引入地图(谷歌+高德+腾讯+百度)的更多相关文章

  1. C# 5.0中引入了async 和 await

    C# 5.0中引入了async 和 await.这两个关键字可以让你更方便的写出异步代码. 看个例子: public class MyClass { public MyClass() { Displa ...

  2. vue3.0中的双向数据绑定方法

    熟悉vue的人都知道在vue2.x之前都是使用object.defineProperty来实现双向数据绑定的 而在vue3.0中这个方法被取代了 1. 为什么要替换Object.definePrope ...

  3. C# 9.0中引入的新特性init和record的使用思考

    写在前面 .NET 5.0已经发布,C# 9.0也为我们带来了许多新特性,其中最让我印象深刻的就是init和record type,很多文章已经把这两个新特性讨论的差不多了,本文不再详细讨论,而是通过 ...

  4. Vue组件篇——Vue3.0中使用高德地图

    VUE-CLI 3.0 中配置高德地图 在项目开发中,地图组件 1.首先,需要注册高德开放平台的账号,并在[应用管理]页面[创建新应用],为应用添加Key值 高德开放平台:https://lbs.am ...

  5. vue2.0中引入UEditor的一些坑。。。。

    开发后台系统的时候,富文本编辑器肯定是必不可少的,然后呢~在天朝当然要属百度编辑器(UEditor)最成熟了,功能全面,文档齐全(相对),ui优美(...,对于程序员来说)等等许多方面(MMP,还不是 ...

  6. vue3.0中如何使用ueditor

    1.在官网下载一个ueditor版本[https://ueditor.baidu.com/website/download.html],解压后放到public文件下的static文件中重命名为Edit ...

  7. 如何在 vue 2.0+ 中引入全局的stylus文件,且能正常

    由于stylus在引用时,不能像一般的css文件直接在main.js中引用,就算引用了也会只能使用转换后的css,不能使用里面的函数,方法等,原因可能是:在这里引入会被直接编译成css,不能在别的模板 ...

  8. vue3.0 + ueditor

    公司有个需求,需要做个发送邮件的模版(富文本对于模版的扩展性更好吧) 关于富文本,也找了一些好看且支持vue的,但是功能都没有百度全面 反正这个系统也是自己人用,颜值无所谓了 关于vue2.0+ued ...

  9. vue3系列:vue3.0自定义弹框组件V3Popup|vue3.x手机端弹框组件

    基于Vue3.0开发的轻量级手机端弹框组件V3Popup. 之前有分享一个vue2.x移动端弹框组件,今天给大家带来的是Vue3实现自定义弹框组件. V3Popup 基于vue3.x实现的移动端弹出框 ...

随机推荐

  1. 随手一记,关于Java日期时间格式化

    在Java中,我们大多数情况下格式化日期都是使用simpleDateFormat,比如把一个日期格式化成:2019-12-31的形式,我们一般定义模板为:yyyy-MM-dd的形式. 我们需要注意的是 ...

  2. call、apply和bind的实现

    call方法 基础版, 只能修改指向,不能传参 Function.prototype.myCall = function(context) { // 获取调用者,这里为bar context.fn = ...

  3. vue中v-model的学习

    v-model在表单元素input.radio.checkBox.textarea创建双向数据绑定,他会根据类型选取正确的方法来更新元素,本质不过是语法糖,负责监听用户的输入操作以更新数据并对一些极端 ...

  4. Django自学计划之集装箱货物运输物流仓储一站式ERP系统

    业余开始学习时间:2018年1月 业余学习时间段:每天下班晚饭后时间+无事的星期六和星期天+上班时的空闲时间 自学目标: 1.我们要用管理的思维来写我们的系统! 2.我们要用我们的ERP系统帮助中小集 ...

  5. 使用PageHelper进行分页查询

    service层代码: public Result getDataSetList(String dataCode, String dataName, int pageIndex, int length ...

  6. eclipse快速定位当前类所在位置

    如何快速的找到一个类并且定位它所在的位置呢?这里以搜索Menu类为例说明. 可以通过CTRL + SHIFT +R的组合键,输入Menu 双击Menu.java即可跳转到对应的类上,但此时还不知道此类 ...

  7. 《Asp.Net Core3 + Vue3入坑教程》-Net Core项目搭建与Swagger配置步骤

    简介 <Asp.Net Core3 + Vue3入坑教程> 此教程仅适合新手入门或者前后端分离尝试者.可以根据图文一步一步进操作编码也可以选择直接查看源码.每一篇文章都有对应的源码 教程后 ...

  8. 从零开始使用 webpack5 搭建 react 项目

    本文的示例项目源码可以点击 这里 获取 一.前言 webpack5 也已经发布一段时间了,其模块联邦.bundle 缓存等新特性值得在项目中进行使用.经过笔者在公司实际项目中的升级结果来看,其提升效果 ...

  9. 学习了解使用docker

    学习了解使用docker docker是项目开发部署相关工具容器,本文通过官网等资料阅读学习,简单介绍一些基本使用操作: docker是什么 2.docker安装使用 连接进入docker容器 doc ...

  10. 在Linux中安装MariaDB并添加远程访问

    在Linux中安装MariaDB并添加远程访问 最近学习到了数据库部分,因为有一台台式机一台笔记本换着用,就没有把数据库安装在本机,本来打算用之前买的虚拟空间的数据库的,结果速度太慢用起来太难受了,就 ...