使用angular方式在ionic3工程中使用百度地图（typescript语言，移动端编程）

最新推荐文章于 2024-03-30 22:59:19 发布
最新推荐文章于 2024-03-30 22:59:19 发布
阅读量765 收藏
点赞数
分类专栏： 软件 ionic 文章标签： ionic 前端 angular typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38255285/article/details/87936561
版权
本文介绍了如何在 Ionic3 工程中使用 Angular 和 TypeScript 集成百度地图。首先通过 npm 安装 angular2-baidu-map 包，然后生成页面并配置百度地图API秘钥。在 TypeScript 文件中导入所需头文件，实现根据经纬度查询的功能。由于无法使用百度地图的定位图标，作者选择了自定义图标，并解决了图片在不同环境下的适配问题。在 HTML 页面中设置按钮触发后端定位功能，最终展示地图效果。
摘要由CSDN通过智能技术生成

https://www.npmjs.com/package/angular2-baidu-map

这个应该是官方给的一定指导，我也没怎么看。

终端先安装这个包npm install angular2-baidu-map

终端敲ionic g page baidumapang生成page文件夹

由于是自动生成的，不需要在app.module.ts添加头文件，只需要把百度地图的秘钥填入

申请秘钥网址http://lbsyun.baidu.com/apiconsole/key

选择游览器端，不需要花钱

添加秘钥

@NgModule({
  declarations: [
  ],
  imports: [
    BaiduMapModule.forRoot({ak:'你的秘钥'})
  ],

在baidumapang.ts文件中中导入头文件

import {
  MapOptions, Point, MarkerOptions, 
  NavigationControlOptions, ControlAnchor,
  NavigationControlType, OverviewMapControlOptions, ScaleControlOptions, MapTypeControlOptions, MapTypeControlType,
  GeolocationControlOptions
} from 'angular
最低0.47元/天 解锁文章
是阿晋啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
angular使用百度地图多坐标点自定义图标的事件
qq_40040679的博客
10-24 2245
首先需要在index里面引入你的百度ak。 接着我们的html大概就是下面这样了，自己可以随便该样式的。 其次开始开发我们控制器里面的内容了。 下面我们先创建地图以及中心点 我这里使用的是 Business.request_server(SERVER_URL.接口).doOk(function(data) {//方法请求的，我们获取到接口里面的内容，就是坐
angularjs 封装百度地图API（实现异步加载）
林楠楠的脚趾有点咸的博客
05-28 4423
想用angular封装百度地图api，先吧最基础的异步加载完成，以后需要新功能在慢慢往上加，直接上code不废话。申请百度秘钥APIhttp://lbsyun.baidu.com/apiconsole/key/create //创建应用获取AK这一步不多讲，大家都会，不申请的同学可以使用我调试用的密钥。会在下面贴出来，只能调试用哦。定义service(function() { 'user s
百度地图开发探索 angular7 (typescript) 添加参考点、定位点与自定义弹窗
渐变强的小刘
01-15 1062
添加参考点并获取位置 话不多说，看图说话 分析一下此点和弹窗的组成： 1、上图的蓝色图标为一个marker 2、生成一个marker需要point，生成point需要两个坐标（经纬度） 3、上方的弹窗是依赖于marker生成的（弹窗自定义样式下面会有整理） // 参考点 referencePoint(e: any) { const point = new BMap.Point(e.point.lng, e.point.lat); // 创建point const poiIcon = n
百度地图开发探索 定位功能（搜索获取位置，地图自带定位，点击获取定位） typescript angular
渐变强的小刘
01-15 2576
百度地图定位 定位控件： 如图 // 定位控件 locationControl() { // 添加带有定位的导航控件,就是缩放控件+定位按钮 const navigationControl = new BMap.NavigationControl({ // 靠左上角位置 anchor: BMAP_ANCHOR_TOP_LEFT, // LARGE类型 type: BMAP_NAVIGATION_CONTROL_LARGE, /
Angular-集成-Typescript-版本-Echarts-（附代码）
最新发布
2401_83817689的博客
03-30 539
有需要的话也可以使用 [initOpts] 等 API，这些会在后面介绍然后写一个被广泛流传的 echarts-typescript 例子：})tooltip: {},toolbox: {feature: {},},restore: {},},legend: {data: [‘蒸发量’, ‘降水量’, ‘平均温度’]},xAxis: [
ionic-audio：适用于Ionic 3和Angular 4的音频播放器。可使用Cordova Media插件处理HTML 5音频或本机音频
02-06
尽管原仓库已不再维护，但对于使用Ionic 3和Angular 4开发的应用来说，它仍是一个非常有价值的工具。 ** Ionic Audio的核心功能 ** 1. **跨平台支持**：由于基于Ionic框架，`ionic-audio`能够轻松构建可在Android...
ionic3蓝牙程序（typescript+html语言）
03-04
TypeScript是Angular和Ionic 3的主要编程语言，它提供了静态类型检查，提高了代码质量和可维护性。HTML则用于构建用户界面，结合CSS进行样式设计。 在实现蓝牙串口助手时，你需要安装特定的插件来访问设备的蓝牙...
keyonic-v2：使用Angular v4和Ionic v3的Keycloak移动实现
02-03
版本2增强功能用Angular 4 / Typescript / Ionic 3实现ViewGuard-基于角色保护视图级别的访问使用了更多Keycloak功能并提供了信息要求阿帕奇·科尔多瓦（Apache Cordova） 节点6 LTS 离子3 Keycloak服务器安装...
Ionic-CoreData:Ionic 3 + Angular 4 + RESTful API
05-15
在ionic2-starter-之后ionic2-starter-名称，这是在使用以下ionic start命令时要使用的模板的名称： $ sudo npm install -g ionic cordova $ ionic start mySideMenu sidemenu 然后，要运行它， mySideMenu cd...
angular2百度地图组件
08-10
基于angular2的百度地图组件，该组件主要实现百度地图的异步加载，有关配置部分，大家还是跟着百度地图官方api文档来操作。
wooionic3:使用Ionic 3的WooCommerce商店电子商务应用程序
05-16
伍尼 ... 该应用程序使用WooCommerce API连接到WooCommerce商店，并允许用户浏览产品，类别，订单甚至下订单。 用户/客户可以注册和登录，也可以通过PayPal支付订单。 屏幕截图 Samarth Agarwal的项目
百度地图开发探索 轨迹（路书） typescript angular
渐变强的小刘
01-15 1205
上图为先： 轨迹的组成： 起点、终点、一条线、线上的小车 主要功能： 添加轨迹、小车在轨迹上跑动、小车回到起点、小车回到重点、小车速度调节、轨迹的粗细调节 实现方式：路书 还有一种是在轨迹线不断的对小车进行添加和删除操作，感觉会更灵活，因为可以时刻记录你想要的数据，但是路书是封装好的方式，我也没有研究很全面 添加轨迹 // 画轨迹 drawTrack(trackArr: Array<any>, startOrEnd?: any) { this.lushuPointArr = [];
Angular引入百度地图教程
gaiery的博客
11-28 1487
下面简单介绍一下如何在Angular中使用百度地图。 第一步：申请百度地图密钥(http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey); 第二步：在Angular项目中引入百度地图API文件，在index.html中引入 <script type="text/javascript" src="http://api.map...
基于百度地图api + AngularJS 的入门地图
weixin_30747253的博客
03-26 60
转载请注明地址：http://www.cnblogs.com/enzozo/p/4368081.html 简介： 此入门地图为简易的“广州大学城”公交寻路地图，采用很少量的AngularJS进行input的交互，绝大部分基于百度地图API。 正文： index.html: 1 <!DOCTYPE html> 2 <html> 3 <...
Angular 调用导入百度地图API接口，2024春招BAT面试真题详解
m0_60721649的博客
03-26 501
下面简单介绍一下如何在Angular中使用百度地图。第一步：申请百度地图密钥。第二步：在Angular项目中引入百度地图API文件，在index.html中引入。另外，如果需要去除百度地图左下角的logo，仅需要在styles.scss中添加如下代码就可以了。（但是我个小菜鸡没有去成功）。.anchorBL{
Ionic百度地图插件使用相关问题
wqy的博客
12-16 914
Ionic百度地图插件使用相关问题ionic打包应用获得SHA1ionic命令build生成keytool签名apk查看SHA1签名申请百度SDK安装cordova-plugin-baidumaplocation使用百度地图定位总结 ionic打包应用获得SHA1 ionic命令build ionic打包生成APK命令分为两种ionic cordova build android与ionic co...
typescript：用百度地图，兼容JS的this，报错：Uncaught TypeError: ‘caller‘, ‘callee‘, and ‘arguments‘ properties
临碣秘藏
04-14 628
解决办法，请参考： declare const BMapGL: any; declare const BMAP_STATUS_SUCCESS: number; class GisUtils { public static fetchCurLatLng(onSuccess: (location: any)=>void, onError:(info:any)=>{}){ var geolocation = new BMapGL.Geolocation();
百度地图api使用城市列表组件选择城市、省份获取对应城市信息（省市经纬度）
Dpl0216的博客
09-08 3638
最近在开发地图相关项目的时候，突然有这么一个需求：需要在添加设备的表单选择位置时弹出百度地图的组件，点击地图上的某一处返回对应的经纬度信息。且右上角需要有一个省份城市切换的控制器用来返回相应的省市信息给表单对象`（对用户直接缩小地图切换省份的操作不做出省份切换）`。
在Angular中，Ionic组件库如何实现移动端点击放大图片的功能
06-10
在Ionic中使用Ionic Native插件中的PhotoViewer插件来实现移动端点击放大图片的功能。 首先，需要在Ionic项目中安装PhotoViewer插件： ``` ionic cordova plugin add com-sarriaroman-photoviewer npm install @...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值