HTML
首先引入google地图API,及所需要的插件,压缩文件里面已经下载好了。
<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">
加载地图地点
首先在页面中放置作地图容器#custom_places
<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: "搜索 ..."
}
});
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791