Skip to content

Latest commit

 

History

History
163 lines (127 loc) · 4.76 KB

README.md

File metadata and controls

163 lines (127 loc) · 4.76 KB
Raw

高德地图

安装

eco plugin install https://github.com/kjeco/amap

卸载

eco plugin uninstall https://github.com/kjeco/amap

组件 eco-amap 属性

属性 类型 Demo 描述
sdkKey object {ios:'xxx',android: 'xxx'} 指定开发者的 SDK 密匙
scale boolean true 设置比例尺功能是否可用
center array [116.487, 40.00003] 传入地理位置坐标[x,y] 默认为当前定位位置
zoom number 合法值范围 [3,19] 缩放级别
compass boolean true 是否允许显示指南针
zoomEnable boolean true 是否允许缩放
marker array [{position:[116,12]}] 点标记物的属性
geolocation boolean true 是否显示当前位置
zoomPosition String center 或 bottom 设置缩放按钮的位置
gestures String ["zoom","rotate","tilt","scroll"] 设置允许对地图做哪些手势操作
myLocationEnabled boolean true 定位按钮是否显示
showMyLocation boolean true 是否显示当前位置
customEnabled boolean true 是否开启自定义地图样式
setMapCustomEnable String {"android":"/data/custom_map"} 设置自定义地图资源文件的路径
indoorswitch boolean false 设置室内地图楼层切换控件是否可见

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

组件 eco-amap 事件

zoomchange 用户缩放地图时触发该事件 事件格式

{
  "targetCoordinate" : "缩放后的位置",
  "zoom" : "目标可视区域的缩放级别。",
  "tilt" : "目标可视区域的倾斜度，以角度为单位。",
  "bearing" : "可视区域指向的方向，以角度为单位，从正北向逆时针方向计算，从0 度到360 度。",
  "isAbroad" : "该位置是否在国内（此属性不是精确计算，不能用于边界区域）",
  "scalePerPixel" : "�Weex中一像素对应实际距离的长度（单位米）",
  "visibleRegion" : "可视区域的范围"
}

dragend 用户拖动地图时触发该事件

组件 eco-amap-marker 属性

属性 类型 Demo 描述
position array [116.487, 40.00003] 传入地理位置坐标[x,y] 默认为当前定位位置
icon string some_icon_url 图标的url地址
title string 'this is a marker' 坐标点的名称
hideCallout boolean true 设置marker是否可点击
open boolean true 是否显示InfoWindow

组件 eco-amap-marker 事件

click 点击marker时触发

组件 eco-amap-info-window 属性

属性 类型 描述
open boolean 是否显示InfoWindow
position String InfoWindow位置
offset String InfoWindow偏移量

组件 eco-amap-circle 属性

属性 类型 描述
center String 中心点
strokeColor String 描边颜色
fillColor String 填充颜色
strokeWidth float 描边宽度
radius float 半径

组件 eco-amap-polygon 属性

属性 类型 描述
path String 路径
strokeColor String 描边颜色
fillColor String 填充颜色
strokeWidth float 描边宽度

组件 eco-amap-polyline 属性

属性 类型 描述
path String 路径
strokeColor String 描边颜色
strokeStyle String 描边样式，可为dashed或空
strokeWidth float 描边宽度

模块引入

const amap = app.requireModule('eco/amap');
getUserLocation(completeFunc,errorFunc)
  • completeFunc 定位成功后的回调函数，返回的数据:
    { 
      data:{
        position: []
      },
      result: 'success' 
    }
amap.getLineDistance(posA, posB, callback)
  • 获取两点间的直线距离
amap.polygonContainsMarker(position, id, callback)
  • 判断点是否在合围范围内

一款高德地图插件，当前版本支持定位，缩放等地图常用操作。

demo

<template>
    <div style="align-items: center">
        <eco-amap style="width:750px;height:800px"
              :sdkKey="{ios:'5f30eead659fa7cd97a92865e560a18a','android':'232624b2ee61e42d5809616a08b6f5d5'}"
              :center="point.position"
              :zoom="15">
            <eco-amap-marker :position="point.position" :title="point.title"></eco-amap-marker>
        </eco-amap>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                point: {
                    position: [116.397721,39.904058],
                    title: 'This is a marker'
                },
            }
        },
    }
</script>