支付宝小程序自定义Map地图marker

最近要做一个支付宝小程序，公司呢又不确定后面要不要做微信小程序，所以决定用uni-app开发，其中一个要求就是，地图的marker可自定义，由于设计图没出来，只是口头描述了一下。。。
什么样的自定义marker呢，比如这样再比如这样第一种呢，比较简单，支付宝按照支付宝官方文档上完全可以写出来；第二种呢，（比较难，可能个人觉得吧，hahaha），本人搞了两个星期，而且网上我也搜了一大堆自定义marker的，我都试了一下都是适用于微信的小程序，支付宝的不适用，毕竟支持的属性不一样，最后去支付宝官方社区问了，说建议用支付宝原生高级组件渲染，也去uni-app官方群问了，没人解答，最后从支付宝开发者每周三的难点解答课中得到，uni-app框架中可以使用map高级定制渲染组件，而且不能直接编译,emmm。。。在那之前其实我引用成功了高级渲染组件,就是编译后在真机预览总是报错 Map: load error resouce ../../map.xml ；
具体怎么样使用呢，我给大家贴一段代码，只是个例子：
map.xml中就是自定义marker的内容，map.xml要放在文件夹的第一层，或者按照官方的来https://opendocs.alipay.com/mini/component/00n21l就可以。
下面是map.xml内容，(官方的写法完全适用哦~~~ )，最终样式可以实现图2 的自定义样式：

 <box layout='relative'>
<image width='${width}' height='${height}' src='${iconPath}'/>
<box layout='vertical'>
	<text id='test' clickable='true' text='${title}' font-size='12' color="#FFF" top="9" padding-left="13"/>
	<text id='test1' clickable='true' text='${title2}' text-align="center" font-size='10' color="#67217A" top="7" padding-left="19"/>
</box>
</box>

然后再map.vue（此处是你需要调用地图的页面）中使用map自定义渲染了，在vue的data(){}里按照官方示意写即可，在这里我贴上我写的例子，方便大家参考：

scale: 7,
longitude: 120.674421,
latitude: 31.326945,
markerIndex: -1,
//markers: data3,
markers: [{
		id: 0,
		clusterId: 0, //自定义点聚合簇效果时使用
		latitude: 31.546805,
		longitude: 120.304175,
		alpha: 1, //透明度 0-1
		width: 46,
		height: 46,
		iconPath: '/static/zdy_01.png',
		//#ifdef MP-WEIXIN
		options: {
			iconPath: '/static/zdy_01.png',
			content: '7柜',
			content2: '1'
		},
		// #endif
		//#ifdef MP-ALIPAY
		iconLayout: {
			params: {
				title: "7柜",
				title2: '2',
				width:'46',
				height:'46',
				iconPath: '/static/zdy_01.png',
			},
			src: "/mycomponents/map.xml"
		},
		customCallout: {
			    "type": 0,
			    "time": "3",
			    "descList": [{ 
			        "desc": "点击立即打车",
			        "descColor": "#ffffff" 
			    }],
			    "isShow": 1 
		},
		// #endif
		// 自定义窗口
		customCallout: {
			content:'444',
			anchorX: -1,
			anchorY: 46,
			display: "ALWAYS"
		},
	},
	{
		id: 1,
		clusterId: 1, //自定义点聚合簇效果时使用
		latitude: 31.220119,
		longitude: 121.47939,
		alpha: 1, //透明度 0-1
		width: 46,
		height: 46,
		iconPath: '/static/zdy_02.png',
		//#ifdef MP-WEIXIN
		options: {
			iconPath: '/static/zdy_02.png',
			content: '5柜',
			content2: '1'
		},
		// #endif
		//#ifdef MP-ALIPAY
		iconLayout: {
			params: {
				width:'46',
				height:'46',
				title: "5柜",
				title2: '5',
				iconPath: '/static/zdy_02.png',
			},
			src: "/mycomponents/map.xml"
		},
		// #endif
		// 自定义窗口
		customCallout: {
			anchorX: -1,
			anchorY: 46,
			display: "ALWAYS"
		},
	},
	{
		id: 2,
		clusterId: 2, //自定义点聚合簇效果时使用
		latitude: 31.197603,
		longitude:121.353525,
		alpha: 1, // 透明度 0-1
		width: 46,
		height: 46,
		iconPath: '/static/zdy_01.png',
		//#ifdef MP-ALIPAY
		iconLayout: {
			params: {
				width:'46',
				height:'46',
				title: "3柜",
				title2: '6',
				iconPath: '/static/zdy_01.png',
			},
			src: "/mycomponents/map.xml"
		},
		// #endif
		// 自定义窗口
		customCallout: {
			anchorX: -1,
			anchorY: 46,
			display: "ALWAYS"
		},
	}
],
// 控件
controls: [],
sid:''

<template></template>里放:

<map id="map" ref="map" style="width: 100%; height: 100vh;" :latitude="latitude" :longitude="longitude"
			:scale="scale" :markers="markers" @markertap='markertap' @callouttap='callouttap'></map>

接下来重点来了，以上都不是事情，完全按照支付宝小程序官方文档的写法来就OK了
最后一步在manifest.json的***源码视图***选项，找到支付宝小程序的配置

 "mp-alipay" : {
        "usingComponents" : true,
		"include":["*/*.xml"],
    },

加上官方的这段代码
最后给大家看一下，编译后的文件：（注意，IDE编译器上不显示效果，需要真机预览才能看到最终效果）
真机效果图是这样的，可能有点丑，大家勿要嘲笑哈

最后，如果大家想适用微信小程序，建议使用uni-app的条件编译，这里有一篇文章大家可以借鉴一下 https://blog.csdn.net/cbb_2313/article/details/116586608
谢谢！（本人也是初次使用uni-app跨端开发，欢迎大家骚扰，一起学习~~）