欢迎加入WEEX学院，这也许是地球上最好的跨平台开发工具
第二届WEEX Conf火热报名中~
开源项目weex技术仿严选app
1小时实现安卓、ios、wap三端开发！通过Weex 300行代码开发一款简易的跑步App
感谢您的支持，我会继续努力的!
扫码打赏，你说多少就多少没有更多推荐了，
不良信息举报
举报内容：
高德地图 android 实现weex能调用的功能，无法显示地图
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！用Swift写WeexDemo 2 | Lonely Feeling
接上一篇，本篇主要记录我在把另一位iOS同事（OC）与web前端同事（写vue.js的）合作的半成品项目转化为Swift半成品的过程。
为什么说是半成品呢？因为iOS同事负责更重要的项目去了，这个weex试水项目就交给我跟进了，而我又是Swift死忠（不是不能写OC，是写过Swift不想再写OC），所以总想着用Swift来完成这个混合项目，但是又不能打包票能搞定……所以才会有这几篇文章，边折腾边记录。
又因为这个项目是web前端和Android一起调试在先，他们搞得差不多了，我这边才开始，并不了解他们是如何约定一些东西的，所以我先摸索看看。
好了，废话不多说，开干！
导入web前端的代码weex支持用vue.js写页面，然后通过weex编译成bundlejs，我们web前端打包出来的一堆js文件，我把SwiftWeex项目下的bundlejs文件夹内容全部删掉，然后复制所有js进去，目录如下了：
可以看见index.js还是存在的，我们的ViewController加载代码也不用改，直接跑起来看看模拟器：
先不管中间的地图没加载出来，看看状态栏，似乎被vc的view盖过头了，我们得处理一下先，重写下ViewController的viewDidLayoutSubviews：
fileprivate var currentFrame = CGRect.zerooverride func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
var insets = UIEdgeInsets.zero
if #available(iOS 11.0, *) {
insets = view.safeAreaInsets
} else {
insets.top = UIApplication.shared.statusBarFrame.size.height
let width = view.bounds.width - insets.left - insets.right
let height = view.bounds.height - insets.top - insets.bottom
currentFrame = CGRect(x: insets.left, y: insets.top, width: width, height: height)
instance?.frame = currentFrame}func render() {
guard jsURL != nil else {
Log("jsURL is nil")
instance?.destroy()
instance = WXSDKInstance()
instance?.viewController = self
instance?.frame = currentFrame
instance?.onCreate = { [unowned self] view in
(略)}
尽管顶部确实避开了状态栏，但是web前端写的css控制了子view的高度，超出了我们父view的范围了：
你问我怎么知道的……当然是对比一下我们上一篇使用的官方demo里的index.js咯，官方的写了一句：
.wrapper { align-items: margin-top: 120px; }
所以总是离顶部有60pt（6s）的距离：
好了，这些都暂时不是我关心的地方，到时再和web前端商讨下。
添加插件再看回app主界面，发现地图没有显示，而地图是native负责显示的，提供部分接口给weex调用，weex用了一个插件机制，把地图以及相应的native接口暴露给js。
描述能力不行，具体看看我之前写的一篇，虽然也是流水账，但是能看清如何写一个简单的插件。
根据官方文档说的，如果你想使用的插件，你可以使用：
weex plugin add plugin_name
我们这步应该把我们的SwiftWeex工程置于整个weex项目的platforms/ios下，然后用上述命令安装地图插件。但是刚好今天周六，周五忘了问前端拿整个weex项目的代码，所以，下面先用上一篇文章提到的darkweex这个demo工程折腾一下试试。
这里我已知我们的weex项目是用高德地图插件，我们去怎么玩。
添加地图插件，有两种方式:
从插件市场下载安装： weexpack plugin add weex-amap
地图插件代码clone到本地后安装，weexpack plugin add /users/abcd/Code/weex-plugins/weex-amap (这后面是地图插件本地代码的目录)
下面我们试试安装插件，看看安装后会增减些什么东西：
cd ~/Documents/darkweexweexpack plugin add weex-amap
记得惯例加上梯子，不然你会怀疑人生……但是还是出错了：
dark-xps:darkweex darkhandz$ weexpack plugin add weex-amapFetching plugin "weex-amap" via npmInstall Dependences ...added 4 packages in 2.777sInstalling "weex-amap@0.0.4" for iosFetching plugin "weex-adapter-image" via npmInstalling "weex-adapter-image@1.0.2" for iosFailed to install 'weex-adapter-image':Error
at new Api (/usr/local/lib/node_modules/weexpack/lib/src/platforms/ios_pack/Api.js:85:15)
at Object.getPlatformApi (/usr/local/lib/node_modules/weexpack/lib/src/platforms/platforms.js:76:23)
at handleInstall (/usr/local/lib/node_modules/weexpack/lib/src/plugman/install.js:614:27)
at /usr/local/lib/node_modules/weexpack/lib/src/plugman/install.js:410:28
at _fulfilled (/usr/local/lib/node_modules/weexpack/node_modules/q/q.js:787:54)
at self.promiseDispatch.done (/usr/local/lib/node_modules/weexpack/node_modules/q/q.js:816:30)
at Promise.promise.promiseDispatch (/usr/local/lib/node_modules/weexpack/node_modules/q/q.js:749:13)
at /usr/local/lib/node_modules/weexpack/node_modules/q/q.js:509:49
at flush (/usr/local/lib/node_modules/weexpack/node_modules/q/q.js:108:17)
at _combinedTickCallback (internal/process/next_tick.js:131:7)Failed to install 'weex-amap':Error
at new Api (/usr/local/lib/node_modules/weexpack/lib/src/platforms/ios_pack/Api.js:85:15)
at Object.getPlatformApi (/usr/local/lib/node_modules/weexpack/lib/src/platforms/platforms.js:76:23)
at handleInstall (/usr/local/lib/node_modules/weexpack/lib/src/plugman/install.js:614:27)
at /usr/local/lib/node_modules/weexpack/lib/src/plugman/install.js:410:28
at _fulfilled (/usr/local/lib/node_modules/weexpack/node_modules/q/q.js:787:54)
at self.promiseDispatch.done (/usr/local/lib/node_modules/weexpack/node_modules/q/q.js:816:30)
at Promise.promise.promiseDispatch (/usr/local/lib/node_modules/weexpack/node_modules/q/q.js:749:13)
at /usr/local/lib/node_modules/weexpack/node_modules/q/q.js:509:49
at flush (/usr/local/lib/node_modules/weexpack/node_modules/q/q.js:108:17)
at _combinedTickCallback (internal/process/next_tick.js:131:7)Error: The provided path "/Users/darkhandz/Documents/darkweex/platforms/ios/Weexplugin" is not a weexpack iOS project.
从最后一行可以看出，和Weexplugin文件夹有关，我看了一下，我们的项目根本没有这个目录，于是再看看高德的插件说明，在最后有：
如何将地图插件集成到自己的项目呢，请参考
我们打开链接看看，原来需要一个组件容器，获取方式也有两种，我采取第二种：通过下来：
cd platforms/ios/git clone https://github.com/weexteam/weexpluginContainer-iOS.git
可以看到weexpluginContainer-iOS的目录结构是这样的：
我们要的就是template目录而已，把它剪切出去ios目录下，然后改名为Weexplugin，然后删除weexpluginContainer-iOS，然后cd ../..切换回darkweex目录，再执行安装插件的命令试试：
相当顺利，然后看看当前的目录结构：
这时候我们把整个Weexplugin复制到我们Source目录下，然后把Weexplugin\Weexplugin拖入Xcode。
这时候留意下外层Weexplugin目录里面的Podfile里面添加了什么依赖：
就是高德地图咯，把这行复制到我们SwiftWeex的Podfile里，来一次Pod install，安装完之后，CMD+R走一波，一切顺利的话，你依然看不见地图的?。
这时候我们看看控制台的输出：
说明Weex里的JS代码有调用weex-amap，但是找不到这个component……就是我们没有注册咯，刚才导入的Weexplugin就是用来注册各种插件的，我们只是简单地导入了它的代码，却没有用起来。
首先在桥接头文件里引入：#import &WeexPluginManager.h&，然后在AppDelegate的configWeex()最后面加入WeexPluginManager.registerWeexPlugin()，再CMD+R就看见神奇的地图啦：
至于我是如何知道怎样使用WeexPluginManager的，如果你创建过插件demo工程的话，你就会知道了：
这个方法的源码你看看就知道是怎么加载插件的了，下面简单说说。
插件的自动注册在WeexPluginManager.m里有这么一段：
[pluginNames enumerateObjectsUsingBlock:^(id
_Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
NSDictionary *pluginInfo = (NSDictionary *)
if ([pluginInfo[@"category"] isEqualToString:@"handler"] && pluginInfo[@"protocol"]) {
[WXSDKEngine registerHandler:[NSClassFromString(pluginInfo[@"ios-package"]) new]
withProtocol:NSProtocolFromString(pluginInfo[@"protocol"])];
}else if ([pluginInfo[@"category"] isEqualToString:@"component"] && pluginInfo[@"ios-package"]) {
[WXSDKEngine registerComponent:pluginInfo[@"api"] withClass:NSClassFromString(pluginInfo[@"ios-package"])];
}else if ([pluginInfo[@"category"] isEqualToString:@"module"] && pluginInfo[@"ios-package"]) {
[WXSDKEngine registerModule:pluginInfo[@"api"] withClass:NSClassFromString(pluginInfo[@"ios-package"])];
}}];
而读取的文件是WeexpluginConfig.xml，部分内容是这样的：
name="WXImgLoaderImpl"&
name="category" value="handler" /&
name="ios-package" value="WXImgLoaderImpl" /&
name="protocol" value="WXImgLoaderProtocol" /&& name="WXMapViewComponent"&
name="category" value="component" /&
name="ios-package" value="WXMapViewComponent" /&
name="api" value="weex-amap" /&& name="WXMapViewMarkerComponent"&
name="category" value="component" /&
name="ios-package" value="WXMapViewMarkerComponent" /&
name="api" value="weex-amap-marker" /&& name="WXMapPolylineComponent"&
name="category" value="component" /&
name="ios-package" value="WXMapPolylineComponent" /&
name="api" value="weex-amap-polyline" /&& name="WXMapPolygonComponent"&
name="category" value="component" /&
name="ios-package" value="WXMapPolygonComponent" /&
name="api" value="weex-amap-polygon" /&& name="WXMapCircleComponent"&
name="category" value="component" /&
name="ios-package" value="WXMapCircleComponent" /&
name="api" value="weex-amap-circle" /&& name="WXMapInfoWindowComponent"&
name="category" value="component" /&
name="ios-package" value="WXMapInfoWindowComponent" /&
name="api" value="weex-amap-info-window" /&& name="WXMapViewModule"&
name="category" value="module" /&
name="ios-package" value="WXMapViewModule" /&
name="api" value="amap" /&&
所以嘛，我们如果想手动注册一些module、handler、component什么的，完全可以自己[WXSDKEngine registerXXXX: withClass:]来代替插件管理器的自动注册，当然了，插件的源码你总是要自己下载回来导入项目的。
用Swift给Amap module添加方法扩展地图是显示出来了，但是左下角那个点击回到用户当前定位位置的按钮根本没有用，我看了一下index.js，发现点击的时候执行的代码是：
gotCurPos: function gotCurPos() {
var _this3 = this;
this.setUserLocation().then(function (position) {
_this3.mapCenter =
});},
再看看setUserLocation方法的定义：
setUserLocation: function setUserLocation() {
var _this = this;
return new Promise(function (resolve, reject) {
Amap.getUserLocation(null, function (data) {
_this.curPosition = data.data.
_this.curCity = data.data.position[2].replace('市', '');
resolve(data.data.position);
});},
哟西，还有Promise，高大上的感觉……简单看来就是调用Amap.getUserLocation(param, callback)方法咯，看看Amap的定义：
var Amap = weex.requireModule('amap');
就是我们的高德地图module咯，意思就是调用module里面的getUserLocation方法，我们去SwiftWeex里全局搜索一下这个方法名：
很明显的一个module写法，先来看看getUserLocation这个方法的作用，就是调用component的getUserLocation方法，把得到的结果传给callback。
我们再看看performBlockWithRef干了什么：
- (void)performBlockWithRef:(NSString *)elemRef block:(void (^)(WXComponent *))block {
if (!elemRef) {
__weak typeof(self) weakSelf = self;
WXPerformBlockOnComponentThread(^{
WXComponent *component = (WXComponent *)[weakSelf.weexInstance componentForRef:elemRef];
if (!component) {
[weakSelf performSelectorOnMainThread:@selector(doBlock:) withObject:^() {
block(component);
} waitUntilDone:NO];
});}
大概意思就是根据elemRef找到对应的component，然后执行block……可是web前端传了null给elemRef！不知道他是如何和Android那边配合的，还是说Android版的高德地图插件方法和我们iOS的有所不同？不管了，今天是周六，先自己折腾看看……
前端想拿到的是position，一个坐标：curPosition: [116.479]，还有就是城市名，不过为什么城市名作为一个字符串却在position数组第三个元素出现？不懂前端，迷之尴尬……看来还是得改改他的index.js代码。
现在我想用Swift为高德地图module提供一个方法让web前端调用，所以我决定在WXMapViewModule.m里增加一个方法签名暴露给weex调用：
WX_EXPORT_METHOD(@selector(getUserLocation:callback:))WX_EXPORT_METHOD(@selector(getLineDistance:marker:callback:))WX_EXPORT_METHOD_SYNC(@selector(polygonContainsMarker:ref:callback:))WX_EXPORT_METHOD(@selector(getUserLocation:))
然后新建一个WXMapViewModule+Extension.swift文件：
import Foundationimport WeexSDKpublic extension WXMapViewModule {
@objc func getUserLocation(_ callback: WXModuleCallback) {
callback(["result": "success", "data": ["position": [113.999, 22.500], "title": "中山市"] ])
}}
别忘了在桥接头文件添加#import &WXMapViewModule.h&。然后把index.js里面的getUserLocation调用改成：
Amap.getUserLocation(function (data) {
_this.curPosition = data.data.
_this.curCity = data.data.title.replace('市', '');
resolve(data.data.position);});
再跑起来，哎哟，怎么去了深圳湾，我不是故意的，左边我随意返回的……但是左上角的中山就没错了：
真正的定位嘛，目前我暂时不知道前面那个elemRef是什么鬼，周一问问web前端才知道了，我先自己折腾一个定位工具类出来，把坐标交给getUserLocation返回，应该也说得通。
先在Info.plist添加相应的定位权限：
&NSLocationAlwaysAndWhenInUseUsageDescription&&获取你的位置，显示周围的服务&&NSLocationAlwaysUsageDescription&&获取你的位置，显示周围的服务&&NSLocationUsageDescription&&获取你的位置，显示周围的服务&&NSLocationWhenInUseUsageDescription&&获取你的位置，显示周围的服务&
然后写一个单例出来，我随意创建的文件LocationManager+Extension.swift，请别挑剔：
import UIKitimport CoreLocationclass LocationUtil: NSObject {
static let shared = LocationUtil()
var currentLocation = CLLocation()
fileprivate var locationMgr = CLLocationManager()
private override init (){
super.init()
locationMgr.desiredAccuracy = kCLLocationAccuracyNearestTenMeters
locationMgr.delegate = self
func requestLocationAuth() {
guard CLLocationManager.locationServicesEnabled() else { return }
let status = CLLocationManager.authorizationStatus()
switch status {
case .notDetermined:
locationMgr.requestWhenInUseAuthorization()
case .authorizedWhenInUse, .authorizedAlways:
locationMgr.startUpdatingLocation()
case .denied, .restricted:
func alert() {
let vc = UIAlertController(title: "定位授权", message: "请打开本App的定位授权才可以正常使用", preferredStyle: .alert)
vc.addAction(UIAlertAction(title: "前往设置", style: .default, handler: { _ in
UIApplication.shared.openURL(URL(string: UIApplicationOpenSettingsURLString)!)
vc.addAction(UIAlertAction(title: "取消", style: .destructive, handler: nil))
DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
UIApplication.shared.keyWindow?.rootViewController?.present(vc, animated: true, completion: nil)
}}extension LocationUtil: CLLocationManagerDelegate {
func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
if let last = locations.last {
currentLocation = last
}}
接下来当然是给getUserLocation返回最新的定位坐标咯：
public extension WXMapViewModule {
@objc func getUserLocation(_ callback: WXModuleCallback) {
let loc = LocationUtil.shared.currentLocation.coordinate
callback(["result": "success", "data": ["position": [loc.longitude, loc.latitude], "title": "中山市"] ])
}}
然后在ViewController的viewDidLoad里render()下面加入LocationUtil.shared.requestLocationAuth()，跑起来试试。
坐标就是模拟器设置的位置了咯。
小结折腾了这么久，才勉强搞好一个地图和定位，尴尬……其他的，留给下一篇吧。
本次折腾的代码涉及公司的业务，虽然不是什么神秘高端技术，但为免落人口实，我去掉bundlejs文件夹再分享吧。新人专享好礼凡未购买过小册的用户，均可领取三张 5 折新人专享券，购买小册时自动使用专享券，最高可节省 45 元。小册新人 5 折券最高可省 15 元小册新人 5 折券最高可省 15 元小册新人 5 折券最高可省 15 元注：专享券的使用期限在领券的七天内。一键领取购买小册时自动使用专享券前往小册首页本活动仅适用于小册新用户知道了Weex-amap：Weex 高德地图插件使用指南原文链接：
一款高德地图 Weex 插件，它具备了地图的基本使用功能，包括地图展示，添加坐标点，控制地图缩放，在地图上添加折线或者圆形等图形，同时也具备地图的一些基本计算和判断等功能。而且如同 Weex 的能力，它是三端都支持运行，这样你可以通过一套代码实现三端的地图功能。
使用效果预览(iOS版)：
使用插件，我们需要初始化一个工程项目，然后将插件添加进去。 weex create mapapp
# 你可以自行添加ios 或者 android
weex platform add ios
# 添加地图插件
weex plugin add weex-amap
请确保你安装了最新的
这样你的项目里就具备了高德地图的插件功能。
先来一段基本的地图展示，编辑你的weex文件 &template&
&div class="container"&
&weex-amap class="map" id="map2017" scale="true" geolocation="true" center="{{pos}}" &
&weex-amap-marker position="{{point.position}}" title="{{point.title}}"&&/weex-amap-marker&
&/weex-amap&
&/template&
.container{
height: 100%;
width:100%;
height: 600;
background-color: #000;
module.exports = {
pos:[116.487, 40.00003],
position: [112,36],
title: 'this is a marker'
created () {
编辑完后，你可以连接你的手机，然后通过 weex run android
实现手机上的预览。
我们要在地图上显示一个基本的地图，可以直接使用: &weex-amap props...&&/weex-amap&
通过设置不同的属性来实现地图控制。
常见的属性列表如下：
[116.487, 40.00003]
传入地理位置坐标[x,y] 默认为当前定位位置
zoomEnable
是否允许缩放
[{position:[116,12]}]
点标记物的属性
geolocation
添加定位控件
{ios:'xxx',android: 'xxx',h5: 'xxx'}
指定开发者的 SDK 密匙
建议你前往申明你对应产品的Key，保证地图正常工作
它支持绑定的事件:
zoomchange
用户缩放改变
用户拖拽完成
我们可以在地图上添加一系列点标记来展示特定地理位置的一些信息： &template&
&div class="container"&
&weex-amap class="map" id="map2017"
map-instance={{map}} zoom={{zoom}} center={{pos}}&
&weex-amap-marker position="{{point.position}}" title="{{point.title}}" icon="{{point.icon}}" repeat="point in pointArr"
onclick="{{markerClick}}"&&/weex-amap-marker&
&/weex-amap&
&/template&
.container{
background-color: #
background-color: #
min-height: 800;
border-bottom-width: 10;
border-bottom-color: #
module.exports = {
pos: [116.487, 40.00003],
pointArr: [
position:[116..9278548],
title: '北京市',
click: function() {
modal.alert('北京市区');
position: [116..0004496],
title: '火箭',
icon: 'http://img1.vued.vanthink.cn/vued6db28fd538afa.gif'
它可以通过下面的属性来控制:
[116.487, 40.00003]
传入地理位置坐标[x,y] 默认为当前定位位置
some_icon_url
图标的url地址
'this is a marker'
坐标点的名称
它支持的基本的绑定事件：
用户点击标记物
在地图上绘制一段折线： &weex-amap&
&weex-amap-polyline path="{{path}}" stroke-color="#000" stroke-wdith="2"&&/weex-amap-polyline&
&/weex-amap&
你可以控制它的折线路径以及颜色宽度等。
[[116.487, 40.00003],[113.487, 40.0002]...]
折线的节点坐标数组
stroke-color
stroke-width
stroke-opacity
线条透明度[0-1]
stroke-style
线条的样式 实线:solid，虚线:dashed
在地图上绘制多边形: &weex-amap class="map" id="map2017" sdk-key={{keys}} zoom={{zoom}} center={{pos}}&
&weex-amap-polygon path="{{path}}" fill-opacity="0.5" fill-color="#2ecc71" fill-width="4"&&/weex-amap-polygon&
&/weex-amap&
你可以自定义它的形状，填充的颜色，以及描边样式：
[[116.487, 40.00003],[113.487, 40.0002]...]
多边形轮廓线的节点坐标数组
fill-color
多边形填充颜色
fill-opacity
多边形填充透明度
stroke-color
stroke-width
stroke-opacity
线条透明度[0-1]
stroke-style
线条的样式 实线:solid，虚线:dashed
在地图上绘制圆形。 &weex-amap class="map" id="map2017" sdk-key={{keys}} zoom={{zoom}} center={{pos}}&
&weex-amap-circle center="{{pos}}" radius="7000" fill-color="#2ecc71" fill-width="4"&&/weex-amap-circle&
&/weex-amap&
你可以控制它的大小，圆心和颜色:
[116.346, 40.234234]
fill-color
圆的填充颜色
fill-opacity
圆的填充透明度
stroke-color
圆的轮廓线条颜色
stroke-width
圆的轮廓线条宽度
stroke-opacity
圆的轮廓线条透明度[0-1]
stroke-style
圆的轮廓线条的样式 实线:solid，虚线:dashed
&weex-amap class="map" id="map2017" sdk-key={{keys}} zoom={{zoom}} center={{pos}}&
&weex-amap-marker style="z-index:1000" hide-callout="true" position="{{marker.position}}" icon="{{marker.icon}}" title="{{marker.title}}"&&/weex-amap-marker&
&weex-amap-marker style="z-index:1000" hide-callout="true" position="{{marker2.position}}" icon="{{marker.icon}}" title="{{marker2.title}}"&&/weex-amap-marker&
&weex-amap-info-window class="info-win" offset="{{palaceMuseum.offset}}"
open="{{palaceMuseum.open}}" position="{{palaceMuseum.position}}"&
&info-window src="http://img1.vued.vanthink.cn/vued6dfd998fcd4b66bafc547ce.jpeg" title="The Palace Museum" location="4 Jingshan Front St, Dongcheng Qu, Beijing"&&/info-window&
&/weex-amap-info-window&
&weex-amap-info-window class="info-win" offset="{{southStation.offset}}" open="{{southStation.open}}" position="{{southStation.position}}"&
&info-window
src="http://img1.vued.vanthink.cn/vued2de302ef72aefa1bbbbd9455.jpeg" title="Beijing South Railway Station" location="Fengtai, Beijing"&&/info-window&
&/weex-amap-info-window&
&/weex-amap&
你可以在地图上自定义显示的信息窗体的样式，通过写子组件的形式。
? SDK限制，一个地图上只能显示一个信息窗体，需要自己实现逻辑控制
[[116.487, 40.00003]
在地图上的位置
是否在地图上打开
相对定位点坐标偏移
weex comonnet
This is a info window
窗体的内容
有的时候我们需要实现一些定位和计算功能。这个时候我们可以引入 amap 模块。 &template&
&weex-amap class="map" id="map2017" center="{{pos}}" &&/weex-amap&
&div class="btn-wrap"&
&div onclick="setUserLocation" class="btnbox"&&text class="btn" &set location &/text&&/div&
&text class="tips"&进行当前定位&/text&
&/template&
// 使用 amap 模块
const Amap = require('@weex-module/amap');
module.exports = {
pos:[116.487, 40.00003]
methods: {
setUserLocation() {
const self =
Amap.getUserLocation(this.$el('map2017').ref, function (data) {
if(data.result == 'success') {
self.pos = data.data.
它具备的一些基本方法;
获取用户的地理位置坐标。 + completeFunc 定位成功后的回调函数，返回的数据: {
position: []
result: 'success'
? 使用定位
weex-amap 组件 必须设置 geolocation="true" 使用定位插件
计算两个标记点的距离
该方法接收三个参数 进行计算比如:
coor1 坐标1
coor2 坐标2
callback计算完成后的回调 会返回一个计算出的具体距离，单位 米
amap.getLineDistance(this.marker1.position, this.marker2.position, (res) =& {
if (res.result == 'success') {
this.distance = '两点相距' + res.data + '米';
console.log(res.data.distance + '米');
console.log('计算失败');
判断几何形是否包含某个点
该方法接收两个参数，返回一个boolean值
coor 点的坐标
polygonRef 多边形的ref
callbcak 计算完成后的回调 会返回一个运算的结果,其中data字段是个boolean，表示是否包含
amap.polygonContainsMarker([114.22], this.$ref('polygon2017'), (res) =& {
if (res.result == 'success') {
console.log(res.data ? '存在' : '不存在' );
插件 Github 项目里包含了基本的功能演示 :
你只需要将 Demo 里的文件复制粘贴到你的 工程项目的src下即可。然后运行 run android or ios 即可.
直接点击可以演示当前版本支持的功能
如何将更多的插件集成到自己的项目呢，请参考
本文对你有帮助？欢迎扫码加入前端学习小组微信群：相关热门文章分享}