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 图像裁剪插件Jcrop的简单使用
May 22 Javascript
基于jquery的放大镜效果
May 30 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
jQuery文字轮播特效
Feb 12 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
基于JavaScript实现抽奖系统
Jan 16 Javascript
Vue组件库发布到npm详解
Feb 17 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
node.js环境搭建图文详解
Sep 19 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
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
javascript 异常处理使用总结
2009/06/21 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
vue 实现通过手机发送短信验证码注册功能
2018/04/19 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
python3.x实现base64加密和解密
2019/03/28 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
python 实现音频叠加的示例
2020/10/29 Python
numba提升python运行速度的实例方法
2021/01/25 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
应届生求职信写作技巧
2013/10/24 职场文书
电气自动化专业职业规划范文
2014/02/16 职场文书
技能竞赛活动方案
2014/02/21 职场文书
个人承诺书格式
2014/06/03 职场文书
授权委托书格式
2014/07/31 职场文书
重阳节活动主持词
2015/07/04 职场文书