Angular和百度地图的结合实例代码


Posted in Javascript onOctober 19, 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 相关文章推荐
在图片上显示左右箭头类似翻页的代码
Mar 04 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
angular.element方法汇总
Jan 07 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
Aug 05 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
谈谈第三方App接入微信登录 解读
Dec 27 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
基于vue写一个全局Message组件的实现
Aug 15 Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 Javascript
Vue的过滤器你真了解吗
Feb 24 Vue.js
Bootstrap Table使用方法解析
Oct 19 #Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 #Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
Oct 19 #Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 #Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 #Javascript
Angular2  NgModule 模块详解
Oct 19 #Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 #Javascript
You might like
php字符串截取的简单方法
2013/07/04 PHP
php目录操作实例代码
2014/02/21 PHP
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
2015/06/19 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
Jquery Easyui日历组件Calender使用详解(23)
2016/12/18 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
vue的toast弹窗组件实例详解
2018/05/14 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
Python日期操作学习笔记
2008/10/07 Python
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
实习生的自我评价
2014/01/08 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
李开复演讲稿
2014/05/24 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
查摆问题自查报告范文
2014/10/13 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书