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验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
jQuery同步提交示例代码
Dec 12 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
javascript实现去除HTML标签的方法
Dec 26 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
解决layer图标icon不加载的问题
Sep 04 Javascript
微信小程序登陆注册功能的实现代码
Dec 10 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 Javascript
js实现前端界面导航栏下拉列表
Aug 27 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
ajax请求前端跨域问题原因及解决方案
Oct 16 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 extract 将数组拆分成多个变量的函数
2010/06/30 PHP
php中全局变量global的使用演示代码
2011/05/18 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
用JavaScript页面不刷新时全选择,全删除(GridView)
2009/04/14 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
Python实现二维有序数组查找的方法
2016/04/27 Python
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
python3库numpy数组属性的查看方法
2018/04/17 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
python批量爬取下载抖音视频
2019/06/17 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
pygame实现打字游戏
2021/02/19 Python
python opencv实现图像配准与比较
2021/02/09 Python
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
HOTEL INFO英国:搜索全球酒店
2019/08/08 全球购物
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
几个MySql的面试题
2013/04/22 面试题
如何写求职信
2014/05/24 职场文书
授权收款委托书范本
2014/10/10 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
公司车辆管理制度
2015/08/04 职场文书
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL
Python学习开发之图形用户界面详解
2021/08/23 Python