高德地图获取众多点位的中心点

这段代码用于计算一组经纬度坐标点的中心位置。通过将每个点的经纬度转换为三维坐标并求平均,最后再转换回经纬度,得出坐标集合的中心点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

points=[
  {
    "id": 1,
    "longitude": 120.11888122558594,
    "latitude": 30.8775577545166,
    "iconPath": "",
    "width": 30,
    "height": 30
  },
  {
    "id": 2,
    "longitude": 120.12348937988281,
    "latitude": 30.878713607788086,
    "iconPath": "",
    "width": 30,
    "height": 30
  }
]
getPointsCenter(points) {
	    console.log(points, 'pomuuu')
        var point_num = points.length; //坐标点个数
        var X = 0, Y = 0, Z = 0;
        for(let i = 0; i< points.length; i++) {
          var lat, lng, x, y, z;
          lat = parseFloat(points[i].latitude) * Math.PI / 180;
          lng = parseFloat(points[i].longitude) * Math.PI / 180;
          x = Math.cos(lat) * Math.cos(lng);
          y = Math.cos(lat) * Math.sin(lng);
          z = Math.sin(lat);
          X += x;
          Y += y;
          Z += z;
        }
        X = X / point_num;
        Y = Y / point_num;
        Z = Z / point_num;
 
        var tmp_lng = Math.atan2(Y, X);
        var tmp_lat = Math.atan2(Z, Math.sqrt(X * X + Y * Y));
 
        return [tmp_lat * 180 / Math.PI, tmp_lng * 180 / Math.PI];
      },
### 如何使用高德地图 API 获取自定义点位 为了在高德地图上显示特定位置并对其进行操作,开发者通常会利用 `Marker` 对象来表示这些地理位置。通过设置不同的属性和调用相应的方法,可以实现对这些标记的定制化处理。 #### 创建 Map 实例 首先,在页面中初始化一个地图实例,并指定其容器以及初始视图参数: ```javascript // 初始化地图对象,设定地图中心点坐标及缩放级别 var map = new AMap.Map('container', { zoom: 10, center: [116.397428, 39.90923] // 默认北京天安门作为中心点 }); ``` #### 添加自定义 Marker 接着,可以通过创建一个新的 `AMap.Marker()` 来向地图添加自定义的位置标记。这里可以根据实际需求调整图标样式、偏移量等特性[^1]: ```javascript // 定义要添加到地图上的 marker 的配置项 var markerOptions = { position: new AMap.LngLat(116.397428, 39.90923), // 经纬度信息 title: '我的家', }; // 使用上述选项创建 marker 并将其放置于地图之上 var marker = new AMap.Marker(markerOptions); map.add(marker); // 将 marker 加入到地图层中 ``` #### 自定义 Marker 内容 如果希望进一步美化或增强交互体验,则可通过修改 `content` 属性来自定义 Marker 显示的内容。这允许嵌入 HTML 片段或其他富媒体资源[^2]: ```html <div id="custom-marker"> <img src="./path/to/icon.png"/> </div> ``` ```javascript marker.setLabel({ offset: new AMap.Pixel(-15, 20), content: document.getElementById('custom-marker').innerHTML }); ``` #### 打开信息窗口 当用户击某个 Marker 后展示更多信息时,可借助 InfoWindow 控件完成此功能。先准备好想要呈现的信息模板,再关联至对应的事件监听器[^3]: ```javascript // 构建 info window 的主体结构 var infoWindowContent = '<h4>欢迎来到这里!</h4>' + '<p><strong>地址:</strong>北京市东城区王府井大街8号</p>'; // 新建 info window 实例并将之前准备好的内容赋值进去 var infoWindow = new AMap.InfoWindow({content: infoWindowContent}); // 注册 click 事件处理器以便触发 info window 的弹出动作 marker.on('click', function () { infoWindow.open(map, this.getPosition()); }); ``` 以上就是关于如何运用高德地图 JavaScript API 进行自定义点位的相关介绍与实践案例说明。按照这样的流程即可轻松实现在网页应用内集成个性化地理信息服务的目的。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值