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的时间段实现代码
Aug 02 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
jQuery+easyui中的combobox实现下拉框特效
Feb 27 Javascript
jquery表单对象属性过滤选择器实例分析
May 18 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
vue addRoutes路由动态加载操作
Aug 04 Javascript
JS前端可视化canvas动画原理及其推导实现
Aug 05 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
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
PHPMailer发送邮件
2016/12/28 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
js验证表单大全
2006/11/25 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
js有序数组的连接问题
2013/10/01 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
使用python绘制人人网好友关系图示例
2014/04/01 Python
粗略分析Python中的内存泄漏
2015/04/23 Python
python中import与from方法总结(推荐)
2019/03/21 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
大学学习生活感言
2014/01/18 职场文书
护士自我鉴定总结
2014/03/24 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
机房搬迁方案
2014/05/01 职场文书
竞赛口号大全
2014/06/16 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
司机岗位职责
2015/02/04 职场文书
七年级生物教学反思
2016/02/20 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
教你怎么用python实现字符串转日期
2021/05/24 Python