阿福的空虛世界

2012年6月21日星期四

[Django] 建立一個google map

Unknown 凌晨3:02

參考資料(references):
https://docs.djangoproject.com/en/dev/ref/contrib/gis/install/
http://jefurii.cafejosti.net/blog/2011/05/05/basic-google-maps-django/

安裝設定

先安裝geos吧，這邊是用source code自行編譯:

下載/解壓縮: (解壓縮有錯誤訊息，可能沒裝bzip2.. apt-get install bzip2)

wget http://download.osgeo.org/geos/geos-3.3.0.tar.bz2
tar xjf geos-3.3.0.tar.bz2

編譯+安裝: (編譯需要一段時間，大概5~10分鐘吧)

cd geos-3.3.0
./configure
make
sudo make install

安裝完成後，請打ldconfig，把剛剛安裝好的lib讀取進來

sudo ldconfig

django部分

先在你的app/views.py加入

from django.conf import settings
from django.shortcuts import render_to_response
from django.contrib.gis.maps.google.gmap import GoogleMap
from django.contrib.gis.maps.google.overlays import GMarker, GEvent

def google_map(request):
    points = [
        {'lat':'35.42',     'lng': '139.42', 'href':'http://en.wikipedia.org/wiki/Tokyo'},
        {'lat':'51.30',     'lng':   '0.73', 'href':'http://en.wikipedia.org/wiki/London'},
        {'lat':'40.43',     'lng': '-74.0',  'href':'http://en.wikipedia.org/wiki/New_York_City'},
        {'lat':'34.03',     'lng':'-118.15', 'href':'http://en.wikipedia.org/wiki/Los_Angeles'},
        {'lat':'36.774402', 'lng':'-119.755405', 'href':'http://en.wikipedia.org/wiki/Fresno'},]
    markers = []
    for point in points:
        marker = GMarker('POINT(%s %s)' % (point['lng'], point['lat']))
        event = GEvent('click', 'function() { location.href = "%s"}' % point['href'])
        marker.add_event(event)
        markers.append(marker)
    google = GoogleMap(center=(0,0), zoom=1, markers=markers,
                       key=settings.GOOGLE_MAPS_API_PASSWORD)
    return render_to_response('google_map.html',
                              {'google': google,})

然後建立一個template檔案為 google.map.html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
{{ google.xhtml }}
<head>
  {{ google.style }}
  {{ google.scripts }}
</head>
<body onload="{{ google.js_module }}.map_load()" onunload="GUnload()">
  <div id="{{ google.dom_id }}" style="width:600px; height:400px;"></div>
</body>
</html>

然後到settings.py加入:

INSTALLED_APPS = (
    ...
    'django.contrib.gis',
    ...
)

GEOS_LIBRARY_PATH = '/usr/local/lib/libgeos_c.so'
GOOGLE_MAPS_API_PASSWORD = 'asdasdasdasdasd'

這邊需要google map api v2的key，由於申請方式和以前不同，

需要用到信用卡刷帳單....(雖然都是0元...需求過大的話，才須額外付費)
https://code.google.com/apis/console/

以上寫完，別忘了去設定urls.py

再去看看網址有沒有地圖出來囉。