翻译I am having a few issues with the Google Maps API. I managed to make a cutom map using an image tile. which seems to be working OK. I am just wondering if there is a way to overlay roads on the map?
At the moment I am assuming there are 2 ways this is possible, either some built in function in the API, which I am having troubles finding. I have found paths etc, But I would like roads/streets to have labels, resize on zoom etc, as well as be able to toggle.
The other option was to do a second image tile and overlay that image, which I am not sure how todo at this moment.
If anyone has any info on this, or could point me in the right direction. It would be much appreciated.
/* <![CDATA[ */ /* Global variable that will contain the Google Maps object. */ var map = null // Google Maps Demo object var Demo = Demo || {}; // The path to your tile images. Demo.ImagesBaseUrl = './mapImage/mapTiles/'; Demo.ImagesRoadsUrl = './mapImage/overlayRoads/'; // NuviaMap class Demo.NuviaMap = function(container) { // Create map // This sets the default info for your map when it is initially loaded. map = new google.maps.Map(container, { zoom: 1, center: new google.maps.LatLng(0, 0), mapTypeControl: false, streetViewControl: false, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL } }); // Set custom tiles map.mapTypes.set('nuvia', new Demo.ImgMapType('nuvia', '#4E4E4E')); map.setMapTypeId('nuvia'); // Loop through the marker info array and load them onto the map. for (var key in markers) { var markerData = markers[key]; var marker = new google.maps.Marker({ position: new google.maps.LatLng(markerData.lat, markerData.lng), map: map, title: markerData.title, flat: markerData.flat, visible: true, infoBubble: new InfoBubble({ maxWidth: 300, content: (markerData.image ? '<img src="' + markerData.image + '" width="80" align="left">' : '') + '<h3>' + markerData.title + '</h3>' + (markerData.info ? '<p>' + markerData.info + '</p>' : ''), shadowStyle: 1, padding: '10px' }), // You can use custom icons, default icons, etc. In my case since a city was a marker the circle icon works pretty well. // I adjust the scale / size of the icon depending on what kind of city it is on my map. icon: { url: markerData.icon, } }); // We need to trap the click event for the marker so we can pop up an info bubble. google.maps.event.addListener(marker, 'click', function() { this.infoBubble.open(map, this); }); activeMarkers.push(marker); } // This is dumb. We only want the markers to display at certain zoom levels so this handled that. // Google should have a way to specify zoom levels for markers. Maybe they do but I could not find them. google.maps.event.addListener(map, 'zoom_changed', function() { var currentZoom = map.getZoom(); for (var i = 0; i < activeMarkers.length; i++) { var thisTitle = activeMarkers[i].title; if (markers[thisTitle]['zoom'][currentZoom]) activeMarkers[i].setVisible(true); else activeMarkers[i].setVisible(false); } }); // This handles the displaying of lat/lng info in the lat/lng info container defined above in the HTML. google.maps.event.addListener(map, 'click', function(event) { $('#latLng').html("Latitude: " + event.latLng.lat() + " " + ", longitude: " + event.latLng.lng()); }); // Listener to display the X/Y coordinates google.maps.event.addListener(map, 'mousemove', function (event) { displayCoord(event.latLng); }); }; // ImgMapType class Demo.ImgMapType = function(theme, backgroundColor) { this.name = this._theme = theme; this._backgroundColor = backgroundColor; }; // Let Google know what size our tiles are and what our min/max zoom levels should be. Demo.ImgMapType.prototype.tileSize = new google.maps.Size(256, 256); Demo.ImgMapType.prototype.minZoom = 1; Demo.ImgMapType.prototype.maxZoom = 5; // Load the proper tile. Demo.ImgMapType.prototype.getTile = function(coord, zoom, ownerDocument) { var tilesCount = Math.pow(2, zoom); if (coord.x >= tilesCount || coord.x < 0 || coord.y >= tilesCount || coord.y < 0) { var div = ownerDocument.createElement('div'); div.style.width = this.tileSize.width + 'px'; div.style.height = this.tileSize.height + 'px'; div.style.backgroundColor = this._backgroundColor; return div; } var img = ownerDocument.createElement('IMG'); img.width = this.tileSize.width; img.height = this.tileSize.height; // This tells what tile image to load based on zoom and coord info. img.src = Demo.Utils.GetImageUrl('tile_' + zoom + '_' + coord.x + '-' + coord.y + '.png'); return img; }; // Just basically returns the image using the path set way above and the name of the actual image file. Demo.Utils = Demo.Utils || {}; Demo.Utils.GetImageUrl = function(image) { return Demo.ImagesBaseUrl + image; }; // Opacity. Demo.Utils.SetOpacity = function(obj, opacity /* 0 to 100 */ ) { obj.style.opacity = opacity / 100; obj.style.filter = 'alpha(opacity=' + opacity + ')'; }; // Create ye ol' map. google.maps.event.addDomListener(window, 'load', function() { var nuviaMap = new Demo.NuviaMap(document.getElementById('nuvia-map')); }); console.log('Ready Builder'); /* ]]> */This is the JS I am working off so far, (Credits to http://www.cartographersguild.com/showthread.php?t=21088)