小程序云开发点击MARKER后marker生成MARKER图标中间出现自带的图片
时间: 2023-10-07 16:06:18 浏览: 141
微信小程序开发mapdemo,地图导航、marker标注源码.zip
要实现这个功能,需要以下步骤:
1. 创建一个地图组件,并在地图上添加一个或多个marker。
2. 通过绑定marker的点击事件,在点击marker时触发一个函数。
3. 在该函数中,使用wx.cloud调用云函数,将marker的位置信息传递给云函数。
4. 在云函数中,使用百度地图API或其他地图API,获取该位置的地图截图,并将截图保存到云存储中。
5. 将云存储中的截图URL返回给前端,作为marker的icon属性。
6. 在前端中,根据返回的URL,设置marker的icon属性为该URL,使得marker的图标中央出现自带的图片。
以下是一个简单的示例代码:
1. 在wxml文件中添加地图组件和marker:
```html
<view class="map-container">
<map id="map" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}"
bindmarkertap="onMarkerTap" show-location>
</map>
</view>
```
2. 在js文件中定义markers和onMarkerTap函数:
```javascript
Page({
data: {
latitude: 39.90469,
longitude: 116.40717,
markers: [{
id: 1,
latitude: 39.90469,
longitude: 116.40717,
iconPath: '',
width: 50,
height: 50
}]
},
onMarkerTap: function (event) {
let markerId = event.markerId;
let marker = this.data.markers.find(m => m.id === markerId);
wx.cloud.callFunction({
name: 'getMapSnapshot',
data: {
latitude: marker.latitude,
longitude: marker.longitude
},
success: res => {
let snapshotUrl = res.result;
marker.iconPath = snapshotUrl;
this.setData({
markers: this.data.markers
});
},
fail: err => {
console.error('getMapSnapshot fail', err);
}
});
}
});
```
3. 在云函数中获取地图截图并保存到云存储中:
```javascript
const cloud = require('wx-server-sdk');
const axios = require('axios');
cloud.init();
exports.main = async (event, context) => {
let {latitude, longitude} = event;
let url = `http://api.map.baidu.com/staticimage/v2?ak=${process.env.BAIDU_MAP_AK}¢er=${longitude},${latitude}&markers=${longitude},${latitude}&width=400&height=300&zoom=15`;
let response = await axios.get(url, {responseType: 'arraybuffer'});
let fileExtension = url.split('.').pop();
let result = await cloud.uploadFile({
cloudPath: `map-snapshot-${Date.now()}.${fileExtension}`,
fileContent: response.data
});
return result.fileID;
}
```
注意事项:
1. 需要在小程序后台设置云环境,并在云函数中配置环境变量BAIDU_MAP_AK为百度地图API的AK。
2. 由于云函数需要访问外部URL,需要在小程序后台的开发设置中配置服务器域名白名单。
3. 由于百度地图API需要AK才能使用,需要在百度地图开发者中心申请AK并开通相应的API权限。
阅读全文