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 相关文章推荐
jquery中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
javascript闭包的理解和实例
Aug 12 Javascript
js导出格式化的excel 实例方法
Jul 17 Javascript
让alert不出现弹窗的两种方法
May 18 Javascript
jquery实现一个简单好用的弹出框
Sep 26 Javascript
浅谈js中变量初始化
Feb 03 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
基于vue循环列表时点击跳转页面的方法
Aug 31 Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 Javascript
TypeScript类型声明书写详解
Aug 28 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 Javascript
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网站提速三大“软”招
2006/10/09 PHP
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
淘宝搜索框效果实现分析
2011/03/05 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
Javascript 按位左移运算符使用介绍(
2014/02/04 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
Vue响应式原理详解
2017/04/18 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
JavaScript实现好看的跟随彩色气泡效果
2020/02/06 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
Python中实现对list做减法操作介绍
2015/01/09 Python
Python如何实现文本转语音
2016/08/08 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
python进程和线程用法知识点总结
2019/05/28 Python
python实现动态创建类的方法分析
2019/06/25 Python
python命令行参数用法实例分析
2019/06/25 Python
python实现在线翻译功能
2020/03/03 Python
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
劳资协议书范本
2014/04/23 职场文书
小班上学期评语
2014/05/05 职场文书
驻村工作先进事迹
2014/08/14 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
详解Golang如何优雅的终止一个服务
2022/03/21 Golang
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js
python和anaconda的区别
2022/05/06 Python
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android