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 相关文章推荐
几行代码轻松搞定jquery实现flash8类似的连接效果
May 03 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
javascript实现文本框标签验证的实例代码
Oct 14 Javascript
vue中node_modules中第三方模块的修改使用详解
May 31 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 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读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
自己写的兼容低于PHP 5.5版本的array_column()函数
2014/10/24 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
Js的MessageBox
2006/12/03 Javascript
PPK 谈 JavaScript 的 this 关键字 [翻译]
2009/09/29 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
javascript回调函数详解
2018/02/06 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
python实现屏保计时器的示例代码
2018/08/08 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
聊聊python中的异常嵌套
2020/09/01 Python
final, finally, finalize的区别
2012/03/01 面试题
重阳节登山活动方案
2014/02/03 职场文书
2014全国两会学习心得体会2000字
2014/03/10 职场文书
优秀员工事迹材料
2014/12/20 职场文书
教育教学读书笔记
2015/07/02 职场文书
2015初中教导处工作总结
2015/07/21 职场文书
2016年主题党日活动总结
2016/04/05 职场文书