高德地图-当默认打开InfoWindow信息窗体时,setCenter()无法居中

本文主要是介绍高德地图-当默认打开InfoWindow信息窗体时,setCenter()无法居中,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

最近在研究地图的 API,对比了一下 高德地图百度地图,最后选择了高德地图。在开发遇到点小问题,记录一下。

背景

需求功能是,点击任意(维护的)坐标后,跳转到该坐标,并以该坐标为中心,并且默认显示该地址 MarkerinfoWindow 信息窗体。

问题是,当点击任意坐标后, infoWindow 信息窗体可以默认打开,但是无法将地图中心设置为当前 Marker 的坐标,位置无法居中。用户体验十分不好。

解决方案

问题代码:

const onSelect = (position: number[], title: string) => {  const content = `  <div style="width: fit-content; padding: 4px; text-align: center;">  <b>${title}</b>  <br/>  <br/>  坐标:[${position[0]}, ${position[1]}]  </div>`;  // 设置坐标为屏幕中心map.setCenter(position);  const marker = new AMap.Marker({  position: position  });  const infoWindow = new AMap.InfoWindow({  isCustom: false, content: content,  offset: new AMap.Pixel(0, -35)  });  map.add(marker);  // 显示信息窗体infoWindow.open(map, new AMap.LngLat(...position));  // 信息窗体点击事件marker.on('click', (e: any) => infoWindow.open(map, e.target.getPosition()));  
};

解决方案:

const onSelect = (position: number[], title: string) => {  const content = `  <div style="width: fit-content; padding: 4px; text-align: center;">  <b>${title}</b>  <br/>  <br/>  坐标:[${position[0]}, ${position[1]}]  </div>`;  const marker = new AMap.Marker({  position: position  });  const infoWindow = new AMap.InfoWindow({  isCustom: false, content: content,  offset: new AMap.Pixel(0, -35)  });  map.add(marker);  // 显示信息窗体infoWindow.open(map, new AMap.LngLat(...position));  // 信息窗体点击事件marker.on('click', (e: any) => infoWindow.open(map, e.target.getPosition()));  // 设置坐标为屏幕中心map.setCenter(position);
};

infoWindow 信息窗体代码放在设置坐标中心的上面即可

猜测渲染周期导致

这篇关于高德地图-当默认打开InfoWindow信息窗体时,setCenter()无法居中的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/630490

相关文章

Flask解决指定端口无法生效问题

《Flask解决指定端口无法生效问题》文章讲述了在使用PyCharm开发Flask应用时,启动地址与手动指定的IP端口不一致的问题,通过修改PyCharm的运行配置,将Flask项目的运行模式从Fla... 目录android问题重现解决方案问题重现手动指定的IP端口是app.run(host='0.0.

Android WebView无法加载H5页面的常见问题和解决方法

《AndroidWebView无法加载H5页面的常见问题和解决方法》AndroidWebView是一种视图组件,使得Android应用能够显示网页内容,它基于Chromium,具备现代浏览器的许多功... 目录1. WebView 简介2. 常见问题3. 网络权限设置4. 启用 JavaScript5. D

Win32下C++实现快速获取硬盘分区信息

《Win32下C++实现快速获取硬盘分区信息》这篇文章主要为大家详细介绍了Win32下C++如何实现快速获取硬盘分区信息,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 实现代码CDiskDriveUtils.h#pragma once #include <wtypesbase

SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法

《SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法》本文主要介绍了SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法,具有一定的参考价值,感兴趣的可以了解一下... 目录方法1:更改IDE配置方法2:在Eclipse中清理项目方法3:使用Maven命令行在开发Sprin

MySQL9.0默认路径安装下重置root密码

《MySQL9.0默认路径安装下重置root密码》本文主要介绍了MySQL9.0默认路径安装下重置root密码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们... 目录问题描述环境描述解决方法正常模式下修改密码报错原因问题描述mysqlChina编程采用默认安装路径,

Python如何实现PDF隐私信息检测

《Python如何实现PDF隐私信息检测》随着越来越多的个人信息以电子形式存储和传输,确保这些信息的安全至关重要,本文将介绍如何使用Python检测PDF文件中的隐私信息,需要的可以参考下... 目录项目背景技术栈代码解析功能说明运行结php果在当今,数据隐私保护变得尤为重要。随着越来越多的个人信息以电子形

解决jupyterLab打开后出现Config option `template_path`not recognized by `ExporterCollapsibleHeadings`问题

《解决jupyterLab打开后出现Configoption`template_path`notrecognizedby`ExporterCollapsibleHeadings`问题》在Ju... 目录jupyterLab打开后出现“templandroidate_path”相关问题这是 tensorflo

Idea实现接口的方法上无法添加@Override注解的解决方案

《Idea实现接口的方法上无法添加@Override注解的解决方案》文章介绍了在IDEA中实现接口方法时无法添加@Override注解的问题及其解决方法,主要步骤包括更改项目结构中的Languagel... 目录Idea实现接China编程口的方法上无法添加@javascriptOverride注解错误原因解决方

golang1.23版本之前 Timer Reset方法无法正确使用

《golang1.23版本之前TimerReset方法无法正确使用》在Go1.23之前,使用`time.Reset`函数时需要先调用`Stop`并明确从timer的channel中抽取出东西,以避... 目录golang1.23 之前 Reset ​到底有什么问题golang1.23 之前到底应该如何正确的

C#实现系统信息监控与获取功能

《C#实现系统信息监控与获取功能》在C#开发的众多应用场景中,获取系统信息以及监控用户操作有着广泛的用途,比如在系统性能优化工具中,需要实时读取CPU、GPU资源信息,本文将详细介绍如何使用C#来实现... 目录前言一、C# 监控键盘1. 原理与实现思路2. 代码实现二、读取 CPU、GPU 资源信息1.