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伸缩的菜单简单示例
Dec 03 Javascript
extjs4 treepanel动态改变行高度示例
Dec 17 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
解析js如何获取css样式
Dec 11 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
js实现显示手机号码效果
Mar 09 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
ES6扩展运算符用法实例分析
Oct 31 Javascript
ReactNative之FlatList的具体使用方法
Nov 29 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 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
php实现多维数组中每个单元值(数字)翻倍的方法
2015/02/16 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
php常用数组函数实例小结
2016/12/29 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
详解Python高阶函数
2020/08/15 Python
python 8种必备的gui库
2020/08/27 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
南京软件公司的.net程序员笔试题
2014/08/31 面试题
生产车间班组长岗位职责
2014/01/06 职场文书
新郎父亲婚宴答谢词
2014/01/11 职场文书
中学家长会邀请函
2014/02/03 职场文书
亲子读书活动方案
2014/02/22 职场文书
行政专员的岗位职责
2014/03/10 职场文书
python全面解析接口返回数据
2022/02/12 Python