当前位置: 首页 > news >正文

如何在页面中加入百度地图

        官方文档:jspopularGL | 百度地图API SDK (baidu.com) 

                添加一下代码就可以实现

<!DOCTYPE html>
<html>
<head><meta name="viewport" content="initial-scale=1.0, user-scalable=no"/><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>Baidu Map </title><style type="text/css">html {height: 100%}body {height: 100%;margin: 0px;padding: 0px}#container {height: 100%}</style><script type="text/javascript"src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=1V4mSproiau7AxsArSNKBWqR0ZiyMKNh&s=1"></script>
</head>
<body>
<div id="container"></div>
</body>
<script>var map = new BMapGL.Map("container");          // 创建地图实例var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标map.centerAndZoom(point, 15);                 // 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
</script>
</html>

        在vue中需要这样写

<body>
<div id="app" v-cloak><div id="container"></div>
</div>
</body>
<script>var tableContainer = new Vue({el: '#app',mixins: [sharpMixin],data() {return {}},mounted() {this.initMap();},created() {},methods: {// 获取数据列表refreshList() {},initMap() {var map = new BMapGL.Map("container");          // 创建地图实例var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标map.centerAndZoom(point, 15);                 // 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放},}})
</script>

        在vue中mounted会先一步created执行,所以传值时要注意,map所需要的经纬是否已经实例化,要不然就会出现白屏的情况。 

http://www.lryc.cn/news/261108.html

相关文章:

  • Windows VC++提升当前进程权限到管理员权限
  • 算法leetcode|92. 反转链表 II(rust重拳出击)
  • Chapter 7 - 3. Congestion Management in Ethernet Storage Networks以太网存储网络的拥塞管理
  • 优雅玩转实验室服务器(二)传输文件
  • 动态面板简介以及ERP原型图案列
  • 漏刻有时百度地图API实战开发(12)(切片工具的使用、添加自定义图层TileLayer)
  • python 爬虫 m3u8 视频文件 加密解密 整合mp4
  • mybatis中xml文件容易搞混的属性
  • android Retrofit2.0请求 延长超时操作
  • Axure之动态面板轮播图
  • 一文读懂算法中的时间复杂度和空间复杂度,O(1)、O(logn)、O(n)、O(n^2)、O(2^n) 附举例说明,常见的时间复杂度,空间复杂度
  • LWIP热插拔功能实现
  • android下的app性能测试应主要针对那些方面,如何开展?
  • 【深度学习】注意力机制(二)
  • 学习黑马vue
  • gdb本地调试版本移植至ARM-Linux系统
  • 《Linux C编程实战》笔记:实现自己的ls命令
  • Python个人代码随笔(观看无益,请跳过)
  • Unity中实现ShaderToy卡通火(总结篇)
  • 等保2.0的变化
  • 漏洞复现-网神SecGate3600防火墙敏感信息泄露漏洞(附漏洞检测脚本)
  • ArkTS入门
  • JS中for循环之退出循环
  • 《Global illumination with radiance regression functions》
  • 华南理工C++试卷
  • 0001.WIN7(64位)安装ADS1.2出现L6218错误
  • HBuilderX 配置 夜神模拟器 详细图文教程
  • 10、神秘的“位移主题”
  • 【Linux】dump命令使用
  • 使用 TensorFlow 创建生产级机器学习模型(基于数据流编程的符号数学系统)——学习笔记