非常小的谷歌地图jQuery插件
Maplace.js帮助你嵌入你的网站,谷歌地图,快速创建标记和控制菜单在地图上的位置。
需要jQuery的谷歌地图API v3的在您的网页。
特点
直接实现简单的选项
可以运行所需的许多地图
标记和自定义图标,缩放级别和自定义控件菜单
支持方向,多边形,折线,融合表和风格的地图
作品在所有主要浏览器,包括IE6(这个网站没有这么多)
下载最新版本的Maplace.js,包括谷歌地图API v3和jQuery一起。
1 2 3 4 | </ script > < script src = "maplace.min.js" ></ script > |
HTML
现在你可以创建地图。
1 2 3 4 5 6 7 8 | <script type= "text/javascript" > $( function () { new Maplace({ locations: [{...}, {...}], controls_on_map: false }).Load(); }); </script> |
如果你想为中心的单一位置的地图上没有任何标记,你有两种选择:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | new Maplace({ show_markers: false , locations: [{ lat: 45.9, lon: 10.9, zoom: 8 }] }).Load(); //or new Maplace({ map_options: { set_center: [45.9, 10.9], zoom: 8 } }).Load() |
添加一个新的菜单类型
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | var html_checks = { //required: called by Maplace.js to activate the current voice on menu activateCurrent: function (index) { this .html_element.find( "input[value='" + index + "']" ).attr( 'checked' , true ); }, //required: called by Maplace.js to get the html of the menu getHtml: function () { var self = this , html = '' ; //if more than one location if ( this .ln > 1) { html += '<div class="checkbox controls ' + this .o.controls_cssclass + '">' ; //check "view all" link //use ShowOnMenu(index) to know if a location has to appear on menu if ( this .ShowOnMenu( this .view_all_key)) { html += '<label><input type="radio" name="gmap" value="' + this .view_all_key + '"/>' + this .o.view_all_text + '</label>' ; } //iterate the locations for ( var a = 0; a < this .ln; a++) { if ( this .ShowOnMenu(a)) html += '<label><input type="radio" name="gmap" value="' + (a+1) + '"/>' + ( this .o.locations[a].title || ( '#' + (a+1))) + '</label>' ; } html += '</div>' ; } this .html_element = $( '<div class="wrap_controls"></div>' ).append(html); //event on change //use ViewOnMap(index) to trigger the marker on map this .html_element.find( 'input[type=radio]' ).bind( 'change' , function () { self.ViewOnMap( this .value); }); return this .html_element; } }; //new Maplace object var maplace = new Maplace(); //add the new menu with the method AddControl(name, function) maplace.AddControl( 'checks' , html_checks); //load the map maplace.Load({ controls_type: 'checks' , locations: [{...}, {...}] }); |
特别申明:
本站所有资源都是由网友投稿发布,或转载各大下载站,请自行检测软件的完整性!
本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!
如有侵权请联系我们删除下架,联系方式:lei1294551502@163.com