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 相关文章推荐
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
Javascript 事件流和事件绑定
Jul 16 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
jquery 取子节点及当前节点属性值
Jul 25 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
js+html5操作sqlite数据库的方法
Feb 02 Javascript
jQuery解析XML 详解及方法总结
Sep 28 Javascript
JavaScript中绑定事件的三种方式及去除绑定
Nov 05 Javascript
Angular使用Restful的增删改
Dec 28 Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 Javascript
Js数组扁平化实现方法代码总汇
Nov 11 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
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
表单切换,用回车键替换Tab健(不支持IE)
2011/07/20 Javascript
jquery.validate使用时遇到的问题
2015/05/25 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
完美解决通过IP地址访问VUE项目的问题
2020/07/18 Javascript
10款最好的Web开发的 Python 框架
2015/03/18 Python
python使用生成器实现可迭代对象
2018/03/20 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
瑜伽国际:Yoga International
2018/04/18 全球购物
Shell如何接收变量输入
2012/09/24 面试题
亲子拓展活动方案
2014/02/20 职场文书
五年级学生评语
2014/04/22 职场文书
企业文化演讲稿
2014/05/20 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
pycharm无法安装cv2模块问题
2022/05/20 Python