透過Folium將圖片標記在地圖上,並使用Django轉換成網頁服務

本專案程式在GitHub上,https://github.com/jang0820/pmap

讀取照片的GPS座標,使用Folium標記在地圖上,並顯示圖片於地圖上,執行結果如下圖。

Step1)建立Python虛擬環境,例如map,並安裝套件folium與django

#conda create -n  map python=3.9

#conda activate map

(map)# pip install folium

(map)# pip install django

(map)# pip install exif


Step2)建立django的專案,例如pmap

(map)# django-admin startproject pmap

建立資料庫

(map)# python manage.py migrate


Step3)在專案pmap下新增一個應用程式map

(map)# cd pmap

(map)# python manage.py startapp map


Step4)開啟常用的python編輯程式,python執行環境設定給剛剛新增的map虛擬環境。修改或新增以下檔案。

修改pmap\map\views.py,填入以下程式,本範例圖片為DSC_8501.jpg(https://drive.google.com/file/d/18tK6lShbP1TLvH9W9wL0WON_XGRJD72f/view?usp=sharing),內有GPS座標,縮圖為1.jpg(https://drive.google.com/file/d/1PLO5m0mafXzgOkZ8hamiR8_fF2yb12fR/view?usp=sharing),也可以使用自己的圖片(exif要有GPS座標)

Step5)加入應用程式map,並設定樣板資料夾,新增樣板map.html

修改pmap\pmap\settings.py,在INSTALLED_APPS新增map如下方的第8行,在TEMPLATES的DIRS新增templates資料夾如下方的第26行。

新增資料夾templates(\pmap\templates),與manage.py(\pmap\manage.py)在同一層

建立樣板map.html(\pmap\templates\map.html)

Step6)修改\pmap\pmap\urls.py,新增應用程式map對應的網址

Step7)新增應用程式map的網址對應,新增\pmap\map\urls.py

Step8)執行Django

(map)# python manage.py runserver

點選以下藍色山圖示,就會跳出圖片DSC_8501.jpg的縮圖1.jpg,座標為該照片DSC_8501.jpg的拍攝時的GPS資料,並標記在地圖上