引入百度MapAPI

Hello World

完整的Demo例程可参考相关下载。

引入百度MapAPI的头文件

首先将百度MapAPI提供的头文件和静态库(.a)文件拷贝到您的工程目录下,在XCode中添加新的文件Group,引入百度MapAPI提供的头文件(请使用xcode 4.X以上平台)。

在您需要使用百度MapAPI的文件中添加以下代码

  1. #import "BMapKit.h"   

引入静态库文件

百度MapAPI提供了模拟器和真机两中环境所使用的静态库文件,分别存放在libs/Release-iphonesimulator和libs/Release-iphoneos文件夹下。有两种方式可以引入静态库文件:

第一种方式:直接将对应平台的.a文件拖拽至XCode工程左侧的Groups&Files中,缺点是每次在真机和模拟器编译时都需要重新添加.a文件;

第二种方式:使用lipo命令将设备和模拟器的.a合并成一个通用的.a文件,将合并后的通用.a文件拖拽至工程中即可,具体命令如下:
lipo –create Release-iphoneos/libbaidumapapi.a Release-iphonesimulator/libbaidumapapi.a –output libbaidumapapi.a

第三种方式:

1.将API的libs文件夹拷贝到您的Application工程跟目录下

2.在XCode的Project -> Edit Active Target -> Build -> Linking -> Other Linker Flags中添加-ObjC

3.设置静态库的链接路径,在XCode的Project -> Edit Active Target -> Build -> Search Path -> Library Search Paths中添加您的静态库目录,比如"$(SRCROOT)/../libs/Release$(EFFECTIVE_PLATFORM_NAME)",$(SRCROOT)宏代表您的工程文件目录,$(EFFECTIVE_PLATFORM_NAME)宏代表当前配置是OS还是simulator

注:静态库中采用ObjectC++实现,因此需要您保证您工程中至少有一个.mm后缀的源文件(您可以将任意一个.m后缀的文件改名为.mm),或者在工程属性中指定编译方式,即将XCode的Project -> Edit Active Target -> Build -> GCC4.2 - Language -> Compile Sources As设置为"Objective-C++"

引入系统framework

百度MapAPI中提供了定位功能和动画效果,v2.0.0版本开始使用OpenGL渲染,因此您需要在您的XCode工程中引入CoreLocation.framework和QuartzCore.framework、OpenGLES.framework、SystemConfiguration.framework、CoreGraphics.framework。 添加方式:右键点击Xcode工程左侧的Frameworks文件夹,add->Existing Frameworks,在弹出窗口中选中这几个framework,点击add即可。

引入mapapi.bundle资源文件

mapapi.bundle中存储了定位、默认大头针标注View及路线关键点的资源图片,还存储了矢量地图绘制必需的资源文件。如果您不需要使用内置的图片显示功能,则可以删除bundle文件中的image文件夹。您也可以根据具体需求任意替换或删除该bundle中image文件夹的图片文件。 添加方式:将mapapi.bundle拷贝到您的工程目录,直接将该bundle文件托拽至XCode工程左侧的Groups&Files中即可。若您需要替换定位、指南针的图标,请保留原文件名称,否则不显示替换的新图片,默认大头针标注与路线关键点的新图片名称可自定义名称。 
SDK资源文件里存放的有:
map.png map.png map.png map.png

初始化BMKMapManager

在您的AppDelegate.h文件中添加BMKMapManager的定义

  1. @interface BaiduMapApiDemoAppDelegate : NSObject <UIApplicationDelegate> {   
  2.        UIWindow *window;    
  3.        UINavigationController *navigationController;     
  4.        BMKMapManager* _mapManager;    
  5. }  

在您的AppDelegate.m文件中添加对BMKMapManager的初始化,并填入您申请的授权Key,示例如下

  1. - (BOOL)application:(UIApplication *)application   
  2. didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {       // 要使用百度地图,请先启动BaiduMapManager  
  3.     _mapManager = [[BMKMapManager alloc]init];   
  4. // 如果要关注网络及授权验证事件,请设定     generalDelegate参数  
  5.     BOOL ret = [_mapManager start:@"在此处输入您的授权Key"  generalDelegate:nil];  
  6.     if (!ret) {  
  7.         NSLog(@"manager start failed!");  
  8.     }  
  9. // Add the navigation controller's view to the window and display.  
  10.     [self.window addSubview:navigationController.view];  
  11.     [self.window makeKeyAndVisible];  
  12.    return YES;  
  13. }  

创建BMKMapView

在您的ViewController.m文件中添加BMKMapView的创建代码,示例如下

  1. - (void)viewDidLoad {  
  2.     [super viewDidLoad];  
  3.     BMKMapView* mapView = [[BMKMapView alloc]initWithFrame:CGRectMake(0, 0, 320, 480)];  
  4.     self.view = mapView;      
  5. }  

自2.0.0起,BMKMapView新增viewWillAppear、viewWillDisappear方法来控制BMKMapView的生命周期,并且在一个时刻只能有一个BMKMapView接受回调消息,因此在使用BMKMapView的viewController中需要在viewWillAppear、viewWillDisappear方法中调用BMKMapView的对应的方法,并处理delegate,代码如下:

  1. (void)viewWillAppear:(BOOL)animated    
  2. {    
  3.     [_mapView viewWillAppear];    
  4.     _mapView.delegate = self; // 此处记得不用的时候需要置nil,否则影响内存的释放    
  5. }    
  6. -(void)viewWillDisappear:(BOOL)animated    
  7. {    
  8.     [_mapView viewWillDisappear];    
  9.       _mapView.delegate = nil; // 不用时,置nil    
  10. }    

编译,运行,效果如下图所示:


map.png 
默认地图已经可以支持多点触摸,双击放大,多点单击缩小等操作,并都附带动画效果。

转载:http://developer.baidu.com/map/sdkiosdev-2.htm
### 如何在 Vue 中引入并配置百度地图 API 要在 Vue 项目中成功引入并配置百度地图 API,可以按照以下方式实现: #### 1. 注册获取 AK 首先,在使用百度地图 API 前,需要前往百度开放平台注册账号,并创建应用以获得访问密钥(AK)。这是调用百度地图服务的前提条件[^2]。 #### 2. 创建异步加载脚本 为了动态加载百度地图的 JavaScript 文件,可以通过创建一个工具函数来完成。以下是基于 Vue 的异步加载方案之一: ```javascript // utils/map.js export function loadBaiduMap(ak) { return new Promise((resolve, reject) => { if (window.BMapGL && typeof window.BMapGL.Map === "function") { resolve(window.BMapGL); } else { window.init = () => { if (!window.BMapGL || typeof window.BMapGL.Map !== "function") { reject(new Error("Failed to initialize BMapGL")); } resolve(window.BMapGL); }; const script = document.createElement("script"); script.type = "text/javascript"; script.src = `https://api.map.baidu.com/api?v=3.0&type=webgl&ak=${ak}&callback=init`; script.onerror = () => reject(new Error("Script failed to load")); document.head.appendChild(script); } }); } ``` 此代码片段通过动态插入 `<script>` 标签的方式加载百度地图库,并支持回调机制以确保资源加载完成后执行后续逻辑[^3]。 #### 3. 在 Vue 组件中集成百度地图 下面是一个完整的 Vue 单文件组件示例,展示了如何结合前面定义好的工具函数渲染一张简单的地图: ```vue <template> <div class="map-container"> <div ref="mapContainer" class="baidu-map"></div> </div> </template> <script setup> import { ref, onMounted } from "vue"; import { loadBaiduMap } from "@/utils/map"; const mapContainer = ref(null); onMounted(async () => { const ak = "your_api_key_here"; // 替换为实际申请到的应用 AK try { const BMapGL = await loadBaiduMap(ak); const map = new BMapGL.Map(mapContainer.value); // 初始化地图实例 const point = new BMapGL.Point(116.404, 39.915); // 定义中心点经纬度 map.centerAndZoom(point, 15); // 设置缩放级别和初始位置 } catch (error) { console.error("Error initializing Baidu Map:", error.message); } }); </script> <style scoped> .map-container { width: 100%; height: 400px; } .baidu-map { width: 100%; height: 100%; } </style> ``` 在此模板中,我们利用了 Vue Composition API (`setup`) 来管理生命周期钩子 `onMounted` 和响应式变量 `ref`。当组件挂载完毕后会自动触发地图初始化过程[^1]。 --- ### 注意事项 - **跨域问题**:如果遇到因浏览器安全策略引发的地图显示异常,请确认服务器端已正确配置 CORS 头部信息。 - **性能优化**:对于频繁使用的场景建议将地图加载逻辑封装成独立插件形式以便复用。 - **版本兼容性**:不同版本间可能存在接口差异,请始终查阅最新文档验证功能可用性[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值