Mở bản đồ trên Google Maps - thêm lớp hồ sơ biển như mặc định

Tôi đang cố gắng thực hiện một số dự án cá nhân mà tôi đang cố gắng thêm lớp biển trên bản đồ google. Vì vậy, quyết định đi với tùy chọn osm miễn phí.Mở bản đồ trên Google Maps - thêm lớp hồ sơ biển như mặc định

Tôi muốn thêm hồ sơ biển và lớp ais làm lớp mặc định trên đường may. Cho đến nay semarks lớp osm trên bản đồ google là ok.

Làm cách nào tôi có thể thêm các lớp khác làm lớp mặc định với lớp seamark. Tôi không thể tìm ra cách thêm các lớp bổ sung làm mặc định trên bản đồ.

Cảm ơn trước!

My fiddle

và Snippet:

var map; 
 

 
function initMap() { 
 

 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 9, 
 
    center: { 
 
     lat: 44.5, 
 
     lng: 13.1 
 
    }, 
 
    mapTypeControlOptions: { 
 
     mapTypeIds: ['roadmap'] 
 
    } 
 
    }); 
 

 

 
    var osmMapTypeOptions = { 
 
    getTileUrl: function(coord, zoom) { 
 
     console.log("getTileUrl("+coord.x+","+coord.y+","+zoom+")"); 
 
     var z = zoom; 
 
     var limit = Math.pow(2, z); 
 
     if (coord.y < 0 || coord.y >= limit) { 
 
     return null; 
 
     } else { 
 
     coord.x = ((coord.x % limit) + limit) % limit; 
 
     url = "http://t1.openseamap.org/seamark/"; 
 
     path = zoom + "/" + coord.x + "/" + coord.y + "." + "png"; 
 
     console.log("getTileUrl:" + url + path); 
 
     return url + path; 
 
     
 
     } 
 
    }, 
 
    tileSize: new google.maps.Size(256, 256), 
 
    isPng: true, 
 
    maxZoom: 19, 
 
    minZoom: 0, 
 
    name: "OSM" 
 
    }; 
 

 
    function getTileURL(bounds) { 
 
    var res = this.map.getResolution(); 
 
    var x = Math.round((bounds.left - this.maxExtent.left)/(res * this.tileSize.w)); 
 
    var y = Math.round((this.maxExtent.top - bounds.top)/(res * this.tileSize.h)); 
 
    var z = this.map.getZoom(); 
 
    var limit = Math.pow(2, z); 
 
    if (y < 0 || y >= limit) { 
 
     return null; 
 
    } else { 
 
     x = ((x % limit) + limit) % limit; 
 
     url = this.url; 
 
     path = z + "/" + x + "/" + y + "." + this.type; 
 
     if (url instanceof Array) { 
 
     url = this.selectUrl(path, url); 
 
     } 
 
     return url + path; 
 
    } 
 
    } 
 

 
    var osmMapType = new google.maps.ImageMapType(osmMapTypeOptions); 
 

 
    map.overlayMapTypes.insertAt(0,osmMapType); 
 
    map.overlayMapTypes.insertAt(1,osmMapType); 
 

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

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?language=en&libraries=drawing,geometry"></script> 
 
<div id="map"></div>

Nguồn

2017-09-14 Anonymous

Tôi đã tìm thấy một ví dụ của việc sử dụng một vài lớp trên bản đồ:

https://developers.google.com/fusiontables/docs/samples/multiple_layers_per_map

<!DOCTYPE html> 
<!-- 
    Copyright 2011 Google Inc. All Rights Reserved. 

    Licensed under the Apache License, Version 2.0 (the "License"); 
    you may not use this file except in compliance with the License. 
    You may obtain a copy of the License at 

     http://www.apache.org/licenses/LICENSE-2.0 

    Unless required by applicable law or agreed to in writing, software 
    distributed under the License is distributed on an "AS IS" BASIS, 
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 
    See the License for the specific language governing permissions and 
    limitations under the License. 
--> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="UTF-8"> 

    <title>Fusion Tables Layer Example: Multiple Layers per Map</title> 

    <link href="/apis/fusiontables/docs/samples/style/default.css" 
     rel="stylesheet" type="text/css"> 
    <script type="text/javascript" 
     src="http://maps.google.com/maps/api/js?sensor=false"></script> 

    <script type="text/javascript"> 
     function initialize() { 
     var map = new google.maps.Map(document.getElementById('map-canvas'), { 
      center: new google.maps.LatLng(37.4, -122.1), 
      zoom: 5, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 

     var infoWindow = new google.maps.InfoWindow(); 

     // Initialize the first layer 
     var firstLayer = new google.maps.FusionTablesLayer({ 
      query: { 
      select: 'geometry', 
      from: '196LqydLhOq1Wl9612hNhcGoh4vUmRjTaiFvDhA' 
      }, 
      map: map, 
      suppressInfoWindows: true 
     }); 
     google.maps.event.addListener(firstLayer, 'click', function(e) { 
      windowControl(e, infoWindow, map); 
     }); 

     // Initialize the second layer 
     var secondLayer = new google.maps.FusionTablesLayer({ 
      query: { 
      select: "'Full Address'", 
      from: '1tL67aacGcCyMfAg9PUo_-gp4qm74GDtFiCMtFg' 
      }, 
      map: map, 
      suppressInfoWindows: true 
     }); 
     google.maps.event.addListener(secondLayer, 'click', function(e) { 
      windowControl(e, infoWindow, map); 
     }); 
     } 

     // Open the info window at the clicked location 
     function windowControl(e, infoWindow, map) { 
     infoWindow.setOptions({ 
      content: e.infoWindowHtml, 
      position: e.latLng, 
      pixelOffset: e.pixelOffset 
     }); 
     infoWindow.open(map); 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    </body> 
</html>

Hy vọng rằng sẽ giúp.

Nguồn

2017-10-02 18:19:18

Cảm ơn bạn đã trả lời, nhưng nó thực sự không phải là những gì tôi đang tìm kiếm. Tôi cần lớp hồ sơ biển mở rộng. –

Trong khi liên kết này có thể trả lời câu hỏi, tốt hơn nên bao gồm các phần thiết yếu của câu trả lời ở đây và cung cấp liên kết để tham khảo. Câu trả lời chỉ liên kết có thể trở thành không hợp lệ nếu trang được liên kết thay đổi. - [Từ đánh giá] (/ đánh giá/bài đăng chất lượng thấp/17681926) – R3tep

Mở bản đồ trên Google Maps - thêm lớp hồ sơ biển như mặc định

Trả lời

Các vấn đề liên quan