vue百度离线地图v3.0---初始化地图

顾鸟

已于 2022-06-20 20:23:07 修改

阅读量1.3k

点赞数 2

分类专栏：百度离线地图文章标签： vue.js 前端 javascript

于 2021-07-21 11:26:23 首次发布

本文链接：https://blog.csdn.net/qq_40881695/article/details/118961261

版权

百度离线地图专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 百度离线文件

百度网盘下载：https://pan.baidu.com/s/1Lz5BGeKD6lr4x36hRLyepQ 提取码：rnij

2. 百度离线地图瓦片下载器

百度网盘下载：https://pan.baidu.com/s/1L5lWrxwAi4RhCtYfo4rMJQ 提取码：t64l

3. vue cli3.0中使用

3.1 把百度资源文件解压到public/static下
在这里插入图片描述

3.2 index.html 加载map_load文件
记住文件路径不要用相对路径会报 Uncaught SyntaxError: Unexpected token <
提示：出错

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title>title</title>
    <script src="<%= BASE_URL %>static/map_load.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

3.3 修改加载离线地图的配置信息，这里要注意瓦片图的后缀，如下：
在这里插入图片描述

3.3 页面上使用

 <template>
   <div id="container"></div>
 </template>
 
 <script>
 export default {
   data() {
     return {}
   },
   mounted() {
     var map = new BMap.Map('container')
     var point = new BMap.Point(117.161856, 31.785556) // 创建点坐标
     map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
     map.setCurrentCity('肥西') // 设置地图显示的城市 此项是必须设置的
     map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
   }
 }
 </script>
 <style scoped>
 #container {
   height: 100vh;
 }
 </style>

记住不要在 create里面加载不然会报错，point的位置需要改成下载的瓦片中的位置，不然不显示地图，其他问题可参考下面👇🏻的链接。

参考链接

https://blog.csdn.net/bienaohaoma/article/details/105806932

https://blog.csdn.net/wml00000/article/details/82219015

顾鸟

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue百度离线地图v3.0---初始化地图

1. 百度离线文件百度网盘下载：https://pan.baidu.com/s/1Lz5BGeKD6lr4x36hRLyepQ 提取码：rnij2. 百度离线地图瓦片下载器百度网盘下载：https://pan.baidu.com/s/1L5lWrxwAi4RhCtYfo4rMJQ 提取码：t64l3. vue cli3.0中使用3.1 把百度资源文件解压到public/static下3.2 index.html 加载map_load文件记住文件路径不要用相对路径
复制链接

扫一扫