vue里使用百度地图
2019-03-10 11:54:00来源:博客园 阅读 ()
最近公司项目里要用到百度地图,然后查阅了一些资料,并总结了下;
- 首先呢,由于本公司使用的是百度离线地图,那么我们首先需要将百度地图离线包放置static静态文件目录下(我的离线地图包名是“baidu_new_t”),然后在首页入口文件index.html里head标签里引入百度地图需要的js;
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <title>mo</title> 7 <!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你申请的秘钥"></script> -->//在线 8 <script type="text/javascript" src="/static/baidu_new_t/js/apiv.2.0-wy.js"></script> 9 </head> 10 <body> 11 <div id="app"></div> 12 <!-- built files will be auto injected --> 13 </body> 14 <script type="text/javascript"> 15 16 document.body.onmousedown = function(){ 17 return false; 18 } 19 </script> 20 </html>
- 然后在项目里新建一个百度地图组件:地图对象生成方法写在组件mounted方法里面,在需要的地方导入此组件即可使用;
1 <template> 2 <div id="allmap"></div> 3 </template> 4 <script> 5 //import BMap from 'BMap' 6 export default { 7 data(){ 8 return { 9 10 } 11 }, 12 mounted(){ 13 console.log(123123) 14 if(BMap){ 15 var map =new BMap.Map("allmap"); 16 var point =new BMap.Point(116.404, 39.915); 17 map.centerAndZoom(point,15); 18 map.enableScrollWheelZoom();//启用滚轮放大缩小 19 var marker =new BMap.Marker(point); 20 map.addOverlay(marker); 21 } 22 } 23 } 24 </script> 25 <style> 26 #allmap { 27 width: 200px; 28 height: 200px; 29 } 30 </style>
- 注意点
- 本人使用的是离线地图,如果想要使用在线地图,再第一步骤里引入在线js即可;
- 如果使用vue-cli 3.x版本,需要将百度地图离线包放在public文件夹下;
- 需要将script标签写在body标签之前,否则mounted事件里面会存在找不到bmap
原文链接:https://www.cnblogs.com/yecy1992/p/10500058.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 关于jQuery UI 使用心得及技巧 2020-03-29
- js中去掉字串左右空格 2020-03-20
- Js中如何使用sort() 2020-03-18
- vue.js开发环境搭建教程 2020-03-16
- 使用JS在浏览器中判断当前网络连接状态的几种方法 2020-03-12
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash