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 $.ajax入门应用二
Nov 19 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 Javascript
js编写的treeview使用方法
Nov 11 Javascript
浅谈javascript中执行环境(作用域)与作用域链
Dec 08 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
Jan 01 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 Javascript
vue中渲染对象中属性时显示未定义的解决
Jul 31 Javascript
让Vue响应Map或Set的变化操作
Nov 11 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
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
2020/11/09 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
[00:32]2018DOTA2亚洲邀请赛VGJ.T出场
2018/04/03 DOTA
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
Python实现选择排序
2017/06/04 Python
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
NumPy中的维度Axis详解
2019/11/26 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
J2EE中常用的名词进行解释
2015/11/09 面试题
如何理解transaction事务的概念
2015/05/27 面试题
小组合作学习反思
2014/02/18 职场文书
高三学习决心书
2014/03/11 职场文书
黄金酒广告词
2014/03/21 职场文书
金融系毕业生自荐书
2014/07/08 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
2016年小学生迎国庆广播稿
2015/12/18 职场文书