在移动应用的发展中，地图是一个非常重要的工具，许多著名的移动应用都源于地图定位和导航的特点。在Weex开发中，如果想使用定位、导航、坐标计算等常用地图功能，可以使用weex-amap插件。

Weex-amap是Goldtech为Weex开发的地图插件。在Eros的开发中，Eros封装了weex-amap，供开发者更多地集成地图功能。像其他插件一样，集成这个插件需要在原始平台中集成。

本文介绍了如何在iOS中集成weex-amap以及它的一些核心功能。本文将介绍以下内容：

1.高德地图开发准备

1.1 IOs高科技地图开发流程简介1.2安卓高科技地图开发流程简介1.3 web高科技地图开发流程简介2 . WEEX-IOs地图组件扩展模式简介

2.1 dwd-weex-AMAP 2.2 dwd-weex-AMAP-标记2.3 dwd-weex-AMAP-信息-窗口2.4 dwd-weex-AMAP-circle 2.5 dwd-weex-AMAP-多边形2.5 dwd-weex-AMAP-polyline 3 . weex-。

3.1 DWD-WEEX-AMAP 3.2 DWD-WEEX-AMAP-标记3.3 DWD-WEEX-AMAP-信息-窗口3.4 DWD-WEEX-AMAP-圆3.5 DWD-WEEX-AMAP-多边形3.6 DWD-WEEX-AMAP-折线4。WEEX-。

4.1 DWD-WEEX-AMAP 4.2 DWD-WEEX-AMAP-标记4.3 DWD-WEEX-AMAP-信息-窗口4.4 DWD-WEEX-AMAP-circle 4.5 DWD-WEEX-AMAP-polygon 4.6 DWD-WEEX-AMAP-折线5。获取地图数据

5.1 weex-iOS地图骑行路线规划5.2 weex-android地图骑行路线规划5.3 weex-web地图骑行路线规划

准备工作/即将工作

1.1开发过程简介

1.使用CocoaPods安装amapsearch和amap3dmap SDK 2。去高德开放平台控制台申请iOS Key3。将高德密钥配置到AppDelegate.m文件

1.2安卓高德地图开发流程简介

1.使用CocoaPods安装amapsearch和amap3dmap SDK 2。前往高德开放平台控制台，在Key4申请配置权限。应用程序选项卡中的AndroidManifest.xml。

1.3 HTML5高德地图开发过程简介

1.去高德开放平台的控制台申请jsAPI Key2。通过CDN同步加载模式或要求异步模式加载密钥

参考：高德地图开发文件，vue-amap开发文件

Weex-iOS地图组件扩展

2.1 weex-amap

地图显示是地图最基本的功能，其常见效果如下：

如果您想在iOS中自定义weex-amap，可以完成以下步骤：

1.新的DMapViewComponent类继承了WXComponent；2.在DMapViewComponent实现文件中实现MAMapViewDelegate代理；3.重写DMapViewComponent的loadView方法以加载地图视图并将自身设置为代理对象；4.在DMapViewComponent的初始化函数viewDidLoad中做一些准备工作；5.在DMapViewComponent的initWithRef方法中实现属性绑定；6.添加一个可以通过fireEvent在适当时间触发的事件；7.重写insertSubview方法以添加子组件，包括封面、线条、圆圈等。

以下是业务实现代码的一部分：

@ implementationdmapviewcomponent.//属性绑定-(instancetype)initwithref 3360(nsstring *)reftype 3360(nsstring *)类型样式3360(可空nsdictionary *)样式属性3360(可空n