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的cookie插件
Apr 07 Javascript
异步加载script的代码
Jan 12 Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
JS逻辑运算符短路操作实例分析
Jul 09 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
vue多页面项目中路由使用history模式的方法
Sep 23 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
微信小程序12行js代码自己写个滑块功能(推荐)
Jul 15 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实现HTTP断点续传的方法
2015/06/17 PHP
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
jQuery参数列表集合
2011/04/06 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
js实现数组转换成json
2015/06/26 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
运用js实现图层拖拽的功能
2019/05/24 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
Python里隐藏的“禅”
2014/06/16 Python
Python基础入门之seed()方法的使用
2015/05/15 Python
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
毕业生护理专业个人求职信范文
2014/01/04 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
服装创业计划书范文
2014/02/05 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript
python百行代码实现汉服圈图片爬取
2021/11/23 Python