初始化天地图，center中心点坐标问题（数据转换）

已于 2022-12-29 14:45:41 修改
阅读量603 收藏
点赞数 1
文章标签： javascript vue
于 2022-12-21 10:19:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cnbyz/article/details/128393603
版权
  • 采用VueTianditu  vue-tianditu | VueTianditu (soullyoko.github.io)
  • 报错
    • Error: <svg> attribute width: Expected length, "NaN".
    • Error: <svg> attribute viewBox: Expected number, "NaN -23 NaN 923".
  • 造成问题原因：
  • 解决方案
    • 首先判断中心点值是否存在，然后再显示地图
    • 若以上方式不行，可以直接初始化时给中心点赋值[0, 0]，后续对其修改就可以

cnbyz
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
天地图中实现让指定位置移动到地图中心
Mark_JF00的博客
03-11 5035
基于天地图让指定位置移动到地图中心并且在不刷新地图的前提下，使指定点的平移到底层地图的中心位置来实现较好的交互效果；
天地图-拾取经纬度坐标-实例
05-11
初始化地图：使用GIS库的函数创建地图实例，配置地图的中心点、比例尺、图层等信息，例如`var map = new ol.Map({ target: 'map', layers: [new ol.layer.Tile({ source: new ol.source.OSM() })], view: new ol....
设置图层地图中心点，以及地图缩放级别
ll_883963的博客
03-11 930
问题描述：创建一个新图层时，要求根据经纬度定位到该图层的中心点，并设置地图缩放级别。 方法描述：创建map.center.js，在需要的文件中引入他即可 import mapCenter from ‘./map.center.js’; mapCenter.setCenter(map, data); /* 根据计算中心点 定位地图 */ export default { //设置地图中心点事件 setCenter(map, data) { var list = [] data.map.
天地图专题三：根据标注点的范围确定天地图的中心点和缩放级别
热门推荐
liusaint1992的专栏
10-07 1万+
1.尽可能把所有的标注点放在我们地图的可视范围内。 2.在满足1的情况下，让缩放级别尽可能的高，以使我们可以看到更多的信息。 为了满足上面的需求，实际上就是要我们根据所有的标注点的经纬度，分析出初始化地图时的 地图中心点 和 地图缩放级别。
天地图获取点击位置的经纬度
qq_41117545的博客
10-30 1万+
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="keywords" content="天地图"/> <title>天地图－地图API－范例－地图拾取器</title> <style type="text/css"> .
天地图开发指南
shi860715的博客
11-10 8369
天地图开发指南 1 申请天地图key 1.1 注册账号 注册地址：https://uums.tianditu.gov.cn/register 1.2 申请开发者 登录后 ，申请开发者https://console.tianditu.gov.cn/api/register 1.3 创建应用 点击控制台，创建应用 1.4 天地图key 2.0 天地图api使用 2.1 创建第一个地图 <!DOCTYPE html> <html lang="en"> <head>
使用C#调用百度地图并实现坐标点的设置以及读取示例
08-18
HTML文件中，我们可以定义地图容器，并通过JavaScript代码初始化地图，设置中心点和缩放级别。例如： ```html ; width: 100%;"> ``` ```javascript var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap...
android 地图 更换中心点
01-30
总结起来，要在Android应用中更换百度地图的中心点和调整缩放比例，需要集成百度地图SDK，初始化MapView，设置地图状态，监听地图触摸事件以响应用户操作。理解这些基本操作将有助于你在实际开发中实现更丰富的地图...
html用百度的地图，显示指定坐标点并提示坐标点信息
01-23
// 初始化地图，设置中心点坐标和缩放级别 ``` 这里，`LONGITUDE`和`LATITUDE`是你要显示的坐标点的经度和纬度，`ZOOM_LEVEL`是地图的初始缩放级别。 5. **添加标记（Marker）**： 在指定坐标点上添加标记，...
63.（leaflet篇）leaflet+turf获取geojson面的中心点与质心.rar
01-10
// 初始化地图，设置视图坐标 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors' }).addTo...
天地图-第三篇-地图参数设置
cherry_vicent的专栏
01-21 2200
天地图-地图参数设置
vue3 使用天地图添加/删除标注点
Bannerparter的博客
11-27 3643
其中 markers.id = '你的id名' 这一步是必须的，因为下一步删除标注需要用到。这样就可以实现天地图添加或者删除标记点啦。删除就是根据我们所添加的id进行的。
前端地图坐标系详解
Aurora_1970s的博客
08-10 2270
1.地图类型 国外 国外一般就是GPS，谷歌地图 国内 百度地图，高德地图，腾讯地图，搜狗地图，天地图… 2.坐标系类型 WGS84坐标系 最常见的GPS，用的是WGS-84坐标系，也是原始坐标体系。一般用国际标准的GPS记录仪记录下来的坐标，都是GPS的坐标。 GCJ-02坐标系 国测局02年发布的坐标体系。又称火星坐标系。火星坐标系就是在84坐标系的基础上进行了一次加密偏移所得到的坐标系。在中国，必须至少使用GCJ-02的坐标体系。比如腾讯，高德都在用这个坐标体系。GCJ-02也是国内最广泛使用的坐标体
天地图开发--打点，圈画行政区域
qq_49266680的博客
07-11 2745
天地图 天地图的功能使用 关于天地图打点并且鼠标移入标点显示标点相关信息 2 . 对于行政区域进行圈画
国家地理信息服务平台——天地图使用指南
growing1224的博客
06-05 9688
使用准备 申请成为个人开发者或者企业开发者，获取调用地图api的key，下图为调用限额对比图。 开始绘制第一个地图 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="keywords" content="天地图"/> <tit..
天地图经常遇到的问题：1、怎么初始化地图。2、地图添加覆盖物后怎么不能进行拖拽。3、怎么把单位为米的坐标转换为WGS84坐标。
qq_920189602的博客
11-02 3275
我上面这些坐标的单位是米，怎么把这些米为到位的坐标转换为WGS84坐标呢？他们之间的换算关系是多少呢
vue中使用天地图
lemon今天学习了吗？的博客
07-08 5453
天地图官网：天地图API一、介绍：天地图JavaScript API 4.0是一套符合HTML5.0规范的的应用程序接口，以HTML 5.0的形式提供各种地图服务和数据，如地图展示、标注、定位等。为开发者提供了快速调用天地图在线地理信息服务的通道，包括快速创建地图、调用地图、地名搜索以及在地图上添加覆盖物等。支持PC端和移动端基于浏览器的地图应用开发，支持主流的HTML4.0和HTML5.0特性的地图开发。二、实现步骤：三、示例：vue +天地图实现地图上添加覆盖物； 四、效果展示：...
天地图如何给坐标点添加自定义名称
最新发布
07-11
天地图并没有直接提供给坐标点添加自定义名称的功能，但你可以通过在地图上添加自定义标记（marker）来实现给坐标点添加自定义名称的效果。以下是一个示例代码： ```javascript // 假设你有一个经纬度坐标和自定义名称 const lng = 116.397128; const lat = 39.916527; const customName = "自定义名称"; // 创建地图对象 const map = new T.Map("mapContainer"); // 设置地图的中心点和缩放级别 map.centerAndZoom(new T.LngLat(lng, lat), 15); // 创建自定义标记 const marker = new T.Marker(new T.LngLat(lng, lat)); // 创建信息窗口 const infoWindow = new T.InfoWindow(customName); // 绑定标记的点击事件 marker.addEventListener("click", function() { // 在点击标记时显示信息窗口 map.openInfoWindow(infoWindow, new T.LngLat(lng, lat)); }); // 将标记添加到地图上 map.addOverLay(marker); ``` 在上述代码中，`lng`和`lat`分别表示经度和纬度坐标，`customName`表示自定义的名称。通过创建一个地图对象，并设置地图的中心点和缩放级别，然后创建一个自定义的标记，并绑定点击事件，在点击标记时显示自定义的信息窗口，最后将标记添加到地图上。这样，当你在地图上点击该标记时，会出现一个带有自定义名称的信息窗口。 请注意，上述示例代码仅演示了基本的添加自定义名称的功能，你可以根据自己的需求进行扩展和使用。另外，天地图的API还提供其他功能，如绘制图形、搜索功能等，你可以在官方文档中查找更多相关信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值