谷歌地图插件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对你的项目有用,并且打算使用它

 

时间: 2024-10-29 08:16:15

谷歌地图插件Mapsed.js使用例子的相关文章

jQuery谷歌地图插件Maplace(图中附送如何攻击开源中国数据库)

jQuery谷歌地图插件Maplace 图中附送如何攻击开源中国数据库..   var P1 = [ { lat: 45.468945, lon: 45.73684365, title: 'Title', html: 'Content', zoom: 10, animation: google.maps.Animation.DROP } ]; var LocsA = [ { lat: 45.9, lon: 10.9, title: 'Title A1', html: '<h3>Content

magento 1.4 -- 推荐插件 -- 谷歌地图 -- Google Map Locations

名称:    Google Map LocationsExtension Key:magento-community/Gmap_Locations网址:    http://www.magentocommerce.com/magento-connect/webideaonline/extension/4017/gmap_locations介绍:   谷歌地图插件,可以用谷歌地图显示指定的位置,可以用来显示实体店或公司地址等等          Demo地址:http://webideaonlin

利用谷歌地图API获取点与点的距离的js代码_javascript技巧

复制代码 代码如下: var request; var distanceArray = []; function getdistance() { distanceArray = []; var directionsService = new google.maps.DirectionsService(); for (var a = 0; a < pointsArray.length; a++) { for (var b = 0; b < pointsArray.length; b++) { i

谷歌api-怎么用谷歌API开发出谷歌地图那样的网页?

问题描述 怎么用谷歌API开发出谷歌地图那样的网页? 要实现谷歌地图的基本功能,比如搜索啊,计算路线啊,添加标注啊,测量距离啊 最好是js,php,html的 有没有大神能赏个代码啊?? 下了几本谷歌api开发的书,附送的代码基本都坑了,前头小功能的代码还行,一到大的实例就都运行不了....

点击按钮显示谷歌地图

原文:点击按钮显示谷歌地图 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication.WebForm1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

谷歌地理开发博客宣布谷歌地图API将不再免费

Google的地理开发博客正式宣布,谷歌地图API(Google Maps API)将不再免费提供,而当用户调用谷歌地图的API超过一定限制以后,谷歌地图将会按照超出的次数来收取费用,而费用将是每一千次调用4-10美元左右. 对于开发商的影响 Google方面建议使用Google Maps API的开发商,可能需要评估一下如何调用谷歌地图的用法,从而确认他们的服务到底是否受到影响.而如果调用的次数超过了限制,那么就需要: 1.降低调用了Google Maps API的次数,会将其限制在每天的二万

Windows Store Javascript项目使用高德地图、谷歌地图、百度地图API

原文 Windows Store Javascript项目使用高德地图.谷歌地图.百度地图API 在Win8 Store 项目中可以使用的地图主要有微软的Bing Map,目前高德地图sdk也支持Win8.Win8 Store App可以直接支持javascript编写App,除了Bing,还没有发现用于Win8 Javascript项目上的sdk.   新建一个空白的Win8 Store Javascript 项目,分别添加map.html.map.js.map.css三个文件. 使用谷歌地图

Windows 10迎来第三方谷歌地图应用Maps App Discovery

众所周知,Google向来不屑于为Windows平台带来某些类型的官方应用,谷歌地图就是其中一个具有代表性的例子.好消息是,仍然有一些第三方应用开发者在努力着,将Google服务整合到他们的应用之中.本文要为大家介绍的,就是一款像极了官方版本的Maps App Discovery.该应用允许用户方便直接从Windows 10桌面上调用谷歌地图,而无需先打开浏览器. 根据Windows Store上贴出的信息,Maps App Discovery借助Google Maps API,为Windows

使用asp.net调用谷歌地图api示例_实用技巧

asp.net调用谷歌地图api,需要注意js引入的先后顺序,复制一下代码即可测试 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title>//在这里要注意js引入的先后顺序 <link href="Mapjs/jquery.ui.base.css" rel="external nofollow" rel="