uniapp 高德地图 JS API 聚合点

<template>
	<view :style="{'height':windowHeight}" class="flex flex-column">
		<!--头部-->
		<navbarNew :headerIndex="999" headerBG="#fff" :customHeader="true" :bounding="true">
			<view slot="xHeader" class="flex flex-center flex-vcenter" style="padding: 0 8rpx;">
				<view class="menu flex flex-between flex-vcenter flex-1">
					<view class="flex-1 flex flex-vcenter flex-center f-s-32">聚合点</view>
				</view>
			</view>
		</navbarNew>
		<view class="mapBox flex-1 flex ">
			<view id='mapContainer' class="flex-1" :style="{'height':mapHeight}"></view>
		</view>
	</view>
</template>
<script>
	var map;
	import navbarNew from "@/components/navbarNew.vue";
	export default {
		components: {
			navbarNew
		},
		data() {
			return {
				searchValue: '',
				latitude: 25.03,
				longitude: 102.73,
				parkList: [{
						latitude: 25.1323,
						longitude: 102.8834,
						name: '野鸭湖农家乐',
						id: 1
					},
					{
						latitude: 25.1373,
						longitude: 102.8884,
						name: '绿水古木农家乐',
						id: 2
					}, {
						latitude: 25.1673,
						longitude: 102.8884,
						name: '天宝牧海农家乐',
					
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp是一款跨平台的移动应用开发框架,而高德地图是一款广泛使用的地图服务平台。在uniapp中内置了高德地图,使得开发者可以方便地在应用中使用地图功能。 聚合高德地图提供的一种功能,它可以将地图上的大量标注聚合起来,以提升地图的可视化效果和交互体验。在开发应用时,我们可以通过uniapp内置的高德地图组件,结合聚合功能,实现地图上大量标注的高效展示。 要使用聚合功能,我们首先需要在应用中引入高德地图组件,并设置地图的初始化参数,如地图的中心坐标、缩放级别等。然后,我们可以通过调用高德地图的Marker对象来添加各个标注,并设置每个标注的经纬度、图标等属性。 当我们需要使用聚合功能时,可以通过高德地图的Cluster对象来实现。我们可以将所有的标注传递给Cluster对象,并设置聚合的样式、击事件等。Cluster对象会根据一定的规则将附近的标注聚合在一起,形成一个聚合。当用户聚合时,可以通过击事件获取到该聚合下的所有标注,以便进一步操作或展示。 通过在uniapp中使用内置的高德地图组件和聚合功能,我们可以轻松实现地图的展示和标注聚合,为用户提供更好的地图浏览体验。利用这些功能,我们可以开发一些基于地图的应用,如地检索、附近的人等功能,丰富用户的使用场景。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值