최근의 데이터 통계 프로젝트는 중국지도에 사용되어야합니다. 지도. 이 기사에서는 JS를 사용하여 맵 상호 작용을 완료하는 방법을 알려 드리겠습니다.
Raphael.js는 간단히 소개하겠습니다. 또한 Raphael.js는 브라우저와도 호환되며 오래된 치아 IE6과 호환됩니다. Raphael.js의 공식 웹 사이트 주소 : http://raphaeljs.com/
준비
벡터 맵을 준비하고 인터넷에서 벡터 맵을 찾거나 일러스트 레이터를 사용하여 벡터 맵을 그린 다음 SVG 형식으로 파일을 내보내고 정보 내부 정보를 추출 할 수 있습니다. (M에서 시작하는 좌표). 그리고 chinamappath.js 형식으로 경로 경로 정보 형식으로 맵 경로 정보를 준비하십시오.
다음과 같이 코드 코드를 복사하십시오.
var China = [];
기능 페인트 맵 (R) {
var attr = {{
"채우기": "#97d6f5",
"스트로크": "#ee",
"스트로크 윈도": 1,
"스트로크 라인 조인": "라운드"
};
중국. Aomen = {
이름 : "마카오",
경로 : R.Path ( "M413.032, ........................................... ..... 414.183Z "). attr (attr)
}
China.hk = {
// 형식은 위와 동일합니다
};
}
위는 () 함수에 대한 준비된 맵 경로 정보의 캡슐화이며, 나중에 호출을 위해 파일 이름을 chinamappath.js입니다.
HTML
먼저 raphael.js 라이브러리 파일과 chinamappath.js 경로 정보 파일을 헤드에로드하십시오.
다음과 같이 코드 코드를 복사하십시오.
<script type = "text/javaScript"src = "raphael.js"> </script>
<script type = "text/javaScript"src = "chinamappath.js"> </script>
그런 다음 Div#맵을 신체에 넣습니다.
다음과 같이 코드 코드를 복사하십시오.
<div id = "map"> </div>
자바 스크립트
우선, 우리는 페이지의지도를 호출합니다. 메소드는 다음과 같습니다.
다음과 같이 코드 코드를 복사하십시오.
Window.onload = function () {
//지도를 그립니다
var r = Raphael ( "지도", 600, 500);
페인트 맵 (R);
}
현재 브라우저를 사용하여 맵을 엽니 다. 다음으로, 우리는지도의 해당 지방 지역에 지방의 이름을 추가하고 마우스가 각 지방을 향해 미끄러질 때 색상 변경 애니메이션 효과를 추가하려고합니다.
다음과 같이 코드 코드를 복사하십시오.
Window.onload = function () {
var r = Raphael ( "지도", 600, 500);
// 도면 맵 메소드를 호출합니다
페인트 맵 (R);
var textattr = {
"채우기": "#000",
"Font-Size": "12px",
"커서": "포인터"
};
(중국의 var State) {
중국 [State] [ 'Path'].
(기능 (st, state) {
// 현재 그래픽의 중앙 좌표를 가져옵니다
var xx = x + ().
var yy = y + ().
// 텍스트를 작성합니다
중국 [State] [ 'text'] = r.text (xx, yy, 중국 [State] [ 'name']);
st [0] .onmouseover = function () {// 마우스 슬립
St.animate ({fill : St.Color, 스트로크 : "#eee"}, 500);
중국 [State] [ 'text'];
R.Safari ();
};
st [0] .onmouseout = function () {// 마우스 휴가
st.animate ({fill : "#97d6f5", 스트로크 : "#eee"}, 500);
중국 [State] [ 'text'];
R.Safari ();
};
}) (중국어 [State] [ 'Path'], State);
}
}
위의 코드는 Raphael : GetColor, GetBbox, Animate, Tofront 등이 제공하는 방법을 사용합니다.이 기사는이 기사에 설명되어 있지 않습니다.
또한 맵의 크기로 인해 맵의 일부 지방 이름의 디스플레이 위치는 적절하지 않으며 오프셋을 수정해야하므로 편안하게 보입니다.
다음과 같이 코드 코드를 복사하십시오.
Window.onload = function () {
var r = Raphael ( "지도", 600, 500);
탄력 있는
(중국의 var State) {
탄력 있는
(기능 (st, state) {
... ...
스위치 (중국 [State] [ 'name']) {
"Jiangsu"사례 :
xx += 5;
yy- = 10;
부서지다;
"Hebei"사례 :
xx- = 10;
YY += 20;
부서지다;
사례 "Tianjin":
xx += 10;
YY += 10;
부서지다;
사례 "상하이":
xx += 10;
부서지다;
"광동"사례 :
yy- = 10;
부서지다;
사례 "마카오":
YY += 10;
부서지다;
사례 "홍콩":
xx += 20;
YY += 5;
부서지다;
사례 "Gansu":
xx- = 40;
YY- = 30;
부서지다;
사례 "Shaanxi":
xx += 5;
YY += 10;
부서지다;
사례 "내부 몽골":
xx- = 15;
YY += 65;
부서지다;
기본:
}
탄력 있는
}) (중국어 [State] [ 'Path'], State);
}
}