あなたはタイルを持っている場合は、この手順を無視することができます。メインプログラムのプラスのブログ、署名に関連した技術交換基プライベートチャットグループ
まず、マップタイルをダウンロードし、
：オフラインマップするようにする手順
の使用1. Visual Studioので抽出したディレクトリ、Visual Studio 2019
2は、プロジェクトを実行し、地図タイルがBaiduMapTile \ binに\デバッグの下で、デフォルトmaptileディレクトリで作成されたダウンロードし、タイルマップは、このディレクトリに格納されています中
3、テストデータは次のBaiduMapTile \ binに\デバッグ\ htmlのディレクトリ、オープンオフラインストリートマップにタイルマップmaptile移動ディレクトリをマップするための.html
あなたは単に今ので、オフラインマップを使用している場合
キーコードとダウンロードTileDownloader.csのタイル計算
二、VUEマップの設定
1は、今下の静的なディレクトリにファイルイメージ、JS、CSSファイルをリソースになる
リソースファイルindex.htmlファイルで導入され、2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Bmap-outline-test</title>
<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>
<!-- built files will be auto injected -->
</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>
注意：それはプロキシリソースがパスをマッピングし、逆nginxの使用するのが最適ですので、マップリソースはメモリオーバーフローVUEプロジェクトにつながる可能性が大きすぎます。
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は+オフラインマップ
