googlemap_javascript 기술의 Javascript 구현 방법
- WBOY원래의
- 2016-05-16 19:21:311248검색
이것은 매우 일반적인 background-position-x 애플리케이션입니다. 기술적 내용은 높지 않지만 아이디어는 여전히 생각해 볼 가치가 있으며 이는 DHTML에서 수정할 수 있는 것이 많다는 것을 증명합니다. 배경에 맵을 사용하세요. 더 복잡하다면 ajax를 사용하여 이미지의 배경을 동적으로 로드하세요. 이 역시 작은 맵입니다. 스크립트의 속도와 효율성에 병목 현상이 있기 때문에 이에 대해서는 자세히 다루지 않겠습니다.
기본 지식:
background-position-x--------------- 배경 이미지의 X 좌표입니다.
background-position-y--------------- 배경 이미지의 Y 좌표입니다.
event.clientX -------------마우스의 X 좌표입니다.
event.clientY -------------마우스의 Y 좌표입니다.
JSON ---------------------------------- 요즘 이 단어가 많이 유행하는 것 같은데, After Action의 ajax가 나온 이후로 더욱 대중화되었습니다. 넓은 의미에서는 JavaScript의 연관 배열입니다. JSON(JavaScript Object Notation)은 다음과 유사합니다. var o={name:"never-online",web:"http://www.never-online.net",blog:"http://blog.never-online .net"}이므로 o.name, o.web 또는 o['name'], o['web']과 같은 배열 관계 형식을 사용할 수 있습니다.
문제 해결 아이디어:
이 맵의 가장 큰 어려움은 좌표의 정확성, 즉 마우스가 움직일 때 배경 위치의 좌표 방향입니다.
위 문제를 해결하면 절반 이상의 성공을 거둘 수 있습니다.
저는 일반적인 방법을 사용합니다
좌표 = 마우스로 이동한 후의 좌표 - 우리가 저장한 원래 좌표입니다.
원래 좌표를 얻는 방법은 다음과 같습니다. neverOnlineMap._wrapper.X = event.clientX-parseInt(x.BackgroundPositionX);
즉, 마우스의 현재 위치인 X 좌표를 사용합니다. 이미지 배경
이미지 배경 좌표 = 마우스 위치 - 원래 위치
Y 좌표는 X 좌표와 유사하며 반복되지 않습니다. neverOnlineMap._wrapper.Y = event.clientY-parseInt(x.BackgroundPositionY)
소스코드는 다음과 같습니다.
[Ctrl A select all 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다