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-Easyui 1.2 实现多层菜单效果的代码
Jan 13 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 Javascript
Angular2实现的秒表及改良版示例
May 10 Javascript
mui js控制开关状态、修改switch开关的值方法
Sep 03 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 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和ACCESS写聊天室(十)
2006/10/09 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
React Native中Navigator的使用方法示例
2017/10/13 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
如何对python的字典进行排序
2020/06/19 Python
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
请写出一段Python代码实现删除一个list里面的重复元素
2015/12/29 面试题
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
财务分析个人的自荐书范文
2013/11/24 职场文书
校园广播稿500字
2014/02/04 职场文书
经贸专业毕业生求职信
2014/03/23 职场文书
建设投标担保书
2014/05/13 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
2016高三毕业赠言寄语
2015/12/04 职场文书