内网项目:vue + 百度离线地图 apiv2.0

如果有了瓦片可以忽略掉这一步。瓦片下载程序 提取码: rl1w

一、下载地图瓦片,

制作离线地图的步骤:
1、用Visual Studio打开解压的目录,这里使用的Visual Studio 2019
内网项目:vue + 百度离线地图 apiv2.0_第1张图片
2、运行项目,下载瓦片地图,默认会在BaiduMapTile\bin\Debug下创建maptile目录,瓦片地图就保存在这个目录中
内网项目:vue + 百度离线地图 apiv2.0_第2张图片

在这里插入图片描述
3、测试地图数据将瓦片地图所在的目录maptile移到BaiduMapTile\bin\Debug\html目录下,打开离线街道地图.html

如果单纯的使用离线地图,现在这样就可以了

瓦片计算和下载的关键代码在 TileDownloader.cs 中

二、vue地图配置

1、将现在的资源文件images、js、css文件都放到static目录下
2、在index.html文件中引入资源文件


<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Bmap-outline-testtitle>
    <script type="text/javascript" src="static/js/apiv2.0_street.js">script>
    <script type="text/javascript" src="static/js/AreaRestriction.js">script>
    <script type="text/javascript" src="static/js/DrawingManager_one_rect.js">script>
    <link rel="stylesheet" href="static/style/DrawingManager.css" />

  head>
  <body>
    <div id="app">div>
    
  body>
html>

3、页面应用

<template>
    <div>
        <div style="width:100%;height:100%;border:1px solid gray;position:absolute;" id="mapShow"></div>
    </div>
</template>

<script>
    export default {
        name: "Bmap-outline",
        data() {
            return {
                map: null
            }
        },
        mounted() {
            this.baiduMap()
        },
        methods: {
            baiduMap() {
                let that = this
                that.map = new BMap.Map("mapShow",{mapType: BMAP_NORMAL_MAP});
                let point = new BMap.Point(116.404, 39.915);
                that.map.centerAndZoom(point,6);
                that.map.addControl(new BMap.NavigationControl());
                that.map.enableScrollWheelZoom(); 
                that.map.enableKeyboard();
            }
        }
    }
</script>

<style scoped lang="scss">
</style>

注意:地图资源过大可能导致vue项目内存溢出所以最好使用nginx反向代理地图资源路径。

server {
        listen       7070;
        server_name  localhost;
        location / {
			root  E:\BaiduMapTile\BaiduMapTile\bin\Debug\maptile;#离线瓦片地图
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

这样就vue+离线地图就做好了
内网项目:vue + 百度离线地图 apiv2.0_第3张图片

你可能感兴趣的:(Vue开发)