小程序如何点击MARKER后marker生成MARKER属性里面自带的图片

1. 首先，需要在小程序中使用地图组件，如百度地图组件或腾讯地图组件。

2. 在地图上添加marker，并设置marker的属性。可以设置marker的图标为自定义图片，如下示例代码：

// 添加marker
mapContext.addMarker({
  id: 1,
  latitude: 39.914935,
  longitude: 116.404269,
  iconPath: '/images/marker.png',
  width: 30,
  height: 30
})

3. 在marker的点击事件中，获取到marker的属性，并使用wx.previewImage预览图片，如下示例代码：

// marker点击事件
onMarkerTap: function (e) {
  // 获取marker属性
  var markerId = e.markerId
  var marker = markers[markerId]
  var imgSrc = marker.iconPath

  // 预览图片
  wx.previewImage({
    urls: [imgSrc],
    current: imgSrc
  })
}

其中，markers为所有marker的数组，可以在添加marker时将其添加到数组中。

4. 最后，在小程序中显示地图即可。当点击marker时，就可以预览marker属性中的自带图片了。

相关问题

如何点击MARKER后marker生成MARKER属性里面自带的图片

要实现点击Marker后，在Marker属性中显示自带图片，可以按照以下步骤操作：

1.在创建Marker时，为Marker设置自带图片，可以使用MarkerOptions中的icon方法，如下所示：

MarkerOptions markerOptions = new MarkerOptions()
    .position(new LatLng(40.7128, -74.0060))
    .title("New York City")
    .icon(BitmapDescriptorFactory.fromResource(R.drawable.marker_icon));

其中，R.drawable.marker_icon是自带图片的资源ID。

2.为GoogleMap对象设置OnMarkerClickListener，当用户点击Marker时，会触发OnMarkerClickListener中的onMarkerClick方法。

mMap.setOnMarkerClickListener(new GoogleMap.OnMarkerClickListener() {
    @Override
    public boolean onMarkerClick(Marker marker) {
        // 在Marker属性中显示自带图片
        marker.showInfoWindow();
        return true;
    }
});

在onMarkerClick方法中，调用Marker的showInfoWindow方法，即可在Marker属性中显示自带图片。

3.如果需要在Marker属性中显示自定义的内容，可以使用Marker的setInfoWindowAdapter方法。在实现InfoWindowAdapter接口的类中，重写getInfoWindow和getInfoContents方法，分别返回自定义的InfoWindow视图和内容视图。

mMap.setInfoWindowAdapter(new GoogleMap.InfoWindowAdapter() {
    @Override
    public View getInfoWindow(Marker marker) {
        // 返回自定义的InfoWindow视图
        return null;
    }

    @Override
    public View getInfoContents(Marker marker) {
        // 返回自定义的内容视图
        return null;
    }
});

以上就是实现点击Marker后，在Marker属性中显示自带图片的方法。

小程序云开发点击MARKER后marker生成MARKER图标中间出现自带的图片

要实现这个功能，需要以下步骤：

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：

<view class="map-container">
  <map id="map" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" 
    bindmarkertap="onMarkerTap" show-location>
  </map>
</view>

2. 在js文件中定义markers和onMarkerTap函数：

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. 在云函数中获取地图截图并保存到云存储中：

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}&center=${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权限。