在調(diào)用百度地圖api進行web開發(fā)時遇到了一個需求班缰，我們需要在網(wǎng)頁中內(nèi)嵌一個div 然后在div中調(diào)用百度地圖的js顯示我們所需要的地區(qū)亿遂。根據(jù)需求坐標在地圖上添加若干個標記點，并批量的為各個標記點設(shè)置監(jiān)聽函數(shù)港华，使之顯示我們所需要的信息
開始
創(chuàng)建工程
首先挑童，創(chuàng)建一個測試用的工程來測試我們的需要，可以使用pycharm或者django自帶的命令創(chuàng)建工程
django-admin startproject addressdemo
創(chuàng)建app
- 創(chuàng)建工程之后，cd到工程目錄蚤吹，創(chuàng)建一個名為addresstest的應(yīng)用
python manage.py startapp addresstest
創(chuàng)建一個名為templates文件例诀，在其中創(chuàng)建一個address.html的測試用頁面
- 在address.html中我們需要先為地圖創(chuàng)建一個容器 在這里我們使用一個確定好的div病設(shè)置id為allmap
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
body, html {
width: 100%;
height: 100%;
margin: 0;
font-family: "微軟雅黑";
}
#allmap {
height: 700px;
width: 100%;
}
#r-result {
width: 100%;
font-size: 14px;
}
</style>
<title>經(jīng)緯度定位</title>
</head>
<body>
<div id="allmap"></div>
<div id="r-result">
<input type="button" />
</div>
</body>
</html>
- 同時我們也設(shè)置了一個button為了更好的測試我們寫的引用的函數(shù)
注冊百度開發(fā)者賬號獲取秘鑰
-
訪問<a >百度地圖開放平臺</a>注冊賬號并獲取秘鑰
獲得秘鑰的頁面應(yīng)該如下：
注冊獲取百度地圖開發(fā)者賬號
在address.html添加上引入百度api的js代碼
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=你的秘鑰"></script>
連接mysql數(shù)據(jù)庫
- 在settings.py中修改數(shù)據(jù)庫連接語句
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'addressdemo',
'USER': 'root',
'PASSWORD': '000000',
'HOST': 'localhost',
'PORT': '3306',
}
}
設(shè)置模型類
- 在創(chuàng)建的app下的models.py中添加如下語句
class address_info(models.Model):
longitude = models.FloatField()
latitude = models.FloatField()
data = models.CharField(max_length=200)
注：
- longitude為經(jīng)度
- latitude為維度
- data為標記被點擊所觸發(fā)的顯示的內(nèi)容
執(zhí)行同步數(shù)據(jù)庫操作
python manage.py makemigrations
python manage.py migrate
- django 1.7之后版本適用
查看數(shù)據(jù)庫并在其中addresstest_address_info表中插入測試數(shù)據(jù)
-
如圖為我插入的幾條測試數(shù)據(jù)
數(shù)據(jù)庫插入測試數(shù)據(jù)
在view和urls中配置視圖函數(shù)和URL
修改views
- 修改完成后的address/views.py為
from django.shortcuts import render
import json
from addresstest.models import address_info
def test(request):
address_point = address_info.objects.all()
address_longitude = []
address_latitude = []
address_data = []
for i in range(len(address_point)):
address_longitude.append(address_point[i].longitude)
address_latitude.append(address_point[i].latitude)
address_data.append(address_point[i].data)
return render(request, 'address.html',
{'address_longitude': json.dumps(address_longitude),
'address_latitude': json.dumps(address_latitude), 'address_data': json.dumps(address_data)})
- 由于需要在前段頁面中的js代碼區(qū)域中使用，我們需要將列表json序列化然后通過頁面渲染 或者 前段請求后端返回response攜帶接送數(shù)據(jù)
- 起初本想直接將address_point這個數(shù)據(jù)集直接傳到前段,在由前段使用模板裁着，沒有時間類型也不知道為什么會序列化出錯繁涂，如果有知道的可以反饋給我
注：
- address_longitude為若干個坐標的經(jīng)度
- address_latitude為若干個坐標的維度
- address_data為標記上所需要顯示的數(shù)據(jù)
修改urls
- 由于只用來測試，所以我們只需要在工程名下的urls寫設(shè)置一下即可
from django.conf.urls import url
from django.contrib import admin
from addresstest import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^address/',views.test),
]
在address.html添加設(shè)置地圖的js
- 因為js語句塊放在頁面哪里都可以被執(zhí)行二驰，所以大家可以按照自己的喜好放置扔罪，在這里我選擇放在頁面的最后
<script type="text/javascript">
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(118.3088230000, 32.3002390000), 18);
map.enableScrollWheelZoom(true);
var navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_LEFT,
// LARGE類型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 啟用顯示定位
enableGeolocation: true
});
map.addControl(navigationControl);
function get_location() {
var address_latitude ={{ address_latitude |safe}};
var address_longitude ={{ address_longitude|safe }};
var address_data ={{ address_data |safe}};
var point = []; //存放標注點經(jīng)緯信息的數(shù)組
var marker = []; //存放標注點對象的數(shù)組
for (var i = 0; i < address_longitude.length; i++) {
point[i] = new BMap.Point(address_longitude[i], address_latitude[i]); //循環(huán)生成新的地圖點
marker[i] = new BMap.Marker(point[i]); //按照地圖點坐標生成標記
map.addOverlay(marker[i]);
}
for (i = 0; i < marker.length; i++) {
(function () {
var index = i;
marker[index].addEventListener('click', function () {
this.openInfoWindow(new BMap.InfoWindow(address_data[index]));
});
})();
}
}
</script>
- 由于marker在添加監(jiān)聽事件時調(diào)用外部函數(shù)添加參數(shù)無效但是我們這里又需要傳遞從數(shù)據(jù)庫讀出來的需要顯示的信息，所以我們這里使用了js的閉包的概念桶雀，還使用了匿名函數(shù)矿酵，直接寫在監(jiān)聽事件函數(shù)內(nèi)
- 完整的address.html代碼如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
body, html {
width: 100%;
height: 100%;
margin: 0;
font-family: "微軟雅黑";
}
#allmap {
height: 700px;
width: 100%;
}
#r-result {
width: 100%;
font-size: 14px;
}
</style>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=你的秘鑰"></script>
<title>經(jīng)緯度定位</title>
</head>
<body>
<div id="allmap"></div>
<div id="r-result">
<input type="button" value="獲取我的位置" onclick="get_location()"/>
</div>
</body>
</html>
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(118.3088230000, 32.3002390000), 18);
map.enableScrollWheelZoom(true);
var navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_LEFT,
// LARGE類型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 啟用顯示定位
enableGeolocation: true
});
map.addControl(navigationControl);
function get_location() {
var address_latitude ={{ address_latitude |safe}};
var address_longitude ={{ address_longitude|safe }};
var address_data ={{ address_data |safe}};
var point = []; //存放標注點經(jīng)緯信息的數(shù)組
var marker = []; //存放標注點對象的數(shù)組
for (var i = 0; i < address_longitude.length; i++) {
point[i] = new BMap.Point(address_longitude[i], address_latitude[i]); //循環(huán)生成新的地圖點
marker[i] = new BMap.Marker(point[i]); //按照地圖點坐標生成標記
map.addOverlay(marker[i]);
}
for (i = 0; i < marker.length; i++) {
(function () {
var index = i;
marker[index].addEventListener('click', function () {
this.openInfoWindow(new BMap.InfoWindow(address_data[index]));
});
})();
}
}
</script>
運行測試服務(wù)器查看效果
python manage.py runserver
- 在瀏覽器地址欄輸入http://127.0.0.1:8000/address
-
點擊按鈕獲取我的位置
批量地址標記顯示結(jié)果
如上圖顯示即為成功。
注：
- 上述代碼在django1.9和Python2.7.12在ubuntu16.04 lts中編譯成功運行矗积，其他環(huán)境請自行測試
- 上述文字皆為個人看法全肮，如有錯誤或建議請及時聯(lián)系我
