uniapp nvue页面 实现地图上有多个makers，makers的callout自定义实现展示，包含图片文字和按钮
在uni-app中使用nvue（Native View）页面来实现地图上的动态标记（Markers）以及自定义的callout（信息窗口），可以通过uni-app的<map>组件配合自定义的nvue视图来完成。但需要注意的是，<map>组件在nvue中并不直接支持像H5或App-vue中那样的详细配置（如直接设置callout内容），因此需要一些变通的方法来实现。
下面是一个基本的步骤和思路，用于在nvue页面的地图上动态展示多个Markers，并为每个Marker实现自定义的callout：
- 使用<map>组件加载地图
首先，在nvue页面中添加<map>组件，并设置必要的属性如id、longitude、latitude、scale等。
html
<map id="map" longitude="116.397428" latitude="39.90923" scale="14" @markertap="onMarkerTap"></map>
- 动态添加Markers
使用uni.createMapContext获取地图上下文，然后使用addMarkers方法动态添加Markers。Markers的数据中可以包含自定义的ID或其他用于区分的信息。
javascript
let markers = [{
id: 1,
latitude: 39.90403,
longitude: 116.40739,
width: 50,
height: 50,
iconPath: '/static/location.png', // marker图标路径
// 其他自定义字段
}];
let mapCtx = uni.createMapContext('map', this);
mapCtx.addMarkers({
markers: markers
});
- 实现自定义的Callout
由于nvue的<map>组件不直接支持自定义callout，你需要自己实现这一功能。一个常见的做法是，在Marker被点击时（监听markertap事件），在Marker的位置上动态显示一个自定义的视图（如使用<view>标签），这个视图可以包含图片、文字和按钮等元素。
javascript
methods: {
onMarkerTap(e) {
// 假设e.markerId是点击的Marker的ID
let markerId = e.markerId;
// 根据markerId找到对应的Marker数据（可能需要从数据列表中查找）
// ...
// 显示自定义的callout
this.showCallout(e.latitude, e.longitude, markerData); // 假设markerData是包含要显示信息的对象
},
showCallout(latitude, longitude, data) {
// 这里可以根据latitude和longitude计算callout的显示位置
// 然后在页面上动态添加一个<view>来作为callout，设置其位置、样式和内容
// 示例：
// this.$refs.calloutView.style.left = `${x}px`; // x是计算出的x坐标
// this.$refs.calloutView.style.top = `${y}px`; // y是计算出的y坐标
// 注意：在nvue中可能需要使用其他方式来动态设置样式或位置
}
}
注意：在nvue中，由于不能直接操作DOM，因此不能像Vue.js那样直接设置元素的样式。你可能需要使用nvue提供的样式绑定机制（如果有的话）或者通过改变数据来触发nvue页面的重新渲染，从而间接改变元素的位置或样式。
- 管理和隐藏Callout
你还需要管理Callout的显示和隐藏。例如，当用户点击其他Marker或地图的其他部分时，可能需要隐藏当前的Callout。这可以通过监听地图的点击事件（tap）和适当的数据管理来实现。
结论
在nvue页面中实现自定义的callout确实比在H5或App-vue中更复杂一些，因为nvue的限制更多。但是，通过上面的方法，你可以达到在地图上动态展示多个Markers并为每个Marker实现自定义callout的效果。
网友评论