时间戳

首页 > 解决方案 > 使用 Python 查找 Google 地图的边界

python-3.x - 使用 Python 查找 Google 地图的边界

问题描述

我在 Jupyter 笔记本中使用此代码打开 Google 地图。

import gmaps

with open('apikey.txt') as f:
    apikey = f.readline()
    f.close
gmaps.configure(api_key = apikey)

coordinates = (35.5, 140)
map = gmaps.figure(center=coordinates, zoom_level=10, layout={'width': '800px', 'height': '600px'} )
map

我想用 Python 3.6 找到地图的极限。

似乎这可以在 JavaScript 中使用getBounds方法完成，该方法为显示的地图的 SW 和 NE 角提供纬度和经度。此外，JavaScript 似乎允许使用bounds_changed事件跟踪更改。

这正是我想要做的，但我无法在 Python 中看到。

我浏览了 gmaps 0.9.0 和 googlemaps 4.4.0 插件都没有成功。

有人做过吗？

标签： python-3.xgoogle-maps-api-3

解决方案

你必须使用 Flask 来解决这个问题。

pip install flask

templates使用 python-flask在你的根项目文件夹中创建一个文件夹。这是烧瓶的特定行为，它总是html从templates文件夹中查找文件。并创建一个app.py来启动我们的烧瓶应用程序。

您的项目配置必须至少包含该配置。

.
├── app.py
├── _data
    └── poi.csv
├── _templates
    └── index.html

只需从这个问题中得到这个纬度，并填充一些数据，以便更清楚地了解如何填充数据。

数据/poi.csv

dataa,SclId,Latitude,Longitude,datab
dataa1,HAT-0,44.968046,-94.420307,datab1
dataa2,HAT-1,44.33328,-89.132008,datab2
dataa3,HAT-2,33.755787,-116.359998,datab3

应用程序.py

# python version 3.8.2
import os
from flask import Flask, render_template
from dotenv import load_dotenv
load_dotenv()

class Location:
    def __init__(self,latitude,longitude,produto):
        self.lat = latitude
        self.lon = longitude
        self.nome = produto


def read_data_from_file(caminho):
    lista = list()
    with open(caminho) as csv_file:
        csv_reader = csv.reader(csv_file, delimiter=',')
        next(csv_reader)#skip headers
        for row in csv_reader:
            lista.append(Location(row[2], row[3], row[1]))            
        return lista

app = Flask(__name__)
app.config['API_KEY'] = os.getenv("APIKEY")#load google maps api key

def read_dataset(dataset):
    items = list()
    for i in dataset:
        items.append([i.lat, i.lon, i.nome])
    return items

poidata = read_dataset('data/poi.csv')

@app.route('/')
def index():
    context = {
        "key": app.config['API_KEY'],
        "poidata": poidata
    }
    return render_template('./index.html', poidata=poidata, context=context)


if __name__ == '__main__':
    app.run(debug=False)

模板/index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Flask with gmaps</title>
  <style>
    #map-canvas {
      height: 500px;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="map-canvas">
  </div>
  <script>
    const poiarray = JSON.parse('{{ poidata | tojson | safe}}');

    fillMapItems = (elements, map) => {
      const bounds = new google.maps.LatLngBounds();
      elements.forEach((item, index) => {
        const marker = new google.maps.Marker({ position: new google.maps.LatLng(item[0], item[1]), title: item[2], map: map });
        bounds.extend(marker.position);
      })
      map.fitBounds(bounds);
    }
    showMap = () => {
      const map = new google.maps.Map(document.getElementById('map-canvas'));
      fillMapItems(poiarray, map)
    }
  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key={{ context.key }}&callback=showMap">
  </script>
</body>

</html>

在此代码中，我使用python-dotenv，但它的使用是完全可选的，您可以使用您的方法从文件系统加载 api 密钥加载 env 变量。

在这一行中，从 googlemaps 调用 LatLngBounds 类型，我们将迭代中的每个项目放在这个“列表”中，完成迭代后，只需将地图设置为适合所有点的距离。

const bounds = new google.maps.LatLngBounds();

如果您需要一些澄清，请告诉我。

推荐阅读