我們在一些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元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
