how to realize GMap
GoogleMaps = function() { var t = this; t.bgImage = 'popover-bg.png'; t.closeImage = 'popover-close.png'; t.modalBgImage = 'popover-modal-bg.png'; t.showing = false; t.transitioning = false; t.element = null; t.duration = 300; t.popoverMainId = 'popover-main'; t.popoverContainerId = 'popover-container'; t.zoom = 16; t.debugBox = null; $(function(){ // cache the popover images var i1 = document.createElement('img'); i1.src = t.bgImage; var i2 = document.createElement('img'); i2.src = t.closeImage; var i3 = document.createElement('img'); i3.src = t.modalBgImage; }); t.show = function(address) { if (t.showing || typeof(address) == 'undefined' || t.transitioning) return; t.showing = true; t.transitioning = true; if (t.element == null) { t.element = $('<div id="popover"></div>');t.element.addClass('popover-map'); var bg = $('<div id="popover-bg"></div>'); bg.css({'opacity':.5}); t.element.append(bg); var main = $('<div id="'+t.popoverMainId+'"></div>'); t.element.append(main); var container = $('<div id="'+t.popoverContainerId+'"></div>'); main.append(container); var close = $('<a href="#" id="popover-close">Close</a>'); close.click(function(event){ event.preventDefault(); t.hide(); }); main.append(close); t.element.hide(); $('body').append(t.element); } $('#'+t.popoverContainerId).html('');$('#'+t.popoverMainId).css({"height" : 593,"width" : 696,"position" : "fixed"});$('#'+t.popoverContainerId).css({"border" : "1px solid #C2C2C2","height" : 585,"margin" : 3,"padding" : 0,"width" : 687});// adjustement for iPhone and Androidif( detectMobileDevice() ){$('#'+t.popoverMainId).css({"height" : "100%","width" : "100%",});$('#'+t.popoverContainerId).css({"height" : "100%","width" : "100%","margin" : 0});} // Mapvar geocoder = new google.maps.Geocoder(); if (geocoder) {geocoder.geocode({ "address" : address },function(results, status) {if (status == google.maps.GeocoderStatus.OK) {Lng = results.geometry.location.lng();Lat = results.geometry.location.lat();var latlng = new google.maps.LatLng(Lat, Lng);var mapOptions = {zoom: t.zoom,center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP};var map = new google.maps.Map(document.getElementById(t.popoverContainerId), mapOptions);var marker = new google.maps.Marker({position: map.getCenter(), map: map});}});}// end Map $(window).bind('resize.popover', t.resize); t.resize(); t.element.fadeIn(t.duration, function(){ t.transitioning = false; });$("body").keypress(function(e){if ( e.keyCode == 27 ) {t.hide();}});} t.hide = function() { if (!t.showing || t.transitioning) return; t.showing = false; t.transitioning = true; t.element.fadeOut(t.duration, function(){ $(window).unbind('resize.popover'); t.element.hide(); t.transitioning = false; if ($.browser.msie && $.browser.version < 7){$("select#city").css("visibility", "visible");} }); } t.resize = function() { var h = $(document).height(); /* var min = $('#header').height() + $('#main').height() + $('#footer').height(); if (h < min) h = min;*/ t.element.width($("#header-additional").width()).height(h); // ie6 has template problems that prevent the width of the window from being // correct. if that is ever fixed this code might not be necissary.if ($.browser.msie && $.browser.version < 7) {var d = $(".content") ; var o = d.offset(); var p = $('#'+t.popoverMainId); var w = o.left + ((d.width() - p.width()) / 2);p.css({'position': "absolute"});p.css({'left':w});p.css({'top':'100'});$("select#city").css("visibility", "hidden"); } // ie 7 can't center either, apparently else if ($.browser.msie && $.browser.version < 8) { var p = $('#'+t.popoverMainId); var w = $(window); var wf = (w.width() - p.width()) / 2; var hf = (w.height() - p.height()) / 2; p.css({'left':wf, 'top':hf, 'position': 'absolute'}); } } t.debug = function(str) { if (t.debugBox == null) { t.debugBox = $('<div></div>'); t.debugBox.css({ 'position':'absolute', 'top':'0px', 'left':'0px' }); $('body').append(t.debugBox); } t.debugBox.html(str); }t.hideEscape = function() {}}function detectMobileDevice() {var ua = navigator.userAgent;var checker = {iphone: ua.match(/iPhone/),blackberry: ua.match(/BlackBerry/),android: ua.match(/Android/)}if (checker.iphone || checker.android || checker.blackberry ) {return true;} else {return false;}}<script type="text/javascript" src="jquery-1.5.1.min.js"></script><script src="http://maps.googleapis.com/maps/api/js?v=3.4&sensor=false&language=cn&region=CN" type="text/javascript"></script><script type="text/javascript" src="http://maps.gstatic.com/intl/es_ALL/mapfiles/api-3/4/16/main.js"><script src="GoogleMaps.js" type="text/javascript" charset="utf-8"></script><script charset="utf-8" type="text/javascript">var googlemaps = new GoogleMaps();jQuery.fn.toolTip = function() {if(!isPad) {this.unbind().hover( function(e) {this.t = this.title;this.title = ''; $('body').append( '<p id="p_toolTip">' + this.t + '</p>' );var tip = $('p#p_toolTip').css({ "position": "absolute", "left": "5px", "line-height":"160%", "-moz-border-radius": "5px", "-webkit-border-radius": "5px", "z-index": "9998"});var target = $(this);var position = target.position();this.top = (position.top - 60); this.left = (position.left + target.width());tip.css({"top": this.top+"px","left":this.left+"px"});tip.fadeIn("slow");},function() {this.title = this.t;$("p#p_toolTip").fadeOut("slow").remove();});} else {var lastClicked;this.unbind().click( function(e) { if( !lastClicked ){lastClicked = this;rollover(this);} else {$("p#p_toolTip").fadeOut("slow").remove();if (lastClicked == this) {lastClicked = null;} else {lastClicked = this;rollover(this);}}});}};$(document).ready(function(){$("#storelocator a").toolTip();});</script><div id="storelocator"><span class="location_type"><a title="" href="#">查看介绍 »</a></span><a href="javascript:googlemaps.show('池州市梅龙镇')" class="location">查看地图</a>
页:
[1]