Spit Slot Stickers: Baidu Map API package of practical features [SOURCE DOWNLOAD]

ZMap class Function Introduction

ZMap is to learn Baidu Map API interface, the development of basic functions after the whole of a script class, this kind of method functions are mostly used prototype prototype implementation;

Includes the following functions: track playback, circle painting area can be edited, determine whether several coordinates within a circle, life service query,
Get address information from latitude and longitude, map tools include ranging, get area, plot map, map full screen, real-time traffic, coordinates in the polygon area,
Taxi scheme, through the middle of the point, add Map control;

Map interface:

Zmap.js Section Code Description

/** * Baidu Map API function Integration * @author    gloot * @email     [email protected] * @QQ        345268267 * @blog      http://www.cnblogs. Com/editor * @dependency: <link href= "Http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_ Min.css "rel=" stylesheet "type=" Text/css "/> * <script type=" text/javascript "src=" Http://api.map.baidu.com/api ? v=1.2&services=true "></script> * <script type=" text/javascript "src=" http://api.map.baidu.com/ Library/distancetool/1.2/src/distancetool_min.js "></script> * <script type=" text/javascript "src=" http ://api.map.baidu.com/library/trafficcontrol/1.4/src/trafficcontrol_min.js "></script>   * <script Type= "Text/javascript" src= "/devices/scripts/geoutils.js" ></script> */zmap = {    Mapobj:null,    mapId : ',    opts: '};

Mapobj: Is the map initialization object, Zmap.mapobj = new Bmap.map (' Mapcontainer ');

MapId: Refers to the label container that displays the map, such as:

<div id= "MapId" ></div>

OPTs: is to save some configuration when the map is initialized, if coordinates, level, etc.;

Zmap.createmap = function (MapId, opts) {        if (zmap.mapobj) {        ZMap.mapObj.clearOverlay ();    }        Zmap.mapobj = new Bmap.map (mapId);    Zmap.mapid = mapId;    Zmap.opts = opts;    debugger;    if (opts) {        var level = Opts.level | |        if (opts.lng && opts.lat) {            var point = new Bmap.point (OPTS.LNG, Opts.lat);            ZMap.mapObj.centerAndZoom (point, Level);        } else if (opts.addr) {            ZMap.mapObj.centerAndZoom (opts.addr, level);        } else {            ZMap.mapObj.centerAndZoom (' Beijing ', ')}    }        SetTimeout (function () {//delete copyright        $ (' # ' +mapid). Find ('. Anchorbl '). Remove ();    }, 1000);};

method of map initialization; OPTs is JSON data:

{    lng:193.2323    lat:  25.2323 city    : ' Quanzhou '    level:15}

The following code implements the map to support scrolling the mouse wheel, zooming in and out, and adding controls to the method;

Zmap.enables = {    scrollwheel:function () {        ZMap.mapObj.enableScrollWheelZoom ();    }}; Zmap.controls = {    Addnavi:function (opts) {        ZMap.mapObj.addControl (new Bmap.navigationcontrol (opts));    } ,    addscale:function (opts) {        ZMap.mapObj.addControl (new Bmap.scalecontrol (opts));    },    Addoverview:function (opts) {        ZMap.mapObj.addControl (new Bmap.overviewmapcontrol (opts));    },    Addmaptype:function (opts) {        ZMap.mapObj.addControl (new Bmap.maptypecontrol (opts));    },    Addgeolocation:function (opts) {//mobi        try {            ZMap.mapObj.addControl (new Bmap.geolocationcontrol (opts));        }catch (e) {}}    ;

OPTs for the configuration control of the docking deviation from the boundary location, a detailed look at Baidu Map API;

Map to add callout Marker method:

Zmap.iconmarker = function (icon, point) {    var Micon = new Bmap.icon (icon.img, New Bmap.size (Icon.width, Icon.height)) ;    var marker = new Bmap.marker (point, {Icon:micon});    ZMap.mapObj.addOverlay (marker);    return marker;}; Zmap.labelmarker = function (msg, point) {    var lbl = new Bmap.label (msg, {});    var marker = new Bmap.marker (point);    Marker.setlabel (LBL);    ZMap.mapObj.addOverlay (marker);    return marker;}; Zmap.marker = function (point) {    var marker = new Bmap.marker (point, {});    ZMap.mapObj.addOverlay (marker);    return marker;}; Zmap.markercallback = function (point, callback) {    var marker = Zmap.marker (point);    Zmap.addlistener (marker, ' click ', callback);};

Map Cue box, and Add Event listener method:

Zmap.addlistener = function (obj,type,callback) {    Obj.addeventlistener (type, function (e) {        callback (e);    });}; Zmap.msgalert = function (opts, MSG, POBJ, point) {    var infowindow = new Bmap.infowindow (msg, opts);    Pobj.openinfowindow (Infowindow, point);};

The following is one of the methods in ZMap, the trajectory playback function, the use of prototype implementation

/** * Track Playback * @param opts * @returns {zmap.guijiplay} */zmap.guijiplay = function (opts, flag) {if (flag) {ZMap.    Createmap (Zmap.mapid, zmap.opts); } opts = opts | |    {};    This.points = [];    This.centerpoint = null;    This.index = 0;    This.timer = null;    This.polyline = null;        This.runlines = [];    This.potlen = 0;        This.marker = {marker:null, Label: ', Icon: {width:50, height:50        }    };    if (Opts.label && Opts.label! = ") {This.marker.label = Opts.label;    } if (Opts.icon) {This.marker.icon = Opts.icon; }};        ZMap.GuiJiPlay.prototype.set = function (Pointarr) {var me = this;        For (itm in Pointarr) {var one = Pointarr[itm];        var point = null;        try {eval ("Point=new bmap.point (" +one+ ");");        }catch (e) {} if (point) {Me.points.push (point);    }} Me.potlen = Me.points.length;    Me.init ();};    ZMap.GuiJiPlay.prototype.init = function () {var me = this;        Me.clear (); Me.centerpoint = new Bmap.point ((ME.POINTS[0].LNG + me.points[me.potlen-1].lng)/2, (Me.points[0].lat + me.points[me.po    Tlen-1].lat)/2);          ZMap.mapObj.panTo (Me.centerpoint);    Me.polyline = new Bmap.polyline (me.points, {strokecolor: "Blue", Strokeweight:5, strokeopacity:1});          ZMap.mapObj.addOverlay (Me.polyline);    if (!me.marker.icon) {me.marker.marker = Zmap.iconmarker (Me.marker.icon, me.points[0]);    } else if (Me.marker.label! = ") {Me.marker.marker = Zmap.labelmarker (Me.marker.label, me.points[0]);    } else {me.marker.marker = Zmap.marker (Me.points[0]); }    };    ZMap.GuiJiPlay.prototype.reset = function () {var me = this;    Me.index = 0;      if (me.marker.marker && me.points.length > 0) {me.marker.marker.setPosition (me.points[0]);      } if (Me.timer) {window.cleartimeout (Me.timer); } mE.timer = null;};    ZMap.GuiJiPlay.prototype.clear = function () {var me = this;    if (me.polyline) {ZMap.mapObj.removeOverlay (me.polyline);        } for (itm in me.runlines) {var line = Me.runlines[itm];    ZMap.mapObj.removeOverlay (line);    } me.polyline = null;    Me.runlines = []; Me.reset ();};    ZMap.GuiJiPlay.prototype.play = function () {var me = this;          var point = Me.points[me.index]; if (Me.index > 0) {var cline = new Bmap.polyline ([Me.points[me.index-1], point], {strokecolor: "Red", stroke        Weight:1, strokeopacity:1});          ZMap.mapObj.addOverlay (cline);    Me.runlines.push (cline);      } me.marker.marker.setPosition (point);      me.index++;      if (true) {ZMap.mapObj.panTo (point);        } if (Me.index < me.points.length) {Me.timer = Window.settimeout (function () {me.play ();      }, 1000);      } else {ZMap.mapObj.panTo (point); }};

Using Zmap.js

1. baidu.jsp map Display page, introduced script resources:

<link href= "Http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel= "stylesheet" Type= "Text/css"/>    <script type= "Text/javascript" src= "/devices/scripts/jquery-1.7.2.js" ></script >    <script type= "Text/javascript" src= "Http://api.map.baidu.com/api?v=1.2&services=true" ></ script>    <script type= "Text/javascript" src= "http://api.map.baidu.com/library/DistanceTool/1.2/src/ Distancetool_min.js "></script>    <script type=" Text/javascript "src=" http://api.map.baidu.com/ Library/trafficcontrol/1.4/src/trafficcontrol_min.js "></script>      <script type=" Text/javascript " Src= "/devices/scripts/geoutils.js" ></script>    <script type= "Text/javascript" src= "/devices/ Scripts/zmap.js "></script>

2. The map shows the basic HTML block of the container;

<div id= "Container" style= "margin:0px auto; width:700px; height:600px; Padding-bottom: -40px; Overflow:hidden; " >        <div id= "Panel" style= "height:30px; width:100%; display:none; background: #6485ed;" >            <span>X</span>        </div>        <div id= "Istmap" style= "width:100%; height:640px;" ></div></div>

Real Show Map Yes Istmap,panel is used to display the top closing (return prototype) handle when the map is full screen, container contains istmap, mainly used to hide the small block of copyright area at the bottom of Baidu map;

3. Map initialization:

function Defaultmap () {    zmap.createmap (' Istmap ', {        lng:116.404,        lat:39.915,        level:15    });}

4. track playback function;

var Guiji;        function Guijimap () {            Guiji = new Zmap.guijiplay ({                marker: {                    marker:null,                    label: ' Car '                }            });            var pointsstr = ' 116.401072,39.913859-116.401242,39.913859-116.401431,39.913873-116.401844,39.913886-116.402257,39.9139-116.402608,39.9139 -116.402994,39.913914-116.403416,39.913928-116.403784,39.913942-116.404135,39.913949-116.404557,39.913962-116.405015,39.9 13997-116.405455,39.914004-116.405815,39.914011-116.406228,39.914045-116.406587,39.914045-116.406955,39.914059-116.407719 , 39.914052-116.40886,39.914108-116.408788,39.914101-116.409192,39.914101-116.409462,39.914108-116.409848,39.914115-116.41 0297,39.914163-116.410953,39.914239 ';            var arrs = pointsstr.split ('-');            Guiji.set (ARRS);        }

ZMap the method receives the coordinate data, if is more, basically is in the data form: [' 116.401072,39.913859 ', ' 116.401242,39.913859 '] transmits;

Track playback has three operation buttons: Play, pause, reset;

$ (' #playbtn '). CSS ({position: ' absolute ', left: (parseint (_left) +parseint (_tblwidth) + 15) +                    ' px ', Top: (parseint (_top) + _tdhgt * 3 + 3) + ' px '}). Click (function () {                Guiji.play ();                        }); $ (' #pausebtn '). CSS ({position: ' absolute ', left: (parseint (_left) +parseint (_tblwidth) + 15 + + ' px ', Top: (parseint (_top) + parseint (_TDHGT) * 3 + 3) + ' px '}). Click (Fu                      Nction () {if (Guiji.timer) {window.cleartimeout (Guiji.timer);                        }                  }); $ (' #resetbtn '). CSS ({position: ' absolute ', left: (parseint (_left) +parseint (_tblwidth) + 15 + + +) + ' px ', Top: (parseint (_top) + parseint (_TDHGT) * 3 + 3) + ' px '}). CLI         CK (function () {           Guiji.reset (); });

Pointsstr can be the data you read from the database, or other locus coordinates, indicating the route of the vehicle at a certain time;

Guiji.set (new trajectory coordinate data), you can reset the route;

5. Taxi route, through the middle of the point;

Sometimes you want somewhere, you may have to go through some point on the way;

function Crosspointmap () {var Addrs = ["Tiananmen Square", "Three Li Tun", "Baidu Building"];            var drlen = addrs.length;                for (Var i=0;i<drlen;i++) {if (i==0) {continue;                } var opts = {};                    if (Drlen = = 2) {Opts.start = true;                Opts.end = true;                    } else {if ((i-1) = = 0) {Opts.start = true;                    } else if (i = = (drlen-1)) {opts.end = true;                    }else {Opts.pass = true;                }} Opts.icon = {};                Opts.icon.start = ' starting point ';                Opts.icon.end = ' end point ';                                Opts.icon.pass = ' passing point ';                var drive = new Zmap.crosspointtraffic (opts);    Drive.search (Addrs[i-1], addrs[i]);                            ZMap.enables.scrollWheel (); }        }

Sanlitun is the point you have to go through; Crosspointtraffic's opts parameters, you can set the starting point, the end point, through the points are label or icon method;

If you are using the icon method, then:

Opts.icon.start = {    img: ' icon position ',    width:50,    height:50}

Source code Download Instructions

SOURCE project: Baidumap.rar download [Http://files.cnblogs.com/editor/baiduMap.rar]

This project is implemented by SPRINGMVC + MAVEN framework, the default Home.do homepage, is the basic code according to Baidu API, Baidu.do is the use of zmap.js developed interface;

Http://www.cnblogs.com/editor/p/4080517.html

Spit Slot Stickers: Baidu Map API package of practical features [SOURCE DOWNLOAD]