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 相关文章推荐
对象的类型:本地对象(1)
Dec 29 Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
node+express+jade制作简单网站指南
Nov 26 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
浅谈React高阶组件
Mar 28 Javascript
element-ui上传一张图片后隐藏上传按钮功能
May 22 Javascript
微信小程序后台持续定位功能使用详解
Aug 23 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 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
php构造函数的继承方法
2015/02/09 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
js location.replace与location.reload的区别
2010/09/08 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
理解javascript闭包
2015/12/15 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
Python程序设计入门(4)模块和包
2014/06/16 Python
python字符串对其居中显示的方法
2015/07/11 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
django迁移数据库错误问题解决
2019/07/29 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
用HTML5制作一个简单的弹力球游戏
2015/05/12 HTML / CSS
New delete 与malloc free 的联系与区别
2013/02/04 面试题
2015年人事科工作总结
2015/04/28 职场文书
朋友离别感言
2015/08/04 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
简历自我评价范文
2019/04/24 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL