脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → angular 百度地图

Angular和百度地图的结合实例代码

 更新时间：2016年10月19日 13:51:26   作者：小码农雯  
最近在angular的项目，但是我用直接引用百度地图的方法引进js,写html,js代码，发现报错，接下来通过本文给大家介绍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的那个百度插件那里专研了。。。

您可能感兴趣的文章:

相关文章

  • Angular实现的进度条功能示例

    Angular实现的进度条功能示例

    这篇文章主要介绍了Angular实现的进度条功能,结合实例形式较为详细的分析了angular进度条功能的相关界面布局、功能等操作技巧,需要的朋友可以参考下
    2018-02-02
  • AngularJS 输入验证的原理解析

    AngularJS 输入验证的原理解析

    AngularJS 的输入验证是一个强大的功能,可以帮助开发者确保用户输入的数据是准确和完整的,这篇文章主要介绍了AngularJS 输入验证,需要的朋友可以参考下
    2024-07-07
  • Angular2实现自定义双向绑定属性

    Angular2实现自定义双向绑定属性

    本篇文章主要介绍了Angular 2实现自定义 双向绑定 属性，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程

    Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程

    在Angular的原生指令中有这几个指令用来控制元素的展示与否，ng-show/ng-hide/ng-if和ng-switch。在angular性能优化中，我们也常常会用到它。这篇文章主要给大家介绍了在Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程，需要的朋友可以参考。
    2017-05-05
  • AngularJS监听ng-repeat渲染完成的两种方法

    AngularJS监听ng-repeat渲染完成的两种方法

    这篇文章主要介绍了AngularJS监听ng-repeat渲染完成的两种方法,结合实例形式分析了AngularJS基于自定义指令及广播事件实现监听功能的相关操作技巧,需要的朋友可以参考下
    2018-01-01
  • Angular.JS中指令ng-if的注意事项小结

    Angular.JS中指令ng-if的注意事项小结

    这篇文章主要给大家分享了关于Angular.JS中指令ng-if的一点注意事项，分享出来供大家参考学习，文中介绍的还是相对来说比较详细，对大家具有一定的参考借鉴价值，需要的朋友们下面来一起看看吧。
    2017-06-06
  • AngularJS 日期格式化详解

    AngularJS 日期格式化详解

    AngularJS的日期格式化有两种形式，一种是在HTML页面，一种是在JS代码里，都是用到AngularJS的过滤器$filter
    2015-12-12
  • Angular.JS通过指令操作DOM的方法

    Angular.JS通过指令操作DOM的方法

    这篇文章主要给大家介绍了Angular.JS通过指令操作DOM的方法，文中给出了详细的介绍和示例代码，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-05-05
  • 详解什么是@ngrx/store开发包中的MemoizedSelector

    详解什么是@ngrx/store开发包中的MemoizedSelector

    这篇文章主要为大家介绍了@ngrx/store开发包中的MemoizedSelector使用分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • AngularJS表单验证功能

    AngularJS表单验证功能

    这篇文章主要为大家详细介绍了AngularJS表单验证功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-10-10

最新评论