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 相关文章推荐
DOM Scripting中的图片切换[兼容Firefox]
Jun 12 Javascript
iframe子父页面调用js函数示例
Nov 07 Javascript
探讨jQuery的ajax使用场景(c#)
Dec 03 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
JS实现的几个常用算法
Nov 12 Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
Apr 10 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
Apr 30 Javascript
原生js实现随机点名
Jul 05 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 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中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
JSONObject与JSONArray使用方法解析
2020/09/28 Javascript
python实现线程池的方法
2015/06/30 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
python如何统计序列中元素
2020/07/31 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
您的网上新华书店:文轩网
2016/08/24 全球购物
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
什么是GWT的Module
2013/01/20 面试题
Structs界面控制层技术
2013/10/11 面试题
项目经理任命书范本
2014/06/05 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书
创建文明城市倡议书
2015/04/28 职场文书
党支部评议意见
2015/06/02 职场文书
法定授权委托证明书
2015/06/18 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python