weex android 地图,Weex-amap：Weex高德地图插件使用指南

weex-amap 一款高德地图 Weex 插件，它具备了地图的基本使用功能，包括地图展示，添加坐标点，控制地图缩放，在地图上添加折线或者圆形等图形，同时也具备地图的一些基本计算和判断等功能。而且如同 Weex 的能力，它是三端都支持运行，这样你可以通过一套代码实现三端的地图功能。

使用效果预览(iOS版)：

快速开始

使用插件，我们需要初始化一个工程项目，然后将插件添加进去。

weex create mapapp

cd mapapp

# 你可以自行添加ios 或者 android

weex platform add ios

# 添加地图插件

weex plugin add weex-amap

这样你的项目里就具备了高德地图的插件功能。

先来一段基本的地图展示，编辑你的weex文件

.container{

position: relative;

height: 100%;

}

.map{

width:100%;

height: 600;

background-color: #000;

}

module.exports = {

data: {

pos:[116.487, 40.00003],

point: {

position: [112,36],

title: 'this is a marker'

}

},

created () {

},

}

编辑完后，你可以连接你的手机，然后通过

weex run android

实现手机上的预览。

weex-amap基本功能介绍

地图组件 weex-amap

我们要在地图上显示一个基本的地图，可以直接使用:

通过设置不同的属性来实现地图控制。

常见的属性列表如下：

属性

类型

Demo

描述

center

array

[116.487, 40.00003]

传入地理位置坐标[x,y] 默认为当前定位位置

zoom

number

11

缩放级别

zoomEnable

boolean

true

是否允许缩放

marker

array

[{position:[116,12]}]

点标记物的属性

geolocation

boolean

true

添加定位控件

sdkKey

object

{ios:'xxx',android: 'xxx',h5: 'xxx'}

指定开发者的 SDK 密匙

建议你前往高德开发者社区申明你对应产品的Key，保证地图正常工作

它支持绑定的事件:

事件

描述

zoomchange

用户缩放改变

dragend

用户拖拽完成

点标记 weex-amap-marker

我们可以在地图上添加一系列点标记来展示特定地理位置的一些信息：

.container{

position: relative;

flex:1;

background-color: #fff;

}

.map{

flex: 1;

position: relative;

background-color: #fff;

min-height: 800;

border-bottom-width: 10;

border-bottom-color: #fff;

}

module.exports = {

data: {

pos: [116.487, 40.00003],

zoom: 9,

pointArr: [

{

position:[116.3944071,39.9278548],

title: '北京市',

events: {

click: function() {

modal.alert('北京市区');

}

}

},

{

position: [116.4848977,40.0004496],

title: '火箭',

icon: 'http://img1.vued.vanthink.cn/vued6db28fd538a0446a3ab2fa2694d1ba57.gif'

}

],

},

}

它可以通过下面的属性来控制:

属性

类型

Demo

描述

position

array

[116.487, 40.00003]

传入地理位置坐标[x,y] 默认为当前定位位置

icon

string

some_icon_url

图标的url地址

title

string

'this is a marker'

坐标点的名称

它支持的基本的绑定事件：

事件

描述

click

用户点击标记物

折线组件 weex-amap-polyline

在地图上绘制一段折线：

你可以控制它的折线路径以及颜色宽度等。

属性

类型

Demo

描述

path

array

[[116.487, 40.00003],[113.487, 40.0002]...]

折线的节点坐标数组

stroke-color

string

#000

线条颜色

stroke-width

number

2

线条宽度

stroke-opacity

number

0.5

线条透明度[0-1]

stroke-style

string

solid

线条的样式 实线:solid，虚线:dashed

多边形组件 weex-amap-polygon

在地图上绘制多边形:

你可以自定义它的形状，填充的颜色，以及描边样式：

属性

类型

Demo

描述

path

array

[[116.487, 40.00003],[113.487, 40.0002]...]

多边形轮廓线的节点坐标数组

fill-color

string

#000

多边形填充颜色

fill-opacity

string

#000

多边形填充透明度

stroke-color

string

#000

线条颜色

stroke-width

number

2

线条宽度

stroke-opacity

number

0.5

线条透明度[0-1]

stroke-style

string

solid

线条的样式 实线:solid，虚线:dashed

圆形组件 weex-amap-circle

在地图上绘制圆形。

你可以控制它的大小，圆心和颜色:

属性

类型

Demo

描述

center

array

[116.346, 40.234234]

圆形位置

radius

number

50

圆的半径

fill-color

string

#000

圆的填充颜色

fill-opacity

string

#000

圆的填充透明度

stroke-color

string

#000

圆的轮廓线条颜色

stroke-width

number

2

圆的轮廓线条宽度

stroke-opacity

number

0.5

圆的轮廓线条透明度[0-1]

stroke-style

string

solid

圆的轮廓线条的样式 实线:solid，虚线:dashed

自定义信息窗体 weex-amap-info-window

你可以在地图上自定义显示的信息窗体的样式，通过写子组件的形式。

⚠️ SDK限制，一个地图上只能显示一个信息窗体，需要自己实现逻辑控制

属性

类型

Demo

描述

position

array

[[116.487, 40.00003]

在地图上的位置

open

boolean

true

是否在地图上打开

offset

array

偏移

相对定位点坐标偏移

children

weex comonnet

This is a info window

窗体的内容

amap 地图模块

有的时候我们需要实现一些定位和计算功能。这个时候我们可以引入 amap 模块。

set location

进行当前定位

// 使用 amap 模块

const Amap = require('@weex-module/amap');

module.exports = {

data: {

pos:[116.487, 40.00003]

},

methods: {

setUserLocation() {

const self = this;

Amap.getUserLocation(this.$el('map2017').ref, function (data) {

if(data.result == 'success') {

self.pos = data.data.position;

}

});

}

};

它具备的一些基本方法;

getUserLocation(completeFunc,errorFunc)

获取用户的地理位置坐标。

completeFunc 定位成功后的回调函数，返回的数据:

{

data:{

position: []

},

result: 'success'

}

⚠️ 使用定位 weex-amap 组件 必须设置 geolocation="true" 使用定位插件

getLineDistance

计算两个标记点的距离

该方法接收三个参数 进行计算比如:

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 + '米');

} else {

console.log('计算失败');

}

})

polygonContainsMarker

判断几何形是否包含某个点

该方法接收两个参数，返回一个boolean值

coor 点的坐标

polygonRef 多边形的ref

callbcak 计算完成后的回调 会返回一个运算的结果,其中data字段是个boolean，表示是否包含

amap.polygonContainsMarker([114.23423, 43.2222], this.$ref('polygon2017'), (res) => {

if (res.result == 'success') {

console.log(res.data ? '存在' : '不存在' );

}

})

参考 Demo

插件 Github 项目里包含了基本的功能演示 :

你只需要将 Demo 里的文件复制粘贴到你的 工程项目的src下即可。然后运行 run android or ios 即可.

直接点击H5 Demo可以演示当前版本支持的功能

如何将更多的插件集成到自己的项目呢，请参考weexpack文档说明