Использование Google Maps API для радиального расстояния

Содержание

• направления

Вы можете настроить карту Google в соответствии с конкретными потребностями аудитории вашего сайта с помощью API Карт 3.0. Одним из способов персонализации является вставка круга, который показывает радиус расстояния вокруг определенного места. Например, вы можете показать пятимильный радиус вокруг туристического места, чтобы посетители могли видеть близлежащие отели и рестораны. Чтобы создать радиус расстояния вокруг местоположения или точки, используйте класс «Круг» в Картах Google.

направления

1. Откройте файл HTML и перейдите в раздел, содержащий код карты Google.

2. Прокрутите код вниз, пока не найдете местоположение маркера. Чтобы легко найти закладку, выполните поиск по слову «google.maps.Marker» в файле HTML.

3. Ниже, где вы устанавливаете маркер, создайте слой «Круг» и прикрепите его к нему. Например, введите:

   var circleExample = new google.maps.Circle ({map: map

4. Добавьте радиус круга, который будет вокруг маркера в метрах:

   var circleExample = new google.maps.Circle ({карта: радиус карты: 5000

5. Создайте цвет заливки для круга. Вы устанавливаете цвет, используя шестнадцатеричный формат. Например, введите:

   var circleExample = new google.maps.Circle ({карта: радиус карты: 5000 fillColor = #FFFFFF});

6. Свяжите или добавьте кружок к маркеру:

   var circleExample = new google.maps.Circle ({карта: радиус карты: 5000 fillColor = #FFFFFF}); circleExample.bindTo ('карта', маркер);

   
   

7. Сохраните карту и протестируйте. Google Maps покажет белый круг радиусом 5000 метров вокруг местоположения маркера.