Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
qq_16800119
unidocs-zh
提交
af228060
unidocs-zh
项目概览
qq_16800119
/
unidocs-zh
与 Fork 源项目一致
Fork自
DCloud / unidocs-zh
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
af228060
编写于
10月 15, 2021
作者:
d-u-a
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
map: 增加聚合API示例代码
上级
6f5f66a0
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
106 addition
and
1 deletion
+106
-1
docs/api/location/map.md
docs/api/location/map.md
+106
-1
未找到文件。
docs/api/location/map.md
浏览文件 @
af228060
...
...
@@ -39,7 +39,7 @@ mapContext
|setCenterOffset|OBJECT|设置地图中心点偏移,向后向下为增长,屏幕比例范围(0.25~0.75),默认偏移为[0.5, 0.5]||微信小程序|
|toScreenLocation|OBJECT|获取经纬度对应的屏幕坐标,坐标原点为地图左上角。||微信小程序|
|updateGroundOverlay|OBJECT|更新自定义图片图层。||App-nvue 3.1.0+,微信小程序|
|on|
EventHandle
|监听地图事件。||App-nvue 3.1.0+,微信小程序|
|on|
Method
|监听地图事件。||App-nvue 3.1.0+,微信小程序|
|$getAppMap||获取原生地图对象
[
plus.maps.Map
](
https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Map
)
|app-vue|1.9.3|
`$getAppMap()`
注意事项:
...
...
@@ -210,6 +210,111 @@ mapContext
```
地图聚合 API 示例(nvue)
缩小地图可看到多个 marker 合并为 1 个并显示聚合数量,放大地图后恢复
```
<template>
<view class="content">
<map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"></map>
</view>
</template>
<script>
const img = '/static/logo.png';
export default {
data() {
return {
latitude: 23.099994,
longitude: 113.324520,
}
},
onReady() {
this._mapContext = uni.createMapContext("map", this);
// 仅调用初始化,才会触发 on.("markerClusterCreate", (e) => {})
this._mapContext.initMarkerCluster({
enableDefaultStyle: false,
zoomOnClick: true,
gridSize: 60,
complete(res) {
console.log('initMarkerCluster', res)
}
});
this._mapContext.on("markerClusterCreate", (e) => {
console.log("markerClusterCreate", e);
});
this.addMarkers();
},
methods: {
addMarkers() {
const marker = {
id: 1,
iconPath: img,
width: 50,
height: 50,
joinCluster: true, // 指定了该参数才会参与聚合
label: {
width: 50,
height: 30,
borderWidth: 1,
borderRadius: 10,
bgColor: '#ffffff'
}
};
const positions = [{
latitude: 23.099994,
longitude: 113.324520,
}, {
latitude: 23.099994,
longitude: 113.322520,
}, {
latitude: 23.099994,
longitude: 113.326520,
}, {
latitude: 23.096994,
longitude: 113.329520,
}]
const markers = []
positions.forEach((p, i) => {
const newMarker = Object.assign(marker, p)
newMarker.id = i + 1
newMarker.label.content = `label ${i + 1}`
markers.push(newMarker)
this._mapContext.addMarkers({
markers,
clear: false,
complete(res) {
console.log('addMarkers', res)
}
})
})
}
}
}
</script>
<style>
.content {
flex: 1;
}
.map {
flex: 1;
}
</style>
```
## mapSearch 模块(仅app-nvue支持)
#### reverseGeocode(Object,callback)
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录