【腾讯地图自适应缩放-fitBounds()】

最新推荐文章于 2025-04-09 21:00:00 发布

原创

最新推荐文章于 2025-04-09 21:00:00 发布 · 1.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #腾讯地图

这篇博客介绍了如何利用腾讯地图的fitBounds()方法来设置地图显示范围。通过循环坐标列表获取地图的左上和右下角坐标，然后结合这两个坐标调用fitBounds()，确保地图适配所有点位。

参考连接：https://lbs.qq.com/webDemoCenter/glAPI/glMap/mapBounds

逻辑说明：基于腾讯地图fitBounds()方法设置地图显示范围，需要获取左上和右下两个点位的坐标作为参考。循环坐标列表，得到上下左右最远的点，之后将左上和右下分别组合，获得两个点。调用方法fitBounds()

获取左上和右下角

/**
* 获取左上和右下角
* @param getFinalPoint {Array<Array<Object>>} [[{lat, lng}]]
*/
function getFinalPoint(paths){
   
   
    if(paths.length > 0){
   
   
        let maxLng = paths[0].lng;
        let minLng = paths[0

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

seiEight

关注关注

7
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

《Leaflet 基础知识点》- 绘制圆、线、矩形和多边形

前端技术

07-14

5245

前言注意绘制的都是矢量图层，所以在 Vector Layers 分类下：绘制圆官网API 示例 // 圆：半径 radius 的单位为米 var circle = L.circle([31.537628173828125,121.190185546875], {radius: 2000}).addTo(map); // 跳到圆的范围 map.fitBounds(circle.getBounds()); 效果线官网API 示例 // 线：坐标点 var la...

Tableau_day6

zz0377的博客

10-25

462

1. 填充地图 1.1 各省售电量填充地图导入数据设置地理格式双击省市，生成一个符号地图将当期值放入颜色，生成填充地图（在地理面积内进行颜色填充）设置颜色设置未知设置位置标签，显示位置信息修改某些位置信息要调整注释边框此时有两个位置标签，将原来的位置标签设置为从不显示同理，处理蒙东，``等标签当使用鼠标缩放地图之后，地图没有办法居中，此时可以点击左上角重置地图 1.2 地图格式设置选择

参与评论您还未登录，请先登录后发表或查看评论

百度离线地图开发API

bigemap的博客

03-10

1162

离线地图开发主要有两部分组成：1、获取离线地图数据；因为离线地图一般都是局域网，所以需要离线地图数据放在内网中使用；2、离线地图服务器搭建以及二次开发接口提供，离线地图是一种服务，就像我们Apache提供的WEB服务器一样，他是一种准们的地图服务：提供了包括 WEB服务、TMS服务、WMTS服务等等。离线地图数据的获取：可以通过【大地图下载器】下载到。要进...

mapbox fitbounds 定位到geojson数据边界

南山老沙

03-29

974

mapbox 定位到多面的边界，利用turf.js 的bbox进行计算geojson的边界

腾讯地图 定位

IT_iosers的博客

06-22

749

搜索金牛区欢乐谷发现返回的类型为CITY_LIST 后根据官方代码发现问题未设置相对应的城市或地区 this.searchService.setLocation(this.region); 搜索金牛区欢乐谷发现返回的类型为CITY_LIST // 官方案例 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charse.

腾讯地图qqmap-wx-jssdk

08-14

腾讯地图QQMap-WX-JSSDK是腾讯地图提供的一款JavaScript接口库，专为微信小程序设计，使得开发者能够方便地在微信小程序中集成和使用腾讯地图的功能。这个SDK提供了丰富的地图操作和地理信息服务，帮助开发者实现从...

腾讯位置服务tlbs-map地图组件库正式开源

热门推荐

lmx的博客

04-02

1万+

问题描述:最近在做微信小程序项目,根据业务需求需要绘制起点到终点的线路图，但是需要将起点和终点都都在地图的可视区域内显示，针对这个问题，我采取了以下下解决方案，效果图如下所示 xml: <view class="container"> <view> <map id="myMap" style="width: 100%; height: {{hei...

mapbox 自动定位到数据标记集中的点 fitBounds与flyTo

weixin_42849516的博客

05-20

1757

我先封装了一个方法找到数据集中的东南角西北角的经纬度这里我用到了lodash这个库（这个库我还是比较推荐用的可以提升开发效率） import { maxBy, minBy } from 'lodash' /** * 获取坐标的边框 * @param {*} arr * @returns */ export function getBounds(arr, opt = { lat: "lat", lng: 'lng', isArr: false }) { const { lat,

【WebGIS实例】（2）MapboxGL按边界定位：fitBounds

ReBeX

11-03

3439

MapboxGL按边界定位：fitBounds

mapbox给地图设置fitbounds不起作用

weixin_41424721的博客

04-27

986

给地图设置fitbounds不起作用的原因原来是地图没有加载完 // 地图加载完成事件 this.map.on('load', () => { this.map.fitBounds(this.mapBounds) })

记录：百度地图API BMap实现fitBounds的效果

汪同学丶的博客

04-16

1219

基于百度API： 1、getViewport：根据提供的地理区域或坐标获得最佳的地图视野，返回的对象中包含center和zoom属性，分别表示地图的中心点和级别。此方法仅返回视野信息，不会将新的中心点和级别做用到当前地图上 2、centerAndZoom：设初始化地图。如果center类型为Point时，zoom必须赋值，范围3-19级，若调用高清底图（针对移动端开发）时，zoom可赋值范围...

Mapbox fitBounds 自动调整地图视图

qq_41283814的博客

03-25

649

使用方法如下：使地图自动调整边界范围，以便完整展现地图要素。

百度地图多个兴趣点（经纬度、坐标点）需要同时显示在地图上，如何设置自动缩放等级

boyStray的博客

07-29

7451

如果有多个兴趣点（经纬度、坐标点）需要同时显示在地图上，如何设置缩放比例。如果缩放太细，那么一个屏幕放不下，如果缩放太粗，显示就太密集。需要在程序中根据点的分布来设置。百度地图Android SDK v3.5.0从3.5版本开始，它的缩放级别从3-20，总共18个级别，如下： {"10m", "20m", "50m", "100m", "200m", "500m", "1km", "2km"

react腾讯地图绘制路线，视图自适应定位到路线区域

北鼻娃的博客

06-14

627

061：mapboxGL利用fitBounds同时将多个点放在可视范围内

大剑师兰特的GIS世界

10-22

764

本示例的目的是介绍演示如何在vue+mapbox中加载geojson数据，利用fitBounds同时将多个点放在可视范围内。

mapbox中定位到某个具体点，论fitBounds与flyTo的区别

CherryLee_1210的博客

09-18

7860

1、用法 this.map = new mapboxgl.Map({ container: this.$refs.basicMapbox, style: this.mapStyle, center: [116.67014887634832, 34.63229347905002], zoom: 12, bearing: 0, pitch: 45 }) // fitBound...