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 相关文章推荐
高性能Javascript笔记 数据的存储与访问性能优化
Aug 02 Javascript
深入探究使JavaScript动画流畅的一些方法
Jun 30 Javascript
jquery动态导航插件dynamicNav用法实例分析
Sep 06 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
vue在手机中通过本机IP地址访问webApp的方法
Aug 15 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 Javascript
vue 虚拟DOM的原理
Oct 03 Javascript
如何利用JavaScript实现二叉搜索树
Apr 02 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 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
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
JS中表单的使用小结
2014/01/11 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
javascript 10进制和62进制的相互转换
2014/07/31 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
2017/02/10 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
详解webpack4.x之搭建前端开发环境
2019/03/28 Javascript
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
ES5和ES6中类的区别总结
2020/12/21 Javascript
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
基于Python安装pyecharts所遇的问题及解决方法
2019/08/12 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
保时捷设计:Porsche Design
2019/03/30 全球购物
英国拖鞋购买网站:Bedroom Athletics
2020/02/28 全球购物
建筑学推荐信
2013/11/03 职场文书
电脑专业个人求职信范文
2014/02/04 职场文书
自我查摆剖析材料
2014/10/11 职场文书
房屋认购协议书
2015/01/29 职场文书
家长会后的感想
2015/08/11 职场文书
2019旅游导游工作总结
2019/06/27 职场文书