2016-06-22 3 views
0

Мне нужно нарисовать графику по картам Google. Графика не всегда прозрачна, поэтому я хотел бы нарисовать текстовые надписи (названия стран, названия городов и т. Д.) По моей графике.Google Maps: Как нарисовать ярлыки (страна, названия городов и т. Д.) Над моим наложением

Для графики я использую overlay map type, это показано на базовой карте. Но мне не удалось нарисовать надписи?

Я догадался, что будет способ рисовать базовую карту дважды, с разными настройками стиля (так что я нарисую карту без ярлыков, наложил наложение, а затем наложил наложение с дорожной картой только с надписями), но это не похоже, я могу использовать основные типы карт в качестве наложенных. Другой способ, который я вижу, - это вручную получить плитки с ярлыками только путем компоновки URL. Это работает, но насколько я понимаю, доступ к картографической карте напрямую запрещен ToS.

Есть ли рабочий и, ну, законный способ сделать это?

Вот jsfiddle, который иллюстрирует URL сочиняет решение: https://jsfiddle.net/GRaAL/jyr81p2c/

// here is how I get google maps tile with labels only 
function getLabelsOnlyTile(coord, zoom) { 
    return "https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i" + zoom + "!2i" + (coord.x) + "!3i" + (coord.y) + "!4i512!2m3!1e0!2sm!3i353022921!3m14!2sen!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcC52Om9mZixzLmU6bHxwLnY6b24!4e0"; 
} 

ответ

3

я обнаружил, что StyledMapType может быть использован в качестве наложения типа карты (имеют одинаковые интерфейсы), так что я создал StyledMapType только с метками и вместо того, чтобы регистрировать его в реестре типов карт, просто добавили его как оверлей, таким образом:

var onlyLabels = new google.maps.StyledMapType([...], {name: 'labels'}); 
//draw useful data over map 
map.overlayMapTypes.insertAt(0, new UsefulDataOverlay()); 
//and then draw labels over it 
map.overlayMapTypes.insertAt(1, onlyLabels); 

Полный рабочий пример здесь: https://jsfiddle.net/GRaAL/jyr81p2c/2/

1

Вы могли бы хотеть проверить MapLabel for Google Maps V3:

Эта библиотека позволяет текст, который будет добавлен к карте в определенном месте. Обратите внимание, что браузер пользователя должен поддерживать Canvas для отображаемой метки.

MapLabel класс

enter image description here

Обратите внимание, что поддержка браузера <canvas> требуется для метки, которые будут отображаться. Аналитика

Источник:

https://github.com/googlemaps/js-map-label

How to add text label in Google Map API

Надеется, что это помогает

+1

Спасибо за совет, но мне нужно несуществующие Google Maps метки (названия стран, городов, океанов и т.д.). – GRaAL