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 相关文章推荐
锋利的jQuery 要点归纳(一) jQuery选择器
Mar 21 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
javascript制作loading动画效果 loading效果
Jan 14 Javascript
indexOf 和 lastIndexOf 使用示例介绍
Sep 02 Javascript
详解JavaScript中的every()方法
Jun 08 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
vue中的模态对话框组件实现过程
May 01 Javascript
layui的table中显示图片方法
Aug 17 Javascript
微信小程序实现评论功能
Nov 28 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
isset和empty的区别
2007/01/15 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
php实现获取农历(阴历)、节日、节气的类与用法示例
2017/11/20 PHP
JS解密入门之凭直觉解
2008/06/25 Javascript
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
js 蒙版进度条(结合图片)
2010/03/10 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
小程序实现左滑删除功能
2018/10/30 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
eBay奥地利站:eBay.at
2019/07/24 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
办公室内勤工作职责
2013/12/11 职场文书
物流专业求职信
2014/06/30 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
个人四风对照检查材料
2014/09/26 职场文书
答谢酒会主持词
2015/07/02 职场文书
大学生暑期实践报告
2015/07/13 职场文书
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫