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 相关文章推荐
[JS]点出统计器
Oct 11 Javascript
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
微信JS接口汇总及使用详解
Jan 09 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
详解vue2 $watch要注意的问题
Sep 08 Javascript
基于webpack.config.js 参数详解
Mar 20 Javascript
webpack4的迁移的使用方法
May 25 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
Aug 22 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 变量定义和变量替换的方法
2009/07/30 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
php过滤敏感词的示例
2014/03/31 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
Prototype使用指南之array.js
2007/01/10 Javascript
js验证模型自我实现的具体方法
2013/06/21 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
JS实现焦点图轮播效果的方法详解
2016/12/19 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
jQuery实现div跟随鼠标移动
2020/08/20 jQuery
微信小程序学习之数据处理详解
2017/07/05 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
2019/01/19 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
python快速查找算法应用实例
2014/09/26 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
opencv 阈值分割的具体使用
2020/07/08 Python
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
教育孩子心得体会
2014/01/01 职场文书
水电工岗位职责
2014/02/12 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
MySQL基础(一)
2021/04/05 MySQL
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS