最近要做一个支付宝小程序,公司呢又不确定后面要不要做微信小程序,所以决定用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跨端开发,欢迎大家骚扰,一起学习~~)