Как правильно использовать google maps статические плитки с листом

Я пытаюсь использовать плитки, которые я создал с помощью API-интерфейсов google maps, с помощью листовки (мне нужно сгенерировать некоторые фрагменты заранее, потому что они будут использоваться офлайн без подключения к Интернету).Как правильно использовать google maps статические плитки с листом

Например, чтобы создать 640x640 плитку с центром на острове Мэн в LAT/LNG (54.217, -4.5373) с уровнем масштабирования 8, я использую следующий запрос URL: https://maps.googleapis.com/maps/api/staticmap?center=54.217,-4.5373&zoom=8&size=640x640&maptype=roadmap

В результате плитка как показано ниже:

Далее я хочу использовать эту плитку с листовкой и добавить маркер в центре плитки со следующим кодом:

<html> 
<header> 
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="http://localhost/leaflet.js"></script> 
    <style> 
    #map {height: 640px; width:640px;} 
    </style> 

</header> 

<body> 
<div id="map"></div> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     // Handler for .ready() called. 
     console.log("document ready!"); 
     var map = L.map('map').setView([54.217, -4.5373], 8); 

     L.tileLayer('http://localhost/staticmap.png', { 
     attribution: 'Copyright Google Maps', 
     tileSize: 640, 
     minZoom:8, 
     maxZoom:8, 
     continuousWorld: false, 
     nonoWrap: false, 
     }).addTo(map); 
     var marker = L.marker([54.217, -4.5373]).addTo(map); 
    }); 
</script> 

</body> 
</html>

Кажется, что результирующая карта полностью «нецентрирована», как показано ниже (маркер также должен быть на острове человека). Не уверен, что я делаю неправильно здесь:

Любая помощь это было бы весьма признателен! Благодаря!

источник

2017-01-19 BigONotation

Во-первых, учтите, что изображения из «API статических карт» не являются фрагментами: вы можете запросить произвольные размеры, и нет никакой простой схемы для сшивания таких изображений вместе. Плитки работают хорошо, потому что когда одна плитка заканчивается, начинается другая плитка. Плиткам нужна сетка, такая же, как в объяснении в TMS specification.

Во-вторых, поскольку они не являются плиточками, использование L.TileLayer - не лучший способ. Для ориентированного на север изображения, соответствующего схеме проекции карты, путь к использованию - это L.ImageOverlay.

Чтобы использовать наложение изображений, вам необходимо вычислить ограничительную рамку изображения. В вашем случае, мы можем сделать это вручную, так:

console.log('lat-lng of center:', map.containerPointToLatLng(map.getSize().divideBy(2))); 
console.log('lat-lng of center -320px:', map.containerPointToLatLng(map.getSize().divideBy(2).subtract([320,320]))); 
console.log('lat-lng of center +320px:', map.containerPointToLatLng(map.getSize().divideBy(2).add([320,320])));

После того, как у вас есть URL для наложения изображений и границ, добавить его к карте и она должна look like this.

Последнее, быть в курсе terms and conditions for stuff coming from the google maps API, в частности:

10.5.d Нет кэширование или хранение. [...]

Также имейте в виду, что другие платформы веб-карт не имеют этих ограничений.

источник

2017-01-19 11:39:33 IvanSanchez

большое спасибо за решение и указатели на ограничения в условиях Google Maps – BigONotation

Как правильно использовать google maps статические плитки с листом

ответ

Смежные вопросы