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 相关文章推荐
javascript动画效果类封装代码
Aug 28 Javascript
jquery 全局AJAX事件使用代码
Nov 05 Javascript
基于JQuery实现分隔条的功能
Jun 17 Javascript
JS图片定时翻滚效果实现方法
Jun 21 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
React中ES5与ES6写法的区别总结
Apr 21 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
Apr 19 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
详解js中的几种常用设计模式
Jul 16 Javascript
鸿蒙系统中的 JS 开发框架
Sep 18 Javascript
js中复选框的取值及赋值示例详解
Oct 18 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
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
2016/12/21 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
2018/07/24 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
解决layui-open关闭自身窗口的问题
2019/09/10 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
Python中的浮点数原理与运算分析
2017/10/12 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
Europcar比利时:租车
2019/08/26 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
大学生毕业自我鉴定范文
2013/09/19 职场文书
大学生就业自荐信
2013/10/26 职场文书
毕业生找工作推荐信
2013/11/21 职场文书
五年后的职业生涯规划
2014/03/04 职场文书
入党函调证明材料
2015/06/19 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android