Рубрики
Без рубрики

Пользовательские Infobox этикетки с API Google Maps

Давайте сделаем базовую карту, которая принимает набор широты и долготы и возвращает набор простых близлежащих ярлыков, показывающих конкретные виды местных мест.

Автор оригинала: Victor Gerard Temprano.

Вступление

Многие компании заинтересованы в определении того, сколько определенного типа бизнес-типа, конкурента, поставщика или иным образом могут быть в определенной области. Или, может быть, вы делаете приложение, и вы только хотите, чтобы пользователи могли видеть информацию о близлежащих парках.

Если область обыскивается, является относительно небольшим (один или два города), Google Flaces API Это отличный выбор для запроса предприятий и других местных мест. Немного сложно реализовать это во многих конкретных деталях, но начать ветер.

Давайте сделаем базовую карту, которая принимает набор широты и долготы и возвращает набор простых близлежащих ярлыков, показывающих конкретные виды местных мест.

Чтобы увидеть готовую карту из этого учебника, Нажмите здесь Отказ

Начиная

Вот все, что вам нужно, чтобы начать:

  • Основной HTML-редактор
  • Живой доступ в Интернет к API Google
  • Infobox.js.

Мы будем использовать:

  • Места JS API.
  • Google Maps JS API
  • Инфобокс Библиотека
  • Основные CSS и HTML

Создайте новую папку и этот простой каталог:

- Google_Map_Infobox_Labels/
 - index.html
 - infobox.js

Давайте получим кодирование!

HTML SETUP.

Прежде всего, давайте сделаем простую HTML-страницу, которая будет размещать нашу карту вместе с самостоятельной картой:




  
    Custom Label Map

Ванкувер как хорошее место, сколько для нашего демо (вот где я живу)! Я также действительно люблю, что карты Google больше не требуют какого-либо ключа API, что делает его намного легче быстро развернуть код.

Вы можете увидеть, что мы приложили библиотеку мест ( ? Библиотеки = Места ) В конце нашего сценария вызов для Google Maps. Это требуется!

Удаление стилей карты по умолчанию и рестайлинг

Дополнительный шаг: Вам не нужно обращать на карту, но она поможет с дисплеем.

Чтобы наши этикетки были более видимыми, мы должны избавиться от некоторых шума на карте, созданной другими этикетками. Итак, вот какой-то полезный код для удаления различных видов ярлыков (административных, географических, дорожных и т. Д.).

Добавьте этот код (поместите его в функцию initmap ()):

var myStyle = [{
  featureType: "administrative",
  elementType: "labels",
  stylers: [{
    visibility: "on"
  }]
}, {
  featureType: "water",
  elementType: "labels",
  stylers: [{
    visibility: "off"
  }]
}, {
  featureType: "road",
  elementType: "labels",
  stylers: [{
    visibility: "off"
  }]
}, {
  featureType: "poi",
  elementType: "labels",
  stylers: [{
    visibility: "off"
  }]
}];

map = new google.maps.Map(document.getElementById('map'), {
  center: {
    lat: 49.3268,
    lng: -122.9520
  },
  zoom: 15,
  mapTypeControlOptions: {
    mapTypeIds: ['mystyle', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN]
  },
  mapTypeId: 'mystyle'
});
map.mapTypes.set('mystyle', new google.maps.StyledMapType(myStyle, {
  name: 'My Style'
}));

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

Запрос API мест для пользовательских мест

Места API отлично подходит для возврата всех близлежащих мест, но что, если мы хотим вернуть что-то более конкретное?

Здесь я говорю о местах API, что я хочу все парки, и только парки. Но вы можете проверить Типы мест Список И получить все виды разных поисков!

var request = {
  location: {
    lat: 49.3268,
    lng: -122.9520
  },
  radius: '3000',
  type: ['park']
};

var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, function(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      console.log(results[i]);
      // Will place infobox creation code here
    }
  }
});

Здесь мы создаем наш запрос, давая ему центральную точку – наше местоположение – и радиус (в метрах), а также тип.

Затем мы используем Placesservice, чтобы снять поиск и получить результаты возврата, а консоль выйти из результирующихся мест в для петля.

Настройка Infobox этикетки

Теперь давайте покажем этикетки! Вместо маркеров, как это можно сделать нормально, мы вместо этого делаем этикетки. Для этого мы будем использовать класс Infobox из библиотеки Infobox.js следующим образом. Обратите внимание, что это входит в для петля из примера кода выше.

var place = results[i];
var labelText = results[i].name;
var myOptions = {
  content: labelText,
  maxWidth: "200px",
  boxStyle: {
    border: "none",
    textAlign: "center",
    fontSize: "12pt",
    background: "white",
    opacity: "0.7",
    padding: "1px"
  },
  disableAutoPan: true,
  pixelOffset: new google.maps.Size(0, -10),
  position: place.geometry.location,
  closeBoxURL: "",
  isHidden: false,
  pane: "mapPane",
  enableEventPropagation: true
};

var ibLabel = new InfoBox(myOptions);
ibLabel.open(map);

Вы можете честно можно честно видеть, где настроится, вы можете изменить непрозрачность, фон, размер шрифта и более отсюда.

Возможные улучшения

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

  • Добавление центрального маркера, чтобы узнать начало
  • Видимый круг для поиска радиуса
  • Поиск нескольких типов мест одновременно
  • Улучшение стайлинга меток, чтобы они “поп” больше
  • Добавление флажков, позволяющих пользователям поискать разные типы

Чтобы увидеть всю последнюю карту из этого учебника, Нажмите здесь Отказ

Там есть целый мир карт для вас, чтобы исследовать! Спасибо за чтение, и удачи!

Читайте ещё по теме: