Angular和百度地图的结合实例代码


Posted in Javascript onOctober 19, 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 相关文章推荐
JavaScript EasyPager 分页函数
May 25 Javascript
jQuery实现长文字部分显示代码
May 13 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
jQuery的观察者模式详解
Dec 22 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
基于BootStarp的Dailog
Apr 28 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
Mar 06 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 Javascript
Bootstrap Table使用方法解析
Oct 19 #Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 #Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
Oct 19 #Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 #Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 #Javascript
Angular2  NgModule 模块详解
Oct 19 #Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 #Javascript
You might like
PHP安全编程之加密功能
2006/10/09 PHP
codeigniter数据库操作函数汇总
2014/06/12 PHP
php微信公众号开发之简答题
2018/10/20 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
javascript 读取图片文件的大小
2009/06/25 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
BootStrap入门教程(二)之固定的内置样式
2016/09/19 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
python元组操作实例解析
2014/09/23 Python
python实现超市扫码仪计费
2018/05/30 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
Python通过文本和图片生成词云图
2020/05/21 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
毕业生自我鉴定范文
2013/11/08 职场文书
工作交流会欢迎词
2014/01/12 职场文书
目标管理责任书
2014/04/15 职场文书
单位授权委托书范文
2014/08/02 职场文书
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
庆祝教师节标语
2014/10/09 职场文书
2014年纠风工作总结
2014/12/08 职场文书
行政人事主管岗位职责
2015/04/11 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python