谷歌地图插件Mapsed.js演示三种调用DEMO

来源:https://www.sucaihuo.com/js/148.html 2015-06-09 05:06浏览(2356) 收藏

google地图经常会在做国外的项目会遇到,一般需求是自定义标注地点,并且读取数据库数据。看演示DEMO,要注意翻墙。
谷歌地图插件Mapsed.js演示三种调用DEMO
分类:其它特效 > 地图 难易:高级
查看演示 下载资源 下载积分: 20 积分

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: "搜索 ..." 
          } 
    }); 
});
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2