vue2,3使用高德离线地图踩坑日记

最新推荐文章于 2024-08-23 22:01:39 发布

weixin_58744386

最新推荐文章于 2024-08-23 22:01:39 发布

阅读量488

点赞数 3

文章标签： vue

本文链接：https://blog.csdn.net/weixin_58744386/article/details/140485548

版权

由于公司车控屏需要在内网情况下调试及使用，在网上也没有太好的文章参考所以琢磨出后发表踩坑日记。

1，瓦片下载工具：链接: https://pan.baidu.com/s/1hYFxvpS6-tYiTF6iFZS1yg?pwd=jn52 提取码: jn52 复制这段内容后打开百度网盘手机App，操作更方便哦

瓦片数据下载建议分批下载

我这里演示1-15级广州市地图瓦片，服务器存放大概这样子其实功能简单只需要瓦片数据就能展示地图！其余文件有可有无

nginx配置端口我改为了8080 配置确保ip能访问就行

2，下载高德离线包：https://webapi.amap.com/maps?v=2.0&key=自己生成的key 如果需要规划路线或者其它功能需要在连接后跟着&plugin=AMap.Driving 其它功能api也可以再往后加！

打开后另存为就行

3，直接上代码

根目录下index.html引入配置如图一


  <script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: '自己的',
    }
  </script>
  <script type="text/javascript" src="http://192.168.1.1:8080/allayers/maps.js"></script>

<div id="map" ref="wrapRef" class="_map"></div>

const wrapRef = ref(null)
let AMapSelf = window.AMap;
function initMap1() {
    const wrapEl = unref(wrapRef);
    let garUrl = new AMap.TileLayer({
        getTileUrl: (a, b, c) => {
            //经纬度转换成本地瓦片所在路径
            let flag = '00000000';
            let zz = c;
            let z = 'L' + zz;
            let xx = a.toString(16);
            let x = 'C' + flag.substring(0, 8 - xx.length) + xx;
            let yy = b.toString(16);
            let y = 'R' + flag.substring(0, 8 - yy.length) + yy;
            return 'allayers/' + z + '/' + y + '/' + x + '.png';
        },
        opacity: 1,
        zIndex: 99
    })
    AMapSelf = new AMap.Map(wrapEl, {  //设置地图容器id
        resizeEnable: true,
        viewMode: "3D",    //是否为3D地图模式
        zoom: 15,           //初始化地图级别
        center: [113.2807, 23.1882], //初始化地图中心点位置
        zooms: [3, 18],
        layers: [garUrl]
    })
    const satrt = [113.2807, 23.1882]
    const end = [113.2763, 23.1818]
    const driving = new AMap.Driving({
        map: AMapSelf,
    }); //驾车路线规划
    driving.search(satrt, end, {
        isOutline: true, // 是否返回带折线的路线规划方案  
    }, (status, result) => {
        if (status === "complete") {
            console.log(status, result, 'status, result')
        } else {
            console.log(status, "获取驾车数据失败：" + result);
        }
    })
}

效果图