2017-05-27 30 views
1

私はPythonとFlaskを使用してwebappを構築しており、最後のページはflask-googlemapsです。最後のページについては、ユーザーの現在地の緯度と経度を取得する必要があります。ここでPython Flask GoogleMapsユーザーの現在地を取得する緯度と経度

はここに私のrun.py

# coding: utf-8 

from flask import Flask, render_template 
from flask_googlemaps import GoogleMaps 
from flask_googlemaps import Map, icons 
import webbrowser 

app = Flask(__name__, template_folder="templates") 

GoogleMaps(app, key="my-key") 

@app.route('/') 
def mymap(): 
    mymap = Map(
       identifier="view-side", 
       varname="mymap", 
       style="height:720px;width:1100px;margin:0;", # hardcoded! 
       lat=37.4419, # hardcoded! 
       lng=-122.1419, # hardcoded! 
       zoom=15, 
       markers=[(37.4419, -122.1419)] # hardcoded! 
      ) 
    return render_template('example_mymap.html', mymap=mymap) 


if __name__ == "__main__": 
    webbrowser.open('http://127.0.0.1:5000') 
    app.run(debug=True, use_reloader=True) 

そして、私のexample_mymap.htmlであり、

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <title>Flask Google Maps Example</title> 
     <link rel="stylesheet" href="/static/css/bootstrap.min.css"> 
     {{mymap.js}} 
    </head> 
    <body> 
     <div class="container"> 
      <h1>Flask Google Maps Example</h1><hr> 
      {{ mymap.html }} 
     </div> 
    </body> 
</html> 

検索しようとしましたが、非常にいくつかの解決策を得ました。これを試しましたが、https://developers.google.com/maps/documentation/javascript/examples/map-geolocationが動作しませんでした。テンプレート本体に次のスクリプトを追加すると、何も起こりませんでした。

<script> 
     // Note: This example requires that you consent to location sharing when 
     // prompted by your browser. If you see the error "The Geolocation service 
     // failed.", it means you probably did not give permission for the browser to 
     // locate you. 
     var map, infoWindow; 
     function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: -34.397, lng: 150.644}, 
      zoom: 6 
     }); 
     infoWindow = new google.maps.InfoWindow; 

     // Try HTML5 geolocation. 
     if (navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(function(position) { 
      var pos = { 
       lat: position.coords.latitude, 
       lng: position.coords.longitude 
      }; 

      infoWindow.setPosition(pos); 
      infoWindow.setContent('Location found.'); 
      infoWindow.open(map); 
      map.setCenter(pos); 
      }, function() { 
      handleLocationError(true, infoWindow, map.getCenter()); 
      }); 
     } else { 
      // Browser doesn't support Geolocation 
      handleLocationError(false, infoWindow, map.getCenter()); 
     } 
     } 

     function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
     infoWindow.setPosition(pos); 
     infoWindow.setContent(browserHasGeolocation ? 
           'Error: The Geolocation service failed.' : 
           'Error: Your browser doesn\'t support geolocation.'); 
     infoWindow.open(map); 
     } 
    </script> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 
    </script> 

しかし、このスレッドの解決策を試してみましたが、Getting map location Pythonでもうまくいきませんでした。それは私に、このコード部分がlatlon = re.search("GPoint\(([^)]+)\)",raw).groups(0)であることを示すエラーメッセージを与えましたNoneです。ここでAttributeError: 'NoneType' object has no attribute 'groups'

# coding: utf-8 

from flask import Flask, render_template 
from flask_googlemaps import GoogleMaps 
from flask_googlemaps import Map, icons 
import webbrowser 

app = Flask(__name__, template_folder="templates") 

GoogleMaps(app, key="my-key") 

def get_current_location_lat_and_long(url): 
    import re, requests 

    raw = requests.get(url).text 
    latlon = re.search("GPoint\(([^)]+)\)",raw).groups(0) 
    lat,lon = map(float,latlon[0].split(",")) 
    return lat,lon 

@app.route('/') 
def mymap(): 

    cur_lat, cur_lng = get_current_location_lat_and_long(url='http://www.geoiptool.com/') 

    mymap = Map(
       identifier="view-side", 
       varname="mymap", 
       style="height:720px;width:1100px;margin:0;", # hardcoded! 
       lat=cur_lat, 
       lng=cur_lng, 
       zoom=15, 
       markers=[(cur_lat,cur_lng)] 
      ) 
    return render_template('example_mymap.html', mymap=mymap) 


if __name__ == "__main__": 
    webbrowser.open('http://127.0.0.1:5000') 
    app.run(debug=True, use_reloader=True) 

誰が私に別の解決策を提案することができ、正確なエラーメッセージのですか?どんな提案も大歓迎です。どうもありがとう。

答えて

1

私もwebappを作成しようとしていますので、あなたのコードが修正できたことを知っていました。

変更したPYファイル

from flask import Flask, render_template 

from flask_googlemaps import GoogleMaps 

from flask_googlemaps import Map 


app = Flask(__name__) 


GoogleMaps(app, key="my-key") 




@app.route('/', methods=["GET"]) 
def my_map(): 
    mymap = Map(

       identifier="view-side", 

       varname="mymap", 

       style="height:720px;width:1100px;margin:0;", # hardcoded! 

       lat=37.4419, # hardcoded! 

       lng=-122.1419, # hardcoded! 

       zoom=15, 

       markers=[(37.4419, -122.1419)] # hardcoded! 

      ) 

    return render_template('example.html', mymap=mymap) 





if __name__ == "__main__": 

    app.run(debug=True, use_reloader=True) 

変更したHTML

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Geolocation</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     /* Always set the map height explicitly to define the size of the div 
     * element that contains the map. */ 
     #map { 
     height: 100%; 
     } 
     /* Optional: Makes the sample page fill the window. */ 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="map"></div> 
    <script> 
     // Note: This example requires that you consent to location sharing when 
     // prompted by your browser. If you see the error "The Geolocation service 
     // failed.", it means you probably did not give permission for the browser to 
     // locate you. 
     var map, infoWindow; 
     function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: -34.397, lng: 150.644}, 
      zoom: 6 
     }); 
     infoWindow = new google.maps.InfoWindow; 

     // Try HTML5 geolocation. 
     if (navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(function(position) { 
      var pos = { 
       lat: position.coords.latitude, 
       lng: position.coords.longitude 
      }; 

      infoWindow.setPosition(pos); 
      infoWindow.setContent('Location found.'); 
      infoWindow.open(map); 
      map.setCenter(pos); 
      }, function() { 
      handleLocationError(true, infoWindow, map.getCenter()); 
      }); 
     } else { 
      // Browser doesn't support Geolocation 
      handleLocationError(false, infoWindow, map.getCenter()); 
     } 
     } 

     function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
     infoWindow.setPosition(pos); 
     infoWindow.setContent(browserHasGeolocation ? 
           'Error: The Geolocation service failed.' : 
           'Error: Your browser doesn\'t support geolocation.'); 
     infoWindow.open(map); 
     } 
    </script> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY&callback=initMap"> 
    </script> 
    <body> 
     <div class="container"> 
      <h1>Flask Google Maps Example</h1><hr> 
      {{ mymap.html }} 
     </div> 
    </body> 
</html> 
関連する問題