2017-05-27 250 views
1

我正在使用Python和Flask以及flask-googlemaps作爲我的最後一頁構建webapp。至於最後一頁,我需要獲取用戶當前位置的經緯度。Python燒瓶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>