AngularJS 与百度地图的结合实例


Posted in Javascript onOctober 20, 2016

我现在做的一个项目是angular,但是我用直接引用百度地图的方法引进js,写html,js代码,发现,我去,报错了,我一开始还以为是百度地图跟angular有冲突,然后我就去搜索啊,发现angular也有一个百度地图插件,无奈我用了报错了,网上说要用angular2版本才能兼容,但是我又不会下载2版本,所以我就放弃了,然后呢,我又去解决我一开始的那个错误了,发现,玛德我傻逼了,首先来说一下百度地图怎么用吧,很简单,上代码

首先引入js

<script type="text/javascript" src='http://api.map.baidu.com/api?v=2.0&ak=你的秘钥'></script>

说明一下,秘钥你可以在百度地图的api官网申请哈

然后html

<div id='map'></div>

然后到了就直接js代码,其实这些api里面全部都有的,但是我还是贴上来吧

var map = new BMap.Map("map");  // 创建Map实例
        map.centerAndZoom(new BMap.Point(115.864528, 28.687675), 11); // 初始化地图,设置中心点坐标和地图级别
        map.addControl(new BMap.MapTypeControl());  //添加地图类型控件
        map.setCurrentCity("南昌");     // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);   //开启鼠标滚轮缩放

这些js代码我一开始是用在body后面的,但是报错了,什么错呢,贴一下

getscript?v=2.0&ak=你的秘钥&services=&t=20160928173929:1 Uncaught

TypeError: Cannot read property 'fc' of undefined

恩出了这个错,我去,这个错误的解决方法很简单啊

就是把js代码放在你用地图的那个div下面,贴代码

<div id='map'></div>
    <script type="text/javascript">
      var map = new BMap.Map("map");  // 创建Map实例
        map.centerAndZoom(new BMap.Point(115.864528, 28.687675), 11); // 初始化地图,设置中心点坐标和地图级别
        map.addControl(new BMap.MapTypeControl());  //添加地图类型控件
        map.setCurrentCity("南昌");     // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);   //开启鼠标滚轮缩放
    </script>

就这样,就没报错了,地图也完美呈现了,我去,说到底还是我太蠢了,我还以为真是angular有冲突了,然后转念一想,不可能啊,然后就没往angular的那个百度插件那里专研了。。。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
游戏人文件夹程序 ver 3.0
Jul 14 Javascript
javascript 年月日联动实现核心代码
Dec 21 Javascript
javascript中的作用域scope介绍
Dec 28 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
js截取字符串功能的实现方法
Sep 27 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
微信小程序实现tab页面切换功能
Jul 13 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 Javascript
js键盘事件实现人物的行走
Jan 17 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 #Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 #Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 #Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 #Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 #Javascript
JS调用某段SQL语句的方法
Oct 20 #Javascript
Angularjs 设置全局变量的方法总结
Oct 20 #Javascript
You might like
oracle资料库函式库
2006/10/09 PHP
php正则表达式使用的详细介绍
2013/04/27 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
使用PHP处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
php查询内存信息操作示例
2019/05/09 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
javascript document.compatMode兼容性
2010/02/23 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
在vue中使用express-mock搭建mock服务的方法
2018/11/07 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
Python模拟百度登录实例详解
2016/01/20 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
啦啦队口号大全
2014/06/16 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
《植树问题》教学反思
2016/03/03 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
python单向链表实例详解
2022/05/25 Python