百度地图跟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(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的那个百度插件那里专研了。。。

恩就是这样

更多专业前端知识，请上【猿2048】www.mk2048.com

百度地图跟angular的结合相关推荐

Angular 调用导入百度地图API接口
Angular 调用百度地图API接口参考原文:https://blog.csdn.net/yuyinghua0302/article/details/80624274 下面简单介绍一下如何在Ang ...
angular使用openlayers6以及加载百度地图
angular中使用openlayers本来是没什么难度的,但是如果要加载百度地图还是有些问题的,在openlayers3中坐标是从原点右上递增,而openlayers6中是右下递增,这就导致使用百度 ...
angular实现百度地图实现电子围栏
百度地图实现电子围栏 1. 电子围栏需求 2. 实现方案 3. 参考链接 4. 主要代码 5. 示例文件和代码 1. 电子围栏需求通过地图实现可绘制区域的电子围栏. 电子围栏应用场景:如app在区域 ...
angular2-baidu-map网站中使用百度地图
效果图 1.安装 npm install angular2-baidu-map --save 2.在主模块中注册 app.module.ts import {BaiduMap} from " ...
html5 加速球效果,css 渐隐渐现、echarts 圆环图、百度地图覆盖物、echarts水球图（360加速球效果）...
说一下知识点: 1.水球是echarts的插件echarts-liquidfill,官网下载-扩展下载中可以拿到,git传送阵https://github.com/ecomfe/echarts-liq ...
百度地图引用报错A parser-blocking, cross site (i.e. different eTLD+1) script
最近公司在搞vue项目,自己独立学习从头开始呀,都是泪.踩了好多坑,正好今天做到一个地方引入百度地图,之前做angular也做过,但是没有遇到这类问题. 百度地图引入首先要申请ak哈.这个网上很多东西 ...
ionic2 百度地图应用
ionic2 百度地图集成 demo: https://github.com/wangzuxing/myionic2prj 1.创建项目工程(命令行方式) ionic start myionic2pr ...
使用Angular8和百度地图api开发《旅游清单》
前言: 本文的目的是通过一步步实现一个旅游清单项目,让大家快速入门Angular8以及百度地图API.我们将收获: Angular8基本用法,架构使用百度地图API实现自己的地图应用解决调用百度地 ...
百度地图android室内定位,百度地图4.0正式发布，主打免费语音导航、室内定位、实时公交和生活搜索 (视频)...
自2010年10月百度地图在塞班平台上线了第一个版本以后,陆续登陆了Android和iPhone平台,据百度地图团队介绍,其最新的用户数已达7000万.今天,百度地图4.0 正式发布(iPhone版 ...

百度地图跟angular的结合

百度地图跟angular的结合相关推荐

最新文章

热门文章