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 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
Jul 01 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 Javascript
js判断出两个字符串最大子串的函数实现方法
Nov 01 Javascript
JavaScript适配器模式详解
Oct 19 Javascript
vue内置指令详解
Apr 03 Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
详解Vue之父子组件传值
Apr 01 Javascript
从0到1搭建element后台框架优化篇(打包优化)
May 12 Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 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基本语法实例总结
2016/09/09 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
PHP中file_put_contents追加和换行的实现方法
2017/04/01 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
Ajax 加载数据 练习代码
2017/01/05 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
分享Python开发中要注意的十个小贴士
2016/08/30 Python
CentOS中升级Python版本的方法详解
2017/07/10 Python
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
Linux常见面试题
2016/10/04 面试题
青年创业培训欢迎词
2014/01/08 职场文书
品牌服务方案
2014/06/03 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
Django框架中表单的用法
2022/06/10 Python