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 相关文章推荐
短信提示使用 特效
Jan 19 Javascript
JavaScript 常用函数库详解
Oct 21 Javascript
js null undefined 空区别说明
Jun 13 Javascript
javascript获取选中的文本的方法代码
Oct 30 Javascript
22点关于jquery性能优化的建议
May 28 Javascript
js函数内变量的作用域分析
Jan 12 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
vue实现的下拉框功能示例
Jan 29 Javascript
自定义javascript验证框架示例【附源码下载】
May 31 Javascript
微信小程序点击保存图片到本机功能
Dec 13 Javascript
JS代码编译器Monaco使用方法
Jun 11 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并发对MYSQL造成压力的解决方法
2013/02/21 PHP
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
javascript getElementsByClassName函数
2010/04/01 Javascript
javascript来定义类的规范小结
2010/11/19 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
Python3基础之基本运算符概述
2014/08/13 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
汽车运用工程毕业生自荐信
2013/10/29 职场文书
团日活动总结怎么写
2014/06/25 职场文书
群众路线调研报告范文
2014/11/03 职场文书
关于做家务的心得体会
2016/01/23 职场文书
Nginx配置https的实现
2021/11/27 Servers
Golang日志包的使用
2022/04/20 Golang