Google 맞춤 마커에서 문자 대신 숫자를 사용하는 방법

Google지도 아이콘은지도의 특정 사이트를 강조 표시합니다. 기본적으로 Google은 사각형이 있고 마커가 여러 개인 개별 마커를 식별하지만 일부 애플리케이션에는 적합하지 않을 수 있습니다. 예를 들어, 회사가 지점을 1, 2 및 3 사이트로 언급하는 경우 번호 매겨진 마커는 문자보다 더 명확하게 식별합니다. 프로그램에서 맞춤 마커를 사용하여지도 위치에 대한 고유 한 라벨을 디자인하십시오. 이 마커는 Google 차트 API를 사용하여 코딩 할 수있는 맞춤 아이콘을 사용합니다.

1.

Eclipse와 같은 Java 개발 프로그램을 사용하여 프로그램의 소스 코드를 엽니 다.

2.

"초기화"기능으로 스크롤하십시오. 이 코드 블록은지도를 정의하고 이에 대한 옵션을 정의합니다. 예를 들어, 코드를 읽을 수 있습니다.

function initialize () {

var 좌표 = new google.maps.LatLng (42.346429, -71.097186);

var myOptions = {

줌 : 4,

center : 좌표,

mapTypeId : google.maps.MapTypeId.ROADMAP

}

var ourHeadquarters = new google.maps.Map (document.getElementById ( "map_canvas"), myOptions);

}

삼.

마커의 위도와 경도를 정의하는 새 줄을 추가하십시오. 예를 들어 마커의 위도가 42.349093이고 경도가 -71.101971 인 경우 다음 줄을 추가하십시오.

var markerCoordinates = new google.maps.LatLng (42.349093, -71.101971);

4.

마커를 만들려면 다음 블록을 추가하십시오.

var marker = 새 google.maps.Marker ({

위치 : markerCoordinates,

지도 : ourHeadquarters,

});

"markerCoordinates"를 이전 단계에서 만든 변수로 바꾸고 "ourHeadquarters"를지도와 관련된 변수로 바꿉니다.

5.

마커 블록 안에 다음 행을 추가하여 마커 아이콘을 만듭니다.

icon : '// chart.apis.google.com/chartchst=d_map_pin_letter&chld=A|FF0000|000000'

6.

줄의 "A"를 숫자로 바꿉니다. 예를 들어, "1"로 바꾸고 행을 다음과 같이 변경하십시오.

icon : '// chart.apis.google.com/chartchst=d_map_pin_letter&chld=1|FF0000|999999'

7.

"FF0000"을 표식 배경의 HTML 16 진수 코드로 변경하십시오. 예를 들어, 코드 "FFFF00"을 사용하는 배경색을 노란색으로 설정하려면 코드를 "FFFF00"으로 바꾸고 줄을 다음과 같이 변경하십시오.

icon : '// chart.apis.google.com/chartchst=d_map_pin_letter&chld=1|FFFF00|999999'

8.

"999999"를 마커 번호 텍스트의 HTML 16 진수 코드로 변경하십시오. 예를 들어 코드 "000000"을 사용하는이 텍스트를 검은 색으로 쓰려면 코드를 "000000"으로 바꾸고 행을 다음과 같이 변경하십시오.

icon : '// chart.apis.google.com/chartchst=d_map_pin_letter&chld=1|FFFF00|000000'