vue3+ts使用高德离线地图

在Vue3+TS项目中使用离线高德地图，需要先下载离线地图瓦片，然后使用AMap.TileLayer类加载瓦片图层。以下是一个详细的demo：

下载离线地图瓦片
安装高德地图SDK
安装高德地图SDK
在模板中使用地图组件

下载离线地图瓦片

首先需要下载离线地图瓦片，可以在高德地图官网上下载，也可以使用第三方工具下载。下载完成后，将瓦片文件放置在项目的public目录下，例如：public/map。

安装高德地图SDK

在项目中安装高德地图SDK，可以使用npm或yarn安装：

npm install @types/amap-js-api --save-dev

或者

yarn add @types/amap-js-api --dev

安装高德地图SDK

创建地图组件
在Vue3项目中，可以使用setup函数创建地图组件。首先需要引入AMap和AMap.TileLayer类：

import AMap from 'AMap';
import 'AMap.TileLayer';

然后在setup函数中创建地图实例和瓦片图层：

import { defineComponent, onMounted } from 'vue';
import AMap from 'AMap';
import 'AMap.TileLayer';export default defineComponent({setup() {let map: AMap.Map;let tileLayer: AMap.TileLayer;onMounted(() => {// 创建地图实例map = new AMap.Map('map-container', {zoom: 13,center: [116.397428, 39.90923],});// 创建瓦片图层tileLayer = new AMap.TileLayer({zooms: [3, 18],tileSize: 256,getTileUrl: (x: number, y: number, z: number) => {return `/map/${z}/${x}/${y}.png`;},});// 添加瓦片图层到地图map.add(tileLayer);});return {map,};},
});

在上面的代码中，我们创建了一个地图实例和一个瓦片图层。瓦片图层的getTileUrl方法返回瓦片图层的URL，这里使用了相对路径，因为瓦片图层文件已经放置在public/map目录下。

在模板中使用地图组件

最后，在模板中使用地图组件：

<template><div id="map-container" style="height: 500px;"></div>
</template>

这样就可以在Vue3+TS项目中使用离线高德地图了。

vue3+ts使用高德离线地图相关推荐

3、如何搭建高德离线地图服务
谷歌(百度.高德)离线地图开发环境搭建发布时间:2018-01-17 版权: 1.说明离线地图开发环境支持谷歌地图.百度地图.高德地图等等所有常用地图类型,支持在局域网内的地图部署.二次开发. 2 ...
如何在高德离线地图上画面源代码
离线地图开发主要有两部分组成:1.获取离线地图数据:因为离线地图一般都是局域网,所以需要离线地图数据放在内网中使用:2.离线地图服务器搭建以及二次开发接口提供,离线地图是一种服务,就像我们Apache ...
如何在高德离线地图上画线源代码
离线地图开发主要有两部分组成:1.获取离线地图数据:因为离线地图一般都是局域网,所以需要离线地图数据放在内网中使用:2.离线地图服务器搭建以及二次开发接口提供,离线地图是一种服务,就像我们Apache ...
高德离线地图vue-amap的api文档（2）：创建地图，撒点等等
前言: 高德离线地图的使用场景还是很多的,但是他的api在国外,想参考api对网络差的朋友来说不是一件容易的事,对我来说一样,在这里整理下他的api内容. 注:本文是将官网api挪动出来,网好的童鞋想 ...
基于Vue的高德离线地图开发--省市县
基于Vue的高德离线地图离线地图优势环境需要下载地图离线资源包本项目功能具体代码离线地图优势高德地图接口,个人每天免费调用次数为500次,渲染速度受网络波动影响,又或许项目部署在局域网, ...
高德离线地图TMS服务教程
离线地图开发主要有两部分组成:1.获取离线地图数据:因为离线地图一般都是局域网,所以需要离线地图数据放在内网中使用:2.离线地图服务器搭建以及二次开发接口提供,离线地图是一种服务,就像我们Apache ...
BIGEMAP谷歌(百度、高德)离线地图开发环境搭建
谷歌(百度.高德)离线地图开发环境搭建发布时间:2018-01-17 版权: 1.说明离线地图开发环境支持谷歌地图.百度地图.高德地图等等所有常用地图类型,支持在局域网内的地图部署.二次开发. 2 ...
高德离线地图瓦片坐标偏移纠偏
对于地图坐标偏移,以leaflet为例,有如下解决办法方法1.修改leaflet源码,解决地图坐标偏移问题方法2.将点位真实的经纬度经过偏移算法,添加到加密的地图上方法3.直接对离线地图瓦片进行 ...
Android高德地图基本开发/在线高德离线地图开发/断网使用离线地图（Assets文件夹的使用）
文章目录高德SDK基本使用前置操作需求一:显示地图,并以当前所在位置为中心权限申请布局功能代码活动功能代码效果展示需求二:离线地图(直接添加到应用端项目内) 需求三 :点击数据后以数据 ...

vue3+ts使用高德离线地图

在Vue3+TS项目中使用离线高德地图，需要先下载离线地图瓦片，然后使用AMap.TileLayer类加载瓦片图层。以下是一个详细的demo：

下载离线地图瓦片

安装高德地图SDK

安装高德地图SDK

在模板中使用地图组件

vue3+ts使用高德离线地图相关推荐

最新文章

热门文章