谷歌地图上覆盖手写地图

我正在尝试制作原始地图，其中包含不为移动设备编写Google地图的道路。谷歌地图上覆盖手写地图

换句话说，我想混我用谷歌地图功能原来手写的地图（如GPS，引脚功能或弹出信息等）

是否有一个良好的解决方案或样品用于此目的??

或者我应该整合自己的GPS和弹出功能？

来源

2015-09-14 whitebear

似乎不太可能，你的形象会以任何方式与现实相符。您当然可以在带有折线的“真实”谷歌地图图块上代表那些“道路”。 – geocodezip

您的建议也是对的，但我想通过@caisEdge覆盖图像的方式，但我会按照您的说法使用多段线。 – whitebear

为此，您可以添加一个覆盖从谷歌地图文件Google地图this way

样品是

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Adding a Custom Overlay</title> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #map { 
     height: 100%; 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&signed_in=true"></script> 
    <script> 
// [START region_initialization] 
// This example creates a custom overlay called USGSOverlay, containing 
// a U.S. Geological Survey (USGS) image of the relevant area on the map. 

// Set the custom overlay object's prototype to a new instance 
// of OverlayView. In effect, this will subclass the overlay class therefore 
// it's simpler to load the API synchronously, using 
// google.maps.event.addDomListener(). 
// Note that we set the prototype to an instance, rather than the 
// parent class itself, because we do not wish to modify the parent class. 

var overlay; 
USGSOverlay.prototype = new google.maps.OverlayView(); 

// Initialize the map and the custom overlay. 

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 11, 
    center: {lat: 62.323907, lng: -150.109291}, 
    mapTypeId: google.maps.MapTypeId.SATELLITE 
    }); 

    var bounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(62.281819, -150.287132), 
     new google.maps.LatLng(62.400471, -150.005608)); 

    // The photograph is courtesy of the U.S. Geological Survey. 
    var srcImage = 'https://developers.google.com/maps/documentation/' + 
     'javascript/examples/full/images/talkeetna.png'; 

    // The custom USGSOverlay object contains the USGS image, 
    // the bounds of the image, and a reference to the map. 
    overlay = new USGSOverlay(bounds, srcImage, map); 
} 
// [END region_initialization] 

// [START region_constructor] 
/** @constructor */ 
function USGSOverlay(bounds, image, map) { 

    // Initialize all properties. 
    this.bounds_ = bounds; 
    this.image_ = image; 
    this.map_ = map; 

    // Define a property to hold the image's div. We'll 
    // actually create this div upon receipt of the onAdd() 
    // method so we'll leave it null for now. 
    this.div_ = null; 

    // Explicitly call setMap on this overlay. 
    this.setMap(map); 
} 
// [END region_constructor] 

// [START region_attachment] 
/** 
* onAdd is called when the map's panes are ready and the overlay has been 
* added to the map. 
*/ 
USGSOverlay.prototype.onAdd = function() { 

    var div = document.createElement('div'); 
    div.style.borderStyle = 'none'; 
    div.style.borderWidth = '0px'; 
    div.style.position = 'absolute'; 

    // Create the img element and attach it to the div. 
    var img = document.createElement('img'); 
    img.src = this.image_; 
    img.style.width = '100%'; 
    img.style.height = '100%'; 
    img.style.position = 'absolute'; 
    div.appendChild(img); 

    this.div_ = div; 

    // Add the element to the "overlayLayer" pane. 
    var panes = this.getPanes(); 
    panes.overlayLayer.appendChild(div); 
}; 
// [END region_attachment] 

// [START region_drawing] 
USGSOverlay.prototype.draw = function() { 

    // We use the south-west and north-east 
    // coordinates of the overlay to peg it to the correct position and size. 
    // To do this, we need to retrieve the projection from the overlay. 
    var overlayProjection = this.getProjection(); 

    // Retrieve the south-west and north-east coordinates of this overlay 
    // in LatLngs and convert them to pixel coordinates. 
    // We'll use these coordinates to resize the div. 
    var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest()); 
    var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast()); 

    // Resize the image's div to fit the indicated dimensions. 
    var div = this.div_; 
    div.style.left = sw.x + 'px'; 
    div.style.top = ne.y + 'px'; 
    div.style.width = (ne.x - sw.x) + 'px'; 
    div.style.height = (sw.y - ne.y) + 'px'; 
}; 
// [END region_drawing] 

// [START region_removal] 
// The onRemove() method will be called automatically from the API if 
// we ever set the overlay's map property to 'null'. 
USGSOverlay.prototype.onRemove = function() { 
    this.div_.parentNode.removeChild(this.div_); 
    this.div_ = null; 
}; 
// [END region_removal] 

google.maps.event.addDomListener(window, 'load', initMap); 

    </script> 
    </head> 
    <body> 
    <div id="map"></div> 
    </body> 
</html>

来源

2015-09-14 07:33:02 scaisEdge

谷歌地图上覆盖手写地图

回答

相关问题