python - 将数据库中的所有纬度和经度标记放置到来自 sql 结果的 Openstreet/Leaflet map 上-6ren

python - 将数据库中的所有纬度和经度标记放置到来自 sql 结果的 Openstreet/Leaflet map 上

转载作者：行者123 更新时间：2023-12-01 07:27:40

我能够从我的数据库表中根据查询结果将一个标记放置到 map 上。问题是当我的结果超过一个时，我无法在 map 上放置多个标记。所以基本上，我想将 db 中 sql 查询的所有纬度和经度标记放置到 OSM/Leaflet MAP 上。

我见过类似的例子，但是编码不太一样。

def search_all(self):

    print ('Searching All...')

    looking = str(self.lookall.text())        

    conn = Connection to DB 

    cursor = conn.cursor()        
    query = "SELECT*FROM Relevant Tables"
    cursor.execute(query)    
    results = cursor.fetchall()
    self.tableWidget.setRowCount(0)        
    for row_number, row_data in enumerate(results):            
        self.tableWidget.insertRow(row_number)            
        for column_number, data in enumerate (row_data):                
            self.tableWidget.setItem(row_number,column_number,QtWidgets.QTableWidgetItem(str(data)))

            pass
        pass

for i in range(1,len(results)):


        lat = results[i][5]
    long = results[i][6]]

        print (lat)
    print (long)

结果打印如下:

        html = """<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
      integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
      integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
      crossorigin=""
    ></script>
  </head>
  <body>
    <div id="mapDiv" style="width: 1300px; height: 500px"></div>

    <script>
      var lat = { lat };
      var long = { long };
      var len = { lent };
      var i = 0;

      for (var i = 0; i < { lent }; i++) {{
        marker = new L.marker({ lat }, { lon }).addTo(map);
      }}

      map = L.map("mapDiv").setView([lat, lon], 13);

      L.tileLayer("https://tile.openstreetmap.org/{{z}}/{{x}}/{{y}}.png", {{
        attribution:
          'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',

        maxZoom: 20
      }}).addTo(map);

      // add marker to the map

      marker = L.marker([lat, lon]).addTo(map);
    </script>
  </body>
</html>"""

    os2 = html.format(lat = lat,lon = lon , len = lent)

    self.view.setHtml(os2)```

我可以从 DB 的 SQL 查询中获取经纬度。我不太确定如何将其实现到 OSM 的 HTML 代码中。我所做的字符串格式化似乎没有达到目的。由于没有更新 map

最佳答案

本例的想法是连接坐标:

# ...
coordinates = []
for result in results:
    coordinates.append((result[5], result[6]))

lat_center = sum([coordinate[0] for coordinate in coordinates]) / len(
    coordinates
)
lng_center = sum([coordinate[1] for coordinate in coordinates]) / len(
    coordinates
)

html = r"""
<!DOCTYPE html>
    <html>
        <head>
        <style type="text/css">
                html { height: 100%; }
                body { height: 100%; margin: 0; padding: 0 }
                #mapid { height: 100% }
        </style>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
        <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
        </head>
    <body>
        <div id="mapDiv" style="width:100%; height:100%"></div>
        <script>
"""
html += "var map = L.map('mapDiv').setView([{lat}, {lng}], 10);".format(
    lat=lat_center, lng=lng_center
)
html += """
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
"""

for latitude, longitude in coordinates:
    html += "L.marker([{lat}, {lng}]).addTo(map);\n".format(
        lat=latitude, lng=longitude
    )

html += "</script> </body> </html>"
self.view.setHtml(html)

输出:

如果你想更优雅地做到这一点，你可以使用 Jinja2或更好folium

关于python - 将数据库中的所有纬度和经度标记放置到来自 sql 结果的 Openstreet/Leaflet map 上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57376696/

文章推荐： java - 我的代码的 For 循环出错？

文章推荐： jquery - 使用 JSON 时 jQuery 中 if 语句的说明

javascript - 增加长度时 Openstreet map 显示空白部分
我正在我的网页上显示 openstreet map ，原始尺寸为 970/256(宽度/高度)。效果很好。我还在页面上添加了一个按钮。当用户按下此按钮时， map 宽度会增加，跨越页面的总宽度。但是本
javascript - 在 Openstreet map 上移动标记 - Leaflet API
伙计们，我是使用 openstreetmaps 的新手。我在上面放了一些带有自定义图标、嵌入弹出窗口等的标记。现在，我真的需要知道如何在 Openstreet map 上移动标记。我正在使用 Leaf
javascript - 使用带有标记的 openstreet map 和带有 javascript 的多段线
伙计们，我是使用 openstreetmaps 的新手。我知道如何使用 google 和 bing map api。我的要求是创建一个示例 map ，其中仅包含一些标记以在它们之间定位和绘制折线。我已
android - 使用 osmdroid 在 OpenStreet map 上制作动画标记
我正在使用给定 here 的谷歌地图标记动画逻辑. 我的标记得到动画，但是在每个 marker.setPosition(newPosition); 之后我需要调用 mapView.invalidate
python - 将数据库中的所有纬度和经度标记放置到来自 sql 结果的 Openstreet/Leaflet map 上
我能够从我的数据库表中根据查询结果将一个标记放置到 map 上。问题是当我的结果超过一个时，我无法在 map 上放置多个标记。所以基本上，我想将 db 中 sql 查询的所有纬度和经度标记放置到 OS
ios - 为什么 MKTileOverlay 在 ios、swift4 中为 openstreet map 一遍又一遍地重复相同的图 block
我将 OpenStreet map 与我们自己的 iOS map 服务器一起使用。对于 iOS，我找不到任何可以与我们开放的 StreetMap 服务器一起使用的第三方库(免费或付费)。然后我决定使用

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

python - 将数据库中的所有纬度和经度标记放置到来自 sql 结果的 Openstreet/Leaflet map 上