地图

优质

小牛编辑

135浏览

2023-12-01

地图。

属性	类型	默认值	是否必填	说明
longitude	Number		是	中心经度
latitude	Number		是	中心纬度
scale	Number	16	否	缩放级别，取值范围3-20
theme	String	normal	否	主题（satellite 或 normal）只在初始化时有效，不能动态变更（仅Android支持）
showLocation	Boolean	false	否	显示带有方向的当前定位点
includePoints	Array（point)		否	缩放视野以包含所有给定的坐标点,point为经纬度{"longitude":0,"latitude":0}
markers	Array(marker)		否	标记点
polyline	Array(polyline)		否	路线
circles	Array(circle)		否	圆
controls	Array(control)		否	控件
bindmarkertap	eventhandler		否	点击标记点时触发
bindcallouttap	eventhandler		否	点击标记点对应的气泡时触发
bindcontroltap	eventhandler		否	点击控件触发
bindregionchange	eventhandler		否	视野发生变化时触发
bindtap	eventhandler		否	点击地图时触发

marker(标记点)

用于在地图上显示标记的位置

属性	说明	类型	必填	备注
id	标记点 id	number	否	marker 点击事件回调会返回此 id，如果要接收回调事件最好传入id
latitude	纬度	Number	是	浮点数，范围 -90 ~ 90
longitude	经度	Number	是	浮点数，范围 -180 ~ 180
title	标注点名	String	否	点击时显示，callout存在时将被忽略
iconPath	显示的图标	String	是	项目目录下的图片路径，仅支持代码包路径
rotate	旋转角度	Number	否	顺时针旋转的角度，范围 0 ~ 360，默认为 0
alpha	标注透明度	Number	否	默认 1，无透明，范围 0 ~ 1
width	宽度	Number	否	默认为图片实际宽度
height	高度	Number	否	默认为图片实际高度
callout	自定义标记点上方的气泡窗口	Object	否	气泡
anchor	经纬度在标注图标的锚点，默认底边中点	Object	否	{x, y}，x 表示横向(0-1)，y 表示竖向(0-1)。{x: .5, y: 1} 表示底边中点

marker上的气泡callout

属性	类型	说明
content	String	文本
color	String	文本颜色
fontSize	Number	文字大小
borderRadius	Number	边框圆角
borderWidth	Number	边框宽度
borderColor	String	边框颜色
bgColor	String	背景色
padding	Number	文本边缘留白
display	String	'BYCLICK':点击显示; 'ALWAYS':常显,不传默认为 'BYCLICK'
textAlign	String	文本对齐方式。有效值: left, right, center

polyline

指定一系列坐标点，从数组第一项连线至最后一项

属性	类型	必填	说明
points	Array(point)	是	经纬度数组
color	String	否	线的颜色
width	Number	否	线的宽度
dottedLine	Boolean	否	是否虚线，默认false
arrowLine	Boolean	否	带箭头的线，默认false
arrowIconPath	String	否	箭头图标路径（在 arrowLine 为 true 时生效）
borderColor	String	否	线的边框颜色
borderWidth	Number	否	线的边框宽度

circle

在地图上显示圆

属性	类型	必填	说明
latitude	Number	是	纬度
longitude	Number	是	经度
color	String	否	描边的颜色
fillColor	String	否	填充颜色
radius	Number	是	半径
strokeWidth	Number	否	描边的宽度

control

属性	类型	必填	说明
id	Number	是	控件id，在控件点击事件回调会返回此id
position	Object	是	控件在地图的位置
iconPath	String	否	项目目录下的图片路径，仅支持代码包路径
clickable	Boolean	否	是否可点击，默认false，不可点击

示例代码

jxml

<map
    style="width: 100%; height: 300px;"
    latitude="{{latitude}}"
    longitude="{{longitude}}"
    markers="{{markers}}    
    polyline="{{polyline}}"
    circles="{{circle}}"
    controls="{{controls}}"
    includePoints="{{includePoints}}"
    theme="{{theme}}"
    showLocation="{{showLocation}}"
    bindcontroltap="controltap"
    bindmarkertap="markertap"
    bindcallouttap="callouttap"
    bindregionchange="mapRegionChange"
    bindtap="tap"
>
</map>

var callout ={
   content:"callout",
   color:"#FF0000",
   fontSize:12,
   borderRadius:5,
   borderWidth:2,
   borderColor:"#000000",
   bgColor:"#D3D3D3",
   padding:3,
   display:"BYCLICK",
  textAlign:"center"
};

var markers=[{
      id:1,
      latitude: 39.78619723,
      longitude: 116.56373978,
      iconPath:"../../../../image/location_marker.png",
      title:"first Marker",
      rotate:3,
      alpha:0.8,
      width: 50,
      height: 50,
      callout:callout,
      }];
Page({
  data: {
    latitude: 39.78619723,
    longitude: 116.56373978,
    scale:18,
    showLocation:false,
    includePoints:[{
      longitude: 116.38791,
      latitude: 39.999591
    },{
       longitude: 116.562938,
        latitude: 39.786752
    }],
    markers: markers,
    circle:[{
        latitude: 39.78619723,
        longitude: 116.56373978,
        color:"#DC143C",
        radius:10,
        fillColor:"#FFD700",
        strokeWidth:2
       }],
    polyline: [{
      points: [{
        longitude: 116.56373978,
        latitude: 39.78619723
      }, {
        longitude: 116.5616369247,
        latitude: 39.7865764743
      },
      {
        longitude: 116.5577960014,
        latitude: 39.7904347438
      },
      {
        longitude: 116.5541911125,
        latitude: 39.7888024254
      },
      {
        longitude: 116.5516054630,
        latitude: 39.7916630790
      },
      {
        longitude: 116.5486335754,
        latitude: 39.7902533770
      },{
        longitude: 116.5472710133,
        latitude: 39.7912921076
      }],
      color:"#DC143C",
      width: 7,
      dottedLine: false,
      arrowLine:true,
      arrowIconPath:"../../../../image/arrow.png",
      borderColor:"#000000",
      borderWidth:1
    }],
    controls: [{
      id: 1,
      iconPath: '../../../../image/controls.png',
      position: {
        left: 0,
        top: 300 - 50,
        width: 50,
        height: 50
      },
      clickable: true
    }]
  },
  controltap(e){
    console.log("点击control事件回调",e);
  },
  markertap(e){
    console.log("点击marker事件回调",e.detail);
  },
  callouttap(e){
     console.log("点击callout事件回调",e.detail);
  },
  tap(e){
     console.log("点击map事件回调",e.detail);
  },
  mapRegionChange(e){
    console.log("地图视野发生变化",e.detail);
  }
});