Yandex는 API 2.1 전환을 매핑합니다.

이 기사에서는 Yandex.Maps API 작업에 대한 일련의 기사를 시작하려고 합니다. Yandex.Maps 문서는 상당히 완성도가 높지만 그 안에 있는 정보의 단편화 정도가 높아서 처음 반리터 없이 문서를 입력하면 알 수 없고 문제를 해결하기 위해 지출할 수 있습니다. 문서와 검색 엔진에서 검색하는 데 많은 시간이 소요됩니다. 이 일련의 기사에서는 이 글을 쓰는 시점에 최신 Yandex.Maps API 버전 2.1을 사용하는 가장 일반적인 경우에 대한 실용적인 솔루션에 대해 설명합니다.

연락처 정보에 사이트를 배치할 때 사이트가 개발 중인 조직의 위치가 표시될 지도를 삽입해야 하는 경우가 많습니다. 가장 간단한 경우에 이것은 온라인 지도의 스크린샷일 수 있습니다(또는 온라인 상태가 아님).

삽입용 대화형 지도지도 빌더를 사용할 수 있습니다
https://tech.yandex.ru/maps/tools/constructor/:

지도의 고급 사용(자체 레이블, 프로그래밍 방식의 지도 이동 등)이 필요한 경우 Yandex.Maps API를 사용해야 합니다. https://tech.yandex.ru/maps/jsapi/ . 지도를 사용하는 방법의 예로 이 문서에서는 사용자 지정 레이블과 풍선을 간단히 추가하여 지도를 만드는 방법을 살펴봅니다.

먼저 API 구성 요소를 연결해 보겠습니다.

지도를 사용하여 일부 대규모 애플리케이션을 개발하는 경우 Yandex 측에서 API를 업데이트할 때 프로덕션에서 아무 것도 중단되지 않도록 특정 버전의 API 구성 요소를 연결하는 것이 좋습니다.

지도는 예를 들어 다음과 같은 블록에 배치해야 합니다. div#맵. 다음으로 이 블록에서 지도를 생성해야 합니다(지도 및 DOM 준비 이벤트가 트리거된 후).

여기서 우리는 다음을 나타냅니다.

1. 블록 식별자 지도, 여기서 지도를 생성합니다.
2. 센터- 폭과 경도를 나타내는 지도의 중심;
3. 줌— 지도 축척 계수.

기본적으로 Yandex.Maps는 웹사이트에서 대부분의 경우 필요하지 않은 불필요한 요소를 많이 생성합니다. 기본적으로 컨트롤과 맵의 동작에 2가지 조건을 적용하면 충분합니다.

1. 지도 요소 중 확대/축소 슬라이더만 있습니다.
2. 마우스 스크롤로 지도를 확대/축소해서는 안 됩니다.

이러한 요구 사항을 충족하기 위해 코드를 보완합니다.

여기서 우리는 비활성화했습니다. 스크롤 줌그리고 추가 "줌 컨트롤"왼쪽 상단 모서리에서 위치.

이제 지도에 레이블을 추가해야 합니다. 기사의 경우 http://medialoot.com/item/free-vector-map-location-pins/에서 이미지를 다운로드하고 다음과 같이 코드에 배치합니다.

여기서 우리는 변수를 선언합니다. myPlacemark, 첫 번째 매개 변수에 마커를 작성합니다. ymaps.Placemark레이블 좌표를 지정하고 세 번째 매개변수에서:

1. 에 표시하다 아이콘레이아웃사용자 정의 레이블 이미지가 사용됩니다.
2. iconImageHref- 이미지 경로;
3. 아이콘 이미지 크기- 이미지의 크기를 지정합니다.
4. iconImageOffset- 우리는 그림의 왼쪽 상단 모서리에서 필요한 물체를 가리키는 이미지 지점으로의 이동을 나타냅니다. 이것은 지도가 축척될 때 레이블의 위치가 잘못되지 않도록 하기 위해 필요합니다. 오프셋이 음수 값으로 표시되는 이유 - API 작성자는 신만이 알고 있습니다.

그리고 통해 myMap.geoObjects.add()지도에 마커를 추가합니다.

이제 지도 레이블을 클릭할 때 표시될 풍선을 만들어 보겠습니다. 풍선의 레이아웃과 내용은 http://designdeck.co.uk/a/1241에서 가져옵니다.

ymaps.ready(초기화) ; function init() ( var myMap; myMap = new ymaps.Map ("map" , ( center: [ 55.7652 , 37.63836 ] , zoom: 17 , controls: ) ) ; myMap.behaviors .disable ("scrollZoom" ) ; myMap. 컨트롤 .add("zoomControl" , ( 위치: ( 상단: 15 , 왼쪽: 15 ) ) ) ; var html = " "; HTML += "" ; HTML +=" "; HTML += " 빅토리아 타워 가든 " ; HTML += "" ; HTML +=" 런던 시 " ; html += "" ; html += " 영국 " ; HTML += " 020 7641 5264 " ; HTML += " " ; HTML += " " ; var myPlacemark = new ymaps.Placemark ([ 55.7649 , 37.63836 ] , ( balloonContent: html ) , ( iconLayout: "default#image" , iconImageHref: "http://site/files/APIYaMaps1/min_marker.png", iconImageSize: [ 40 , 51 ] , iconImageOffset: [ - 20 , - 47 ] , balloonLayout: "default#imageWithContent" , balloonContentSize: [ 289 , 151 ] , balloonImageHref: "http://site/files/APIYaMaps1/min_popup.png", balloonImageOffset: [ - 144 , - 147 ] , balloonImageSize: [ 289 , 151 ] , balloonShadow: false ) ) ; myMap.geoObjects .add(myPlacemark) ; )

우리는 여기에 있습니다:

1. 안에 풍선 콘텐츠풍선이 열릴 때 표시될 내용을 지정하십시오.
2. 풍선 레이아웃- 사용자 정의 이미지가 풍선 레이아웃으로 사용되도록 지정합니다.
3. 풍선 콘텐츠 크기그리고 풍선 이미지 크기- 콘텐츠 및 이미지의 크기, 각각
4. 풍선이미지Href- 이미지 경로;
5. 풍선 이미지 오프셋- 왼쪽 상단 모서리에 상대적인 오프셋;
6. 풍선그림자— 풍선 그림자 비활성화(사용자 정의 이미지에는 영향을 미치지 않음).

릴리스 후보는 공개적으로 사용할 수 있지만 아직 승인 중인 API 버전입니다. 출시 후보를 안정적인 버전으로 설치하기 전에 출시되자마자 API 기능 저하로 이어질 수 있는 버그에 대한 테스트를 거칩니다. 프로젝트에서 릴리스 후보를 사용하면 잠재적인 오류를 적시에 식별하는 데 도움이 될 수 있습니다. 새 버전의 API로 앱 작업을 사전 테스트할 수도 있습니다.

릴리스 후보는 앱 개발 및 테스트 환경에서 사용해야 합니다. 이렇게 하면 프로덕션 환경에서 오류를 방지하는 데 도움이 됩니다. 다음과 같이 릴리스 후보를 활성화할 수 있습니다.

맨 처음에는 http://api-maps.yandex.ru/에서 지도 API를 연결합니다.

옵션을 더 자세히 살펴보겠습니다.

lang - 두 개의 매개변수 language_region으로 설정,

언어 - 두 자리 언어 코드. ISO 639-1 형식으로 지정됩니다.
지역 - 두 자리 국가 코드. ISO 3166-1 형식으로 지정됩니다.

에 이 순간다음 로케일이 지원됩니다.

lang=ru_RU;
lang=ko_US;
lang=ru_UA;
lang=uk_UA;
언어=tr_TR.

추가 옵션을 사용할 수 있습니다.

coordorder - 경도-위도 쌍을 입력으로 허용하는 API 함수에서 지리적 좌표가 지정되는 순서(예: Placemark).

가능한 값:

latlong - [위도, 경도] - 기본적으로 사용됩니다.
longlat - [경도, 위도].

기본값: 위도.

load - 로드할 모듈 목록입니다.

기본값: package.full.

모드 - API 로딩 모드.

mode=release - API 코드를 패키지 형태로 다운로드하여 브라우저에서 트래픽과 실행 속도를 최소화할 수 있습니다.
mode=debug - 다운로드 모드를 소스 코드로.

기본값: 릴리스.

연결 옵션에 대해 자세히 알아보기

지도를 표시하기 위해 0이 아닌 크기의 컨테이너가 지정되고 모든 블록 유형 HTML 요소를 컨테이너로 사용할 수 있습니다(예: div).

맵 매개변수는 코드에서 설정됩니다.

myMap = new ymaps.Map('지도', (
center: , // 니즈니노브고로드 지도의 중심
확대/축소: 12 - 확대/축소 수준
});

지도는 전체 웹 페이지가 로드된 후에 생성되어야 합니다. 이렇게 하면 지도의 컨테이너가 생성되었고 id로 액세스할 수 있는지 확인합니다. 페이지가 로드된 후 지도를 초기화하려면 ready() 함수를 사용할 수 있습니다.

API가 로드되고 DOM이 생성되면 ready 함수가 호출됩니다.

ymaps.ready(초기화);

함수 초기화()(
// 맵의 인스턴스를 생성하고 다음을 사용하여 컨테이너에 바인딩합니다.
// 주어진 id("map").
myMap = new ymaps.Map('지도', (
// 지도를 초기화할 때 다음을 지정해야 합니다.
// 중심과 스케일 팩터.
센터: , // 니즈니노브고로드
줌: 12
});

기본적으로 맵에는 사용 가능한 모든 컨트롤이 표시됩니다.

지도 유형 - 구성표.

API는 5가지 기본 제공 지도 유형을 제공합니다.

구성표(yandex#map) - 기본적으로;
위성(yandex#satellite);
하이브리드(yandex#하이브리드);
인민지도(yandex#publicMap);
국가 지도의 하이브리드(yandex#publicMapHybrid).

지도 위성의 유형을 결정하는 예

예제 코드:

이전에 말했듯이 'mediumMapDefaultSet' 컨트롤의 기본 세트는 기본적으로 지도에 추가됩니다.

맵에 필요한 컨트롤을 추가하기 위해 맵을 생성할 때 컨트롤 매개변수에 해당 키 목록을 지정할 수 있습니다.

다음은 지도 축척 및 유형 컨트롤에 대한 예제 코드입니다.

예제 코드:

behaviors 매개변수를 사용하여 맵의 동작을 설정할 수 있습니다.

값을 설정하여 지도 동작에 대한 다양한 옵션을 활성화하거나 비활성화할 수 있습니다.

마우스 버튼을 두 번 클릭하여 지도의 크기를 조정합니다.

마우스 또는 한 번의 터치로 지도를 드래그합니다.

마우스 왼쪽 버튼으로 영역을 선택할 때 지도 크기 조정;

멀티 터치 터치로 지도 크기 조정;

지역을 선택할 때 지도 축척 마우스 오른쪽 버튼으로 클릭쥐;

거리 측정;

마우스 휠로 지도를 확대/축소합니다.

마우스 휠 확대/축소가 비활성화된 코드 예제.

맵이 생성된 후 맵의 매개변수를 변경할 수 있습니다.

마우스 휠 줌 켜기

myMap.behaviors.enable("scrollZoom");

끄다

myMap.behaviors.disable("scrollZoom");

새로운 유형의 지도 민속 설치

myMap.setType('yandex#publicMap');

새 지도 센터 설정

지금은 여기까지입니다.

계속하려면…