Web Programming – Using Query String to display KML

여보세요 저는 Ron Eaglin 박사입니다 오늘은 고급 자바 스크립트 시리즈 중 하나입니다

내가 갈게 너를 보여줘 내가 여기 보여주고 싶은대로하는 법이야 나는 실제로 바로 여기 다른 사이트에있는 외부 kml 파일 Google지도 내부의 웹 페이지에 표시됩니다 그래서 저는 여기서 몇 가지 일을 할 것입니다 하나는이 버튼을 여기에서 클릭 할 수 있다는 것입니다

보여 주다 지형은 지형지도로 이동합니다 로드맵을 로드맵으로 변경하면 위성이이를 로드맵으로 변경합니다 위성지도, 그래서 실제로 어떻게 그 변화를 만들 수 있는지 보여줍니다 그리고 나서 여기 아래에 실제로 제가 지금 보여주고있는 것과 같은 몇 개의 링크가 있습니다 일부 미네소타 하이킹 코스가 있지만 클릭 할 수 있습니다

자연 보존, 이들은 내가 뽑은 그냥 임의의 KML 파일입니다 인터넷의 이것은 실제로 어딘가로 이끌 것이지만 지금은이 일을 할 것입니다 4 개의 파일 내가 어떻게이 일을 실제로 만들어 냈는지 보여 주겠다 그래서 코드를 살펴보고이 코드를 먼저 살펴 보도록하겠습니다 그럼 내가 제일 먼저 살펴볼 것은 버튼들입니다 여기에 세 개의 버튼이 있다는 것을 기억하십시오

다른 버전을 보여줄 수있는 지형, 로드맵 및 위성이 모두 포함 된지도 3 개의 버튼이있는 코드를 보면 비교적 간단합니다 그곳에 나는 onclick 버튼이 있고 나는 가지고있다 나는 함수를 호출한다 함수는지도의 함수입니다 지금이 일을하려면 실제로지도가 있어야합니다

바로 여기 세계의지도 자바 스크립트와 나는 그것을 안으로 설정합니까 display_kmlmap () 나는 실제로 그것들을 같은 것으로 설정한다 Google지도 여기에있는 Google Maps API가 있어야하는 경우 필요합니다 여기에 스크립트로로드되어 있으므로 여기에로드 된 Google지도가 있습니다 그것은 그것이 div 인 장소를 가지고 있습니다 map_canvas를 호출하고 옵션 세트와이 경우 옵션을 가지고 있습니다

기본값 지형도로 열면 버튼을 클릭하여 변경할 수 있습니다 그 그래서 본질적으로 각 개별 단추에 있습니다 내가 쳤던지도의 유형을 변경했습니다 함수를 호출하여 맵 유형 setMapTypeId 및 그 비교적 간단합니다 그래서 여기에서 볼 수 있습니다

나는 그것을 클릭한다, 나는 특정한 것을 가지고있다 변경되는 Google API setMapTypeId 그것은 매우 쉽습니다 이제 한 걸음 뒤로 물러나겠습니다 KML지도를 만드는 방법에 대해 설명했습니다 Google 내부에 기반지도가 있습니다

페이지, 이전 강의에서 웹 페이지 내부 하지만 조금만 검토하면 Google Maps API를 먼저 가지고 있습니다 나는 두 가지 일을한다 하나는지도, Google지도, GooglemapsMap 생성자 사용 KML 레이어를 만듭니다

바로 여기에 새로운 GoogleMapsKmlLayer를 만들어 KML 레이어를 만듭니다 두 가지로 전달합니다 하나는 KML 파일의 URL입니다

그런 다음 KML 옵션 집합과 KML 옵션을 설정해야합니다 KML의지도는 다음과 같아야합니다 당신이 만든 세계지도 그게 본질적으로 이제 내가 가지고있는 바로 다음으로 가자 우리가 다시 여기로 가면 내가 볼 수있다

나는 이것을 클릭 할 수 있고 실제로 다른 것을 가져올 수있다 다른 KML 파일 이것은 다른 KML 파일입니다 이 KML 파일을 모두 묶어 놓았습니다 내가 자랄 수있는 것은 비교적 간단하다

표시 할 KML 파일을 찾습니다 그럴거야 KML을 만들고 싶기 때문에 다른 강의에서 소개 할 내용입니다 검색 엔진 하지만 실제로이 작업을 한 방법은 다음과 같습니다 나는 href로 앵커를 만든다

href는 다시 indexhtml을 가리킨다 그런데이 페이지의 이름은 href가이 페이지로 되돌아가는 것을 가리 킵니다 물음표 KML이 같으면 URL의 실제 KML과 앵커는 사용자에게 표시 될 내용을 포함합니다 그래서 이것이 HTTP get을 할 것입니다

URL의 일부로이를 전송합니다 지금까지 클릭하면 좀 더 넓게 열면 실제로 볼 수 있습니다 여기서 일어나는 이걸 더 잘 볼 수 있도록 내가 옮길거야 KML을 보시면 KML을 볼 수 있습니다 같으면 그 다음 실제 URL을 얻었습니다

HTTP가 있습니다 그리고 내가 http를 바꿀 다른 하나를 클릭하면 지금 그것은 runtastic에있다 그래서 나는 다른 위치를 가지고있다 그것은 내 코드에 의해 선택 될 것입니다 그것은 표시되는지도가 될 것입니다

그래서 좀 보게 그 일이 어떻게 일어나며 이것은 비교적 간단합니다 이 형식으로 게시됩니다 이것은 매우 간단합니다 HTML 파일 이름 다음의 물음표 매개 변수 이름과 매개 변수 값 equals로 구분되고 실제로 여러 매개 변수 이름을 가질 수 있습니다

및 매개 변수 값 그리고 나서 이것의 끝에서 나는 앰퍼샌드를 넣고 다른 이름을 넣는다 또 다른 같음 및 다른 HTML 이름 그래서 내가해야 할 일은 파싱해야한다는 것입니다 우리가 쿼리 문자열이라고 부르는 부분 이것이 우리가 여기 올 때 그렇게 부르는 것입니다 너 내가 어떻게했는지 알 수있어

나는 이 KML URL은 글로벌 자바 스크립트 변수에 의한 것입니다 즉 함수에 대한 호출이 될 getParameterByName이 있습니다 이름은 KML입니다 내가 여기있는 방식으로 내려다 보면 이 링크에는 매개 변수 이름 KML이 같고 매개 변수 값이 있습니다 그래서 그 이름으로 매개 변수 값을 얻고 싶습니다

나는 이것을하는 수많은 방법이있다 나는 대단히 단순화 된 jQuery를 사용한다 여기에이 함수 안에있는 코드 그러나 본질적으로이 기능이하는 것은 정보 이 쿼리 문자열에서 전달 된 몇 가지 문자를 대체 한 다음 정규 표현식 검색을 사용하여 안에있는 조각 같음과 앰퍼샌드 그것은 끝이 있기 때문에 여기에 존재하지 않습니다 그래서 앰퍼샌드와 끝이 될 것입니다 그 특정한 조각을 돌려 보내라

저기있다 여기에 호출되는 두 가지 기능을 실제로보고 있습니다 JavaScript 함수로 작성된 대체로 2 개 이상 있습니다 당신은 생성 된 정규 표현식을 가지고있다 그것은 정규식에 대한 실행을 수행한다

decodeUriComponent라는 또 다른 함수가 있습니다 decodeUriComponent는 실제로 사용자에게 해당 코드를 코딩합니다 쓸모있는 변수 여기에 실제 정적 문자열로 사용할 수 있습니다 Google지도에 전화 걸기 그래서 여기에 호출되는 많은 함수가 있습니다 강력한 함수 정규 표현식 함수 인 대체 및 decodeUriComponent

보고 살펴보고 이해하는 것은 가치가 있습니다 양자 모두 UriComponent 디코드 및 인코딩 쿼리 문자열로 작업하는 경우 매우 유용한 함수입니다 우리는 이미 정규 표현식의 작동 방식에 대한 논의를 가졌습니다 대체 문자열은 표준 문자열 함수입니다 해당 URI에있는 모든 것을 얻는 표준 문자열 함수 일관된

일관된 문자열입니다 그래서 그게 어떻게 함께 할 수 있습니다 지금 실제로 돌아온다 결국 그 매개 변수는 당신이 넘어간 URL 내가 아무것도 보이지 않는다면 나는 그것을 보았습니다 그만큼 KML에는 실제로 빈 문자열을 반환 할 항목이 없습니다

이 경우에는 실제로 기본 URL을 넣습니다 여기에서 KML URL을 사용하여 KML 레이어를 호출합니다 그것이 KML 옵션과 함께 전달되었습니다 이것을 고려해야 할 중요한 것들은 당신은 어떻게 사용하는지에 대한 약간의 예를보아야합니다 Google Maps API를 사용하여 KML 파일 표시 그러나 여기에서 이해하는 것이 정말로 중요한 것들 중 일부는 매우 간단합니다

이 버튼을 클릭하면 Google을 사용합니다 API는 이제 setMapID를 사용하여 비교적 간단합니다 열거로 지형, 도로지도 및 위성에 제공되지만이 다른 조각은 너는 실제로 전화, 당신은 같은 것을 기억할 수있다 매개 변수를 전달하는 HTML 페이지 나는 여기서 서버에 대해 아무 것도하지 않을 것이다 클라이언트에서 해결되었습니다

측면 그리고 클라이언트 측에서 다음을 취할 수 있습니다 전달 된 쿼리 문자열을 구문 분석합니다 구문 분석시 KML 변수가 실제로는 유용하고 표시 할 수있는 URL Google지도에서 잘하면이게 너에게 아주 유용 했어 그리고 당신이 정말로 흥미로운 것들을 할 수있게 해줄 수 있습니다 안녕 좋은 프로그래밍