我們在一些WEB項目中需要應用簡單的地圖,而且最好是可以自定義標注地點,最好是可以從本地數據庫中讀取并在地圖上展示地點,那么谷歌地圖插件Mapsed.js是比較好的選擇,使用起來簡單,無需注冊地圖接口之類的復雜過程,就能輕松的在網頁上展示地圖效果。
?
Mappy.js 是一款基于jQuery的地圖插件,我們來看下如何使用它。
?
準備工作
首先需要將必要的js和css文件加載到html頁面,當然這些文件在我們提供的下載包里已經打包好,請放心下載使用。
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script src="jquery-1.10.2.js"></script>
<script src="mapsed.js"></script>
<link href="mapsed.css" rel="stylesheet">
?
?
加載地點數據
首先我們要在html中放置一個div用作地圖容器,我們可以在css中定義容器的高度和寬度。
<div id="custom_places" class="maps"></div>
?
?
現在需要調用google地圖,并且把具體的地點位置也顯示在地圖上面,mapsed.js提供了很多接口。showOnLoad:即加載顯示數 據,json格式,我們可以從數據庫中讀取然后通過程序轉換成json格式即可,本文不涉及數據庫,有興趣的朋友可以自己動手試下。參數 autoShow:是否自動顯示,lat:緯度,lng:經度,name:名稱,street:街區說明信息,userData:數據id。
$(function(){
$("#custom_places").mapsed({
showOnLoad:
[
{
autoShow: true,
lat: 22.540053,
lng: 113.983225,
name: "歡樂谷",
street: "參與性、觀賞性、娛樂性、趣味性現代主題樂園。",
userData: 1
},
{
autoShow: true,
lat: 22.536113,
lng: 113.972569,
name: "世界之窗",
street: "薈萃世界幾千年人類文明精華,歷史遺跡、名勝、自然風光、世界奇觀!",
userData: 2
},
{
autoShow: true,
//canEdit: false,
lat: 22.530041,
lng: 113.982479,
name: "錦繡中華民俗文化村",
street: "邀你遨游最美賽花節!",
userData: 3
}
]
});
});
?
?
標注地點
加載地圖后,我們想在地圖中標注地點,只需要在地圖右上角點擊+號,然后定位移動地圖中的氣泡錨點,點擊可以彈出表單輸入,輸入信息后即可保存,當然你可以通過接口將數據寫入數據庫中。
<div id="add_places" class="maps"></div>
?
?
將allowAdd設置為true即允許添加標注地點,這時地圖右上角會出現一個+號。onSave回調函數即點擊保存時需要做的事情。
$(function(){ $("#add_places").mapsed({ allowAdd: true, onSave: function(m, newPlace) { var missing = []; // detect errors starting at bottom // ... we only have space for one error at a time, so this way we'll report // ... from the top down if (newPlace.postCode === "") missing.push("postcode"); if (newPlace.street === "") missing.push("street"); if (newPlace.name === "") missing.push("name"); // anything missing? if (missing.length > 0) { // return the error message so the callback doesn't progress return "Required: " + missing.join(); } if (newPlace) { if (newPlace.markerType == "new") { // simulate a primary key being save to a db newPlace.userData = parseInt(Math.random() * 100000); var n_name = newPlace.name; var n_street = newPlace.street; var n_postCode = newPlace.postCode; $.post('do.php',{name:n_name,street:n_street,postcode:n_postCode},function(msg){ alert(msg); }); } } // indicate form was OK and saved return ""; }, showOnLoad: [ { autoShow: false, //canEdit: false,, lat: 22.530041, lng: 113.982479 } ] }); });
?
搜索地點
地圖搜索功能當然是必不可少的,在你的地圖中加入一個搜索條那是相當酷的。
<div id="search_places" class="maps"></div>
?
searchOptions可以設置搜索的相關參數,其中enabled是開啟搜索條,initSearch是初始搜索內容,placeholder是如果未設置初始內容,則顯示placeholder內容。
$(function(){ $("#search_places").mapsed({ searchOptions: { enabled: true, initSearch: "深圳世界之窗", placeholder: "搜索 ..." } }); });
?
mapsed.js還提供了很多google地圖相關的功能和接口,本文只做簡單介紹,如果你覺得mapsed.js對你的項目有用,并且打算使用它,那么請移步官方教程: https://github.com/toepoke/mapsed/blob/master/README.md
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
