百度地图跟angular的结合
我现在做的一个项目是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(); // 初始化地图,设置中心点坐标和地图级别 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 map.setCurrentCity("南昌"); // 设置地图显示的城市 此项是必须设置的 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
这些js代码我一开始是用在body后面的,但是报错了,什么错呢,贴一下
getscript?v=: 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(); // 初始化地图,设置中心点坐标和地图级别 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 map.setCurrentCity("南昌"); // 设置地图显示的城市 此项是必须设置的 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 </script>
就这样,就没报错了,地图也完美呈现了,我去,说到底还是我太蠢了,我还以为真是angular有冲突了,然后转念一想,不可能啊,然后就没往angular的那个百度插件那里专研了。。。
恩 就是这样
百度地图跟angular的结合的更多相关文章
- Angular/Vue调用百度地图+标注点不显示图标+多标注点计算地图中心位置
整理一下~ 一.在vue中调用百度地图 首先当然是申请百度密匙(很简单,不多说) 1.在index.html文件中引入百度地图JavaScript API接口: <script type=& ...
- Angular 调用百度地图API接口
Angular 调用百度地图API接口 参考原文:https://blog.csdn.net/yuyinghua0302/article/details/80624274 下面简单介绍一下如何在Ang ...
- 基于百度地图api + AngularJS 的入门地图
转载请注明地址:http://www.cnblogs.com/enzozo/p/4368081.html 简介: 此入门地图为简易的“广州大学城”公交寻路地图,采用很少量的AngularJS进行inp ...
- angularjs_百度地图API_根据经纬度定位_示例
百度API--Demo地址: http://lbsyun.baidu.com/jsdemo.htm#i8_4 本例是在angular.js使用的百度地图根据经纬度定位的API:(正常的页面写法基本 ...
- ionic2如何调用百度地图
使用ionic2接入百度地图 在index.html中引入百度地图的js类库 <script type="text/javascript" src="http:// ...
- 基于百度地图JavaScript API,员工住址统计
公司一般都有通讯和住址的统计,但是文字化的表格根本就不知道住在哪. 用百度地图就可以轻松解决, 而且公司还经常人员变动,读取excel中的内容,就不用每次还要更改地图文件了. 在遇到需要聚餐在地图中标 ...
- 调用百度地图API的总结
因为项目要用到百度地图,所以先摸索了一下,各种功能官方都有文档,点击可查看,文章的话我就直接写我用到的功能例子了,要用可以直接复制粘贴~ 一.主要涉及到的几个接口(先申请密钥): 1.技术一:坐标转换 ...
- ionic3引用外部插件--百度地图及echart报表的使用
前言 ionic3提供的组件已经相当丰富咯,但是事实上有些特殊的需求,比如使用百度地图,或者第三方插件echart报表插件是,就不能用传统的方式去使用第三方插件咯,如何在Ionic3项目中使用第三方J ...
- 调用百度地图api隐藏版权信息
调用百度地图API隐藏右下角版权信息 商用的话建议不要隐藏,避免侵权. 隐藏前: 隐藏后: .BMap_cpyCtrl { display: none; } .anchorBL { display: ...
随机推荐
- Android开发之注册登录
昨天给大家介绍了一下关于Android端向服务器端发送数据的方法,不过貌似有一点瑕疵,今天经过调试已经解决,在这里给大家介绍一下 貌似Android4.0以后版本的对于网络权限要求变得严格,导致昨天编 ...
- 【大数据】Summingbird(Storm + Hadoop)的demo运行
一.前言 为了运行summingbird demo,笔者走了很多的弯路,并且在国内基本上是查阅不到任何的资料,耗时很久才搞定了demo的运行.真的是一把辛酸泪,有兴趣想要研究summingbird的园 ...
- Azure China (6) SAP 应用在华登陆 Windows Azure 公有云
<Windows Azure Platform 系列文章目录> 2014年07月11日 由世纪互联运营的 Windows Azure 为 SAP 应用提供公有云平台 2014 年 ...
- 关于Entity Framework采用DB First模式创建后的实体批量修改相关属性技巧
Entity Framework采用DB First模式创建实体是比较容易与方便的,修改已创建的实体在个数不多的情况下也是没问题的,但如果已创建的实体比较多,比如10个实体以上,涉及修改的地方比较多的 ...
- 在浏览器输入网址到页面加载完毕中间到底发生了什么?(Browser-->Server)
最近在学习韩老师的php视频,中间有讲到发送请求到服务器返回内容,以前对这个理解并不深刻,虽然以前也知道一部分,这次听了之后收获良多:所以我就画了个流程图,从浏览器输入网址到服务器返回信息,浏览器渲染 ...
- Shiro —— Spring 环境下的使用
一.使用 1.搭建基础环境 (1)导入 Spring 和 Shiro 的 Jar 包 正常导入 spring jar包 导入日志包 log4j-1.2.15.jar slf4j-api-1.6.1.j ...
- Redis使用总结(3):实现简单的消息队列
参考Redis实现简单消息队列 Redis提供了两种方式来作消息队列.一个是使用生产者消费模式模式,另外一个方法就是发布订阅者模式.前者会让一个或者多个客户端监听消息队列,一旦消息到达,消费者马上消费 ...
- ado.net 用c#与数据库连接实现增删改查
ADO.NET: 数据访问技术 就是将C#和MSSQL连接起来的一个纽带 可以通过ADO.NET将内存中的临时数据写入到数据库中 也可以将数据库中的数据提取到内存中供程序调用 是所有数据访问技术的基础 ...
- asp.net session
简介编辑 session对象用于存储特定的用户会话所需的信息 . Session对象的引入是为了弥补HTTP协议的不足,HTTP协议是一种无状态的协议. Session中文是"会话" ...
- 慎用Assembly.LoadFile()和Assembly.LoadFrom()
经测这俩方法会锁住文件,导致程序运行期间无法对load过的程序集文件进行更名/删除/覆盖等等操作,考虑用Assembly.Load()文件字节组替代: Assembly.Load(File.ReadA ...