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 相关文章推荐
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
手机端转换rem适应
Apr 01 Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
vue项目中使用vue-layer弹框插件的方法
Mar 11 Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 Javascript
JS中作用域以及变量范围分析
Jul 18 Javascript
js+canvas绘制图形验证码
Sep 21 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
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
用Simple Excel导出xls实现方法
2012/12/06 PHP
php读取csc文件并输出
2015/05/21 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
Python 元类使用说明
2009/12/18 Python
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
OpenCV-Python实现轮廓检测实例分析
2018/01/05 Python
python实现多线程行情抓取工具的方法
2018/02/28 Python
python人民币小写转大写辅助工具
2018/06/20 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
汽车专业学生自我评价
2014/01/19 职场文书
关于迟到的检讨书
2014/01/26 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
教师网络培训心得体会
2016/01/09 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书