由于某些原因在中国无法使用谷歌，因此使用此插件前需FQ！需FQ！需FQ！
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>google map</title> <style> .accessMap { padding-top: 10rem; width: 100%; height: auto; } </style> </head> <body> <div class="axgmap accessMap" data-latlng="34.7205005,137.7485243" data-zoom="16"> <p data-title="ＹＳ浜松"></p> </div> <script type="text/javascript" src="js/jquery.js"></script> <script src="https://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="js/jquery.axgmap.js"></script> </body> </html>其中data-latlng为初始显示位置的经纬度，data-zoom为放大倍数
axg mapjs如下
/* * AxGmap version 1.2.1 * (jQuery plugin) * * URL : https://github.com/Nouris-Inc/jquery-axgmap/ * Author : tsaeki (http://nouris.jp/) * Copyright : copyright (c) 2015 Nouris Inc. * License : licensed under the MIT licenses. */ ; (function($, window, document, undefined) { var AxGmap = function(element) { this.element = $(element); this.gmap; this.markers = []; this.infoWindows = []; this.init(); } AxGmap.prototype = { init: function() { this.createGmap(); this.fin(); }, createGmap: function() { var options = this.createGmapOption(); var children = this.element.children(); this.gmap = new google.maps.Map(this.element[0], options); this.createMarker(children); this.showMapStatus(); }, createMarker: function(elements) { var self = this; var openWindowSet = null; elements.each(function(index) { var element = $(this); var windowOpen = false; var options = self.createMarkerOption(element); if(options.windowOpen) { windowOpen = true; delete options.windowOpen; } var marker = new google.maps.Marker(options); self.markers.push(marker); var content = element.html().trim(); if(content.length) { var infoWindowSet = self.createInfoWindowSet(content, marker); self.infoWindows.push(infoWindowSet); if(windowOpen) { openWindowSet = infoWindowSet; }; } }); if(openWindowSet) { self.openInfoWindow(openWindowSet); }; }, createInfoWindowSet: function(content, marker) { var self = this; var infoWindow = new google.maps.InfoWindow({ content: content }); google.maps.event.addListener(marker, 'click', function() { self.openInfoWindow({ 'infoWindow': infoWindow, 'marker': marker }); }); return { 'infoWindow': infoWindow, 'marker': marker }; }, createLatLng: function(element) { var lat = 0; var lng = 0; var latlng = element.data('latlng') ? element.data('latlng') : this.element.data('latlng'); if(latlng) { var split = latlng.split(','); lat = this.parseNum(split[0].trim()); lng = this.parseNum(split[1].trim()); }; return new google.maps.LatLng(lat, lng); }, createGmapOption: function() { var self = this; var options = { center: this.createLatLng(this.element), zoom: 9 }; if(this.element.data("mapType")) { var mapType = this.element.data("mapType").toUpperCase(); $.extend(options, { 'mapTypeId': google.maps.MapTypeId[mapType] }); }; if(this.element.data("mapWidth") != null) { this.element.width(this.element.data("mapWidth")); }; if(this.element.data("mapHeight") != null) { this.element.height(this.element.data("mapHeight")); }; var properties = ["zoom", "draggable", "scrollwheel", "maxZoom", "minZoom", "mapTypeControl", "overviewMapControl", "panControl", "rotateControl", "scaleControl", "streetViewControl", "zoomControl"]; $.each(properties, function(index, property) { if(self.element.data(property) != null) { options[property] = self.element.data(property); } }); return options; }, createMarkerOption: function(element) { var options = { map: this.gmap, position: this.createLatLng(element) }; if(element.data('title') != null) { options['title'] = element.data('title'); } if(element.data('markerImage') != null) { options['icon'] = element.data('markerImage'); } if(element.data('windowOpen')) { options['windowOpen'] = true; } return options; }, openInfoWindow: function(infoWindowSet) { var self = this; infoWindowSet.infoWindow.open(self.gmap, infoWindowSet.marker); $.each(self.infoWindows, function(index, val) { if(val.infoWindow != infoWindowSet.infoWindow) { val.infoWindow.close(); } }); }, parseNum: function(val) { return(typeof val == null) ? 0.0 : parseFloat(val); }, showMapStatus: function() { var self = this; if(!this.element.data("mapStatus")) { return; }; var status = $('<div style="color:#000; background-color:#fff; border:solid 1px #ccc; width:' + self.element.width() + 'px"><dl style="margin:1em;"><dt>Center LatLng</dt><dd class="axgmap-status-latlng"></dd><dt>Zoom</dt><dd class="axgmap-status-zoom"></dd><dt>Right Click LatLng</dt><dd class="axgmap-status-rightclick">none</dd></dl></div>'); status.insertAfter(this.element); google.maps.event.addListener(this.gmap, 'idle', function() { $('.axgmap-status-latlng', status).empty().append(self.gmap.getCenter().lat().toFixed(6) + ', ' + self.gmap.getCenter().lng().toFixed(6)); $('.axgmap-status-zoom', status).empty().append(self.gmap.getZoom()); }); google.maps.event.addListener(this.gmap, 'rightclick', function(event) { $('.axgmap-status-rightclick', status).empty().append(event.latLng.lat().toFixed(6) + ', ' + event.latLng.lng().toFixed(6)); }); }, fin: function() { if(!AxGmap.didCreated) { AxGmap.didCreated = true; $('<style>.gm-style img{max-width:inherit;}</style>').appendTo('head'); }; } }; $.fn.axgmap = function() { return this.each(function() { if(!$.data(this, 'AxGmap')) { $.data(this, 'AxGmap', new AxGmap(this)); } }); }; $(function() { $('.axgmap').axgmap(); }); })(jQuery, window, document);
转载于:https://www.cnblogs.com/feiyushang/p/7727940.html
