文档中心 > 店铺动态卡片-开发指引

店铺动态卡片-开发指引

my.createMapContext

更新时间：2023/11/24 访问次数：938

手机淘宝8.8.0及以上版本支持该API，其他客户端请使用CanIUse判断相应版本是否支持此API。

创建并返回一个 map 上下文对象 mapContext。


PageContext.setData(Object)

初始化或重置地图数据，参数可选。


this.setData({
    scale: 14,
    longitude: 120.131441,
    latitude: 30.279383,
    'show-location':true,
    // 地图贴图  10.1.35新增
    'ground-overlays':[{
        'include-points':[{// 右上
            latitude: 39.935029,
            longitude: 116.384377,
          },{// 左下
            latitude: 39.939577,
            longitude: 116.388331,
          }],
        image:'/image/groundoverlay.png',
        alpha:0.75,
        zIndex:0,
    }],
    // 网格贴图  10.1.35新增
    'tile-overlay':{
      url:'http://xixi.fullspeed.cn/public/map',
      type:0,
      tileWidth:256,
      tileHeight:256,
      zIndex:1,
    },
    markers:[{},{}],
    include-points:[{},{}],
    // 10.1.35新增 全览逻辑
    include-padding:{left:0, right:0, top:0, bottom:0},
    polyline: [{},{}],
    circles: [{},{}],
    controls: [{},{}],
    polygon: [{},{}],
    'include-padding':{},
    // 初始化支持地图设置  10.1.50新增
    setting:{
        // 手势
        gestureEnable:0/1,
        // 比例尺
        showScale:0/1,
        // 指南针
        showCompass:0/1,
        // 双手下滑
        tiltGesturesEnabled:0/1,
        // 交通路况展示
        trafficEnabled:0/1,                     
        // 地图POI信息
        showMapText:0/1, 
        // 高德地图logo位置
        logoPosition:{centerX:150, centerY:90},                       
    },
});


MapContext.moveToLocation()

支付宝客户端版本10.1.32开始支持。

移动视野到定位点并恢复到默认缩放级别，需要配合map组件的show-location使用。


this.mapCtx.moveToLocation();


MapContext.gestureEnable(Object)

设置所有手势是否可用，1：可用 ，0：不可用。


this.mapCtx.gestureEnable({isGestureEnable:1});


MapContext.showsScale(Object)



设置比例尺控件是否可见，1：可见 ，0：不可见。


this.mapCtx.showsScale({isShowsScale:1});



MapContext.showsCompass(Object)


设置指南针是否可见，1：可见 ，0：不可见。


this.mapCtx.showsCompass({isShowsCompass:1});


MapContext.showRoute(Object)

默认规划步行路线，只能显示一条。

可以规划步行、公交、骑行和驾车四种路线。


this.mapCtx.showRoute({
    searchType:"bus",                // 搜索类型：有"walk", "bus", "drive", "ride", 默认值为walk
    startLat:30.257839,              // 起点纬度
    startLng:120.062726,             // 起点经度
    endLat:30.256718,                // 终点纬度
    endLng:120.059985,               // 终点经度
    throughPoints:[{lat: 39.866958,lng:116.494231},{lat: 39.9357,lng:116.581092}],//途径点：10.1.50新增,仅驾车规划有效，searchType=“drive”
    routeColor:'#FFB90F',            // 路线颜色  10.1.50之后，该值仅在2d地图中生效
    iconPath: "/image/texture.png",  // 路线纹理  10.1.35 3d地图其优先级高于routeColor，即纹理会覆盖颜色值；10.1.50建议不再设置，在3d地图下提供了默认的纹理图案。
    iconWidth:10,                    // 纹理宽度  10.1.35 iconPath设置时才生效。10.1.50建议不再设置，在3d地图下提供了默认的纹理宽度。
    routeWidth:10,                   // 路线宽度  在不设置纹理时有效。 10.1.50建议不再设置，在2d地图下提供了默认值，3d不需要设置。
    zIndex:4                         // 覆盖物 Z 轴坐标  10.1.35
    mode:0                           // 只有驾车模式和公交模式支持，可选,具体值见下表
    city:'hangzhou',                 // 公交模式下必填    
    destinationCity:'hangzhou',      // 公交跨城模式下必填
});

mode

bus

drive

0

最快捷模式

速度优先（时间）

1

最经济模式

费用优先（不走收费路段的最快道路）

2

最少换乘模式

距离优先

3

最少步行模式

不走快速路

4

最舒适模式

结合实时交通（躲避拥堵）

5

不乘地铁模式

多策略（同时使用速度优先、费用优先、距离优先三个策略）

6

-

不走高速

7

-

不走高速且避免收费

8

-

躲避收费和拥堵

0

-

不走高速且躲避收费和拥堵


MapContext.clearRoute()

清除地图上的步行导航路线。


this.mapCtx.clearRoute();


MapContext.getCenterLocation(Callback)

获取当前地图中心位置。


this.mapCtx.getCenterLocation({
  success: res => {
    my.alert({
      content: 'longitude:' + res.longitude + '\nlatitude:' + res.latitude,
    });
    console.log(res.longitude);
    console.log(res.latitude);
  }
});


MapContext.updateComponents(Object)

增量更新地图接口。


this.mapCtx.updateComponents({
    scale: 14,
    longitude: 120.131441,
    latitude: 30.279383,
    command:{                                   
        // marker动画
        markerAnim:[
            {
                type:0           // 跳动动画 10.1.35
                markerId:xxx,
            }
        ],     
    },
    setting:{
        // 手势
        gestureEnable:0/1,
        // 比例尺
        showScale:0/1,
        // 指南针
        showCompass:0/1,
        // 双手下滑
        tiltGesturesEnabled:0/1,
        // 交通路况展示
        trafficEnabled:0/1,                     
        // 地图POI信息
        showMapText:0/1, 
        // 高德地图logo位置
        logoPosition:{centerX:150, centerY:90},                       
    },
    markers:[{},{}],
    polyline:[{},{}],
    include-points:[{},{}],
    include-padding:{left:0, right:0, top:0, bottom:0},
});


MapContext.translateMarker(Object)

平移 marker 接口。

备注：对同一个markerId在translateMarker没animationEnd之前再次调动会被丢掉，下一次动画需要在animationEnd之后再调用才有效。


this.mapCtx.translateMarker({
    markerId:xxx, // 必填
    destination:{
        longitude:xxx,latitude:xxx // 必填
    },
    autoRotate:true/false, // 选填，默认true
    rotate:xxx,  // 选填，在autoRotate为false的情况下才有效，不填默认是0
    duration:1000,  // 选填，单位ms，默认1000ms
    animationEnd:xxx   //function 动画结束回调    
});


Marker 图鉴


Marker样式优先级说明

customcallout，callout和label 互斥，优先级：label > customcallout > callout

style 与icon互斥，优先级：style > iconAppendStr；style > icon


style


结构

图鉴

支持版本

{

    type:1,

    text1:"Style1",

    icon1:'xxx',

    icon2:'xxx'

}

image

10.1.35

{

    type:2,

    text1:"Style2",

    icon1:'xxx',

    icon2:'xxx'

}

image

10.1.38

{

    type:3,

    icon:xxx,  //选填

    text:xxx,  //必填

    color:xxx,  //默认#33B276

    bgColor:xxx,  //默认#FFFFFF 

    gravity:"left/center/right", //默认 center

    fontType:"small/standard/large"  //默认standard

}

image

10.1.50


customcallout


结构

图鉴

支持版本

{

    "type": 0,

    "time": "3",

    "descList": [{

        "desc": "点击立即打车",

        "descColor": "#ffffff"

    }],

    "isShow": 1

}

image

10.1.32

{

    "type": 1,

    "time": "3",

    "descList": [{

        "desc": "点击立即打车",

        "descColor": "#333333"

    }],

    "isShow": 1

}

image

10.1.32

{

  "type": 2,

  "descList": [{

    "desc": "预计",

    "descColor": "#333333"

  }, {

    "desc": "5分钟",

    "descColor": "#108EE9"

  }, {

    "desc": "到达",

    "descColor": "#333333"

  }],

  "isShow": 1

}

image

10.1.32


label

  • content：必填。
  • color：选填，默认"#000000"。
  • fontsize：选填，默认14。
  • borderRadius：选填，默认20。
  • bgColor：选填，默认"#FFFFFF"。
  • padding：选填，默认10。


结构

图鉴

支持版本

{

  content:"Hello Label",

  color:"#000000",

  fontSize:16,

  borderRadius:5,

  bgColor:"#ffffff",

  padding:12,

}

image

10.1.38



FAQ

关于此文档暂时还没有FAQ
有用(0) 我要提问
返回
顶部
阿里巴巴集团 | 淘宝网 | 天猫 | 聚划算 | 全球速卖通 | 阿里巴巴国际交易市场 | 1688 | 阿里妈妈 | 阿里旅行·去啊 | 阿里云计算 | YunOS | 阿里通信 | 万网 | 高德 | 优视 | 友盟 | 酷盘 | 虾米 | 天天动听 | 来往 | 钉钉 | 11Main | 支付宝
关于淘宝 合作伙伴 营销中心 联系客服 开放平台 诚征英才 联系我们 网站地图 法律声明 © 2016 Taobao.com 版权所有
网络文化经营许可证：文网文[2010]040号 | 增值电信业务经营许可证：浙B2-20080224-1 | 信息网络传播视听节目许可证：1109364号