네이버 지도 API 다중마커 구현 소스 입니다.
드디어 정리를 했네용...
대충 읽어보시면 이해가 갈것이라 생각합니다^^
테스트 사이트
http://www.moga.co.kr/motel/motel_map.html
참고사항
1. 지도창의 너비는 100%가 가능하지만 높이는 100%를 넣으면 에러가 남 px단위로 px를 제외하고 입력
2. 마커=>설명창 변수ID 전달 방법으로 title를 이용하기 때문에 title를 다른 방법으로 이용 할 수가 없습니다.
3. 설명창에서 보여질 변수가 많을경우 oMarkerParam 변수를 변경, 늘리셔서 사용하시면 됩니다.
* 3번항목은 테스트 사이트를 참고 하시기 바랍니다.^^
4. 꼭 앞에 jquery 해주세요.~
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=네이버API키값"></script>
<script type="text/javascript">
<!--
var oMarkerParam = new Array();
$(document).ready(function(){
var oCenterPoint = new nhn.api.map.LatLng(지도의 중심x좌표, 지도의 중심y좌표);
nhn.api.map.setDefaultPoint('LatLng');
oMap = new nhn.api.map.Map('naver_map', {
point : oCenterPoint,
zoom : 10, // - 초기 줌 레벨은 10으로 둔다.
enableWheelZoom : false,
enableDragPan : true,
enableDblClickZoom : false,
mapMode : 0,
activateTrafficMap : false,
activateBicycleMap : false,
minMaxLevel : [ 1, 14 ],
size : new nhn.api.map.Size(지도창 너비, 지도창 높이)
});
var markerCount = 0;
// 컨트롤 설정
var mapZoom = new nhn.api.map.ZoomControl();
mapZoom.setPosition({left:10, top:10}); // - 줌 컨트롤 위치 지정.
oMap.addControl(mapZoom);
//마커 이미지, 사이즈 설정
var oSize = new nhn.api.map.Size(31, 38); //마커사이즈대로 설정
var oOffset = new nhn.api.map.Size(31, 38);
var oIconOn = new nhn.api.map.Icon('마커아이콘 이미지', oSize, oOffset);
// 마커의 기본 표시 설정
var infoWindow = new nhn.api.map.InfoWindow(); // - info window 생성
var oLabel = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.
oMap.addOverlay(oLabel); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
oMap.addOverlay(infoWindow); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
//마커 추가
<?
//마커 쿼리 반복문 위치
$i = 0;
while($list = mysql_fetch_array($result)){
?>
var oPoint = new nhn.api.map.LatLng(x좌표,y좌표);
var oMarker = new nhn.api.map.Marker(oIconOn, {
title : '<?=$i?>',
zIndex : 1
});
//변수전달 방법, 배열사용
oMarkerParam[<?=$i?>] = '';
oMarker.setPoint(oPoint);
oMap.addOverlay(oMarker);
//첫 마커의 설명창만 보이게 설정
<? if($i==0){ ?>
oMap.setCenter(oMarker.getPoint());
infoWindow.setContent('설명창 내용, 변수='+oMarkerParam[<?=$i?>]);
infoWindow.setPoint(oMarker.getPoint());
infoWindow.setVisible(true);
infoWindow.setPosition({right : 5, top : 20});
infoWindow.autoPosition();
<? } ?>
<?
$i++;
}
?>
oMap.attach('click', function(oCustomEvent) {
var oTarget = oCustomEvent.target;
var oMarkerId = oCustomEvent.target.getTitle();
// 마커 클릭하면
if (oTarget instanceof nhn.api.map.Marker) {
//oTarget.setIcon(oIconOn);
oMap.setCenter(oMarker.getPoint());
infoWindow.setContent('설명창 내용, 변수='+oMarkerParam[oMarkerId]);
infoWindow.setPoint(oMarker.getPoint());
infoWindow.setVisible(true);
infoWindow.setPosition({right : 5, top : 20});
infoWindow.autoPosition();
return;
}
});
});
//-->
</script>
<div id="naver_map"></div>
댓글 9개
소스가 몇군데 틀렸네요. 제가 실제 적용한 것은 마커의 종류가 2가지로 나누어 있어서
그 부분을 제외하고 정리해서 올린다는게 오타를 냈네용 ㅠㅠ 죄송합니다.
지금 쪽지로 보내드렸습니다.^^ 오타부분은
1. var oMarker = new nhn.api.map.Marker(oIconNo, {
=> var oMarker = new nhn.api.map.Marker(oIconOn, {
2. }
return;
}
=> return;
}
이 두가지를 수정하시면 됩니다 위의 소스는 다시 수정해놓았습니다.
수정된 소스는 쪽지로 보내드렸습니다.^^
님 좀 힘드시더라도 제가 최종 소스를 한번 더올릴테니 뭐가 잘못 됐는지 함만 더 봐주세요.. 부탁합니다.
<?
// 테이블이름을 파라미터로 받는다.
$pro_table = ( isset($HTTP_GET_VARS['table']) ? $HTTP_GET_VARS['table'] : 'map_busan' );
$pro_guru = ( isset($HTTP_GET_VARS['guru']) ? $HTTP_GET_VARS['guru'] : '2' );
// 필요한 함수가 정의된 config.php를 include시킨다.
include "config.php";
// Mysql Server에 접속한다. euckr 이 카페 홈페이지에서 한글깨지는걸 방지
$conn = mysql_connect( $set_host, $set_user, $set_password );
mysql_query("SET NAMES euckr");
mysql_select_db( $set_dbname );
switch($pro_guru){
case "1" :
$wdo = 35.5011338;
$kdo = 129.2965812;
$zoom = 6;
$condition = "where nsc='울산'";
$condition = "where gubun = '모국' and nsc='울산'";
$condition1 = "where gubun = '자국' and nsc='울산'";
break;
case "2" :
$wdo = 35.5011338;
$kdo = 129.2965812;
$zoom = 6;
$condition = "where gubun = '모국' and nsc='울산'";
break;
case "3" :
$wdo = 35.556019;
$kdo = 129.3489941;
$zoom = 7;
$condition = "where gubun = '모국' and nsc='울산'";
$condition1 = "where gubun = '자국' and moguk = '울산'";
break;
case "4" :
$wdo = 35.556019;
$kdo = 129.3489941;
$zoom = 7;
$condition = "where gubun = '모국' and nsc='울산'";
$condition1 = "where gubun = '자국' and moguk like '%울산성남%'";
break;
case "5" :
$wdo = 35.5011338;
$kdo = 129.2965812;
$zoom = 7;
$condition = "where gubun = '모국' and nsc='울산'";
$condition1 = "where gubun = '자국' and moguk like '%서울산%'";
break;
case "6" :
$wdo = 35.5011338;
$kdo = 129.2965812;
$zoom = 7;
$condition = "where gubun = '모국' and nsc='울산'";
$condition1 = "where gubun = '자국' and moguk like '%남울산%'";
break;
case "7" :
$wdo = 35.5075727;
$kdo = 129.3288307;
$zoom = 7;
$condition = "where gubun = '모국' and nsc='울산'";
$condition1 = "where gubun = '자국' and moguk like '%동울산%'";
break;
case "8" :
$wdo = 35.5011338;
$kdo = 129.2965812;
$zoom = 7;
$condition = "where gubun = '모국' and nsc='울산'";
$condition1 = "where gubun = '자국' and moguk like '%양정%'";
break;
case "9" :
$wdo = 35.6052646;
$kdo = 129.1773898;
$zoom = 7;
$condition = "where gubun = '모국' and nsc='울산'";
$condition1 = "where gubun = '자국' and moguk like '%언양%'";
break;
case "10" :
$wdo = 35.4247293;
$kdo = 129.3128576;
$zoom = 7;
$condition = "where gubun = '모국' and nsc='울산'";
$condition1 = "where gubun = '자국' and moguk like '%온산%'";
break;
}
// 모국검색
$pro_id = ( isset($HTTP_GET_VARS['id']) ? $HTTP_GET_VARS['id'] : 0 );
// Search한 내용이 있는지 체크하여 쿼리에 반영한다.
$query = "select * from $pro_table $condition" ;
$result = mysql_query ( $query );
?>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=6232785d73f29469df8dbbdb10b6799a"></script>
<script type="text/javascript">
var oMarkerParam = new Array();
$(document).ready(function(){
var oCenterPoint = new nhn.api.map.LatLng(<?=$wdo?>,<?=$kdo?>);
nhn.api.map.setDefaultPoint('LatLng');
oMap = new nhn.api.map.Map('naver_map', {
point : oCenterPoint,
zoom : 10, // - 초기 줌 레벨은 10으로 둔다.
enableWheelZoom : false,
enableDragPan : true,
enableDblClickZoom : false,
mapMode : 0,
activateTrafficMap : false,
activateBicycleMap : false,
minMaxLevel : [ 1, 14 ],
size : new nhn.api.map.Size(700, 350)
});
var markerCount = 0;
// 컨트롤 설정
var mapZoom = new nhn.api.map.ZoomControl();
mapZoom.setPosition({left:10, top:10}); // - 줌 컨트롤 위치 지정.
oMap.addControl(mapZoom);
//마커 이미지, 사이즈 설정
var oSize = new nhn.api.map.Size(31, 38); //마커사이즈대로 설정
var oOffset = new nhn.api.map.Size(31, 38);
var oIconOn = new nhn.api.map.Icon('../00image/aa1.png', oSize, oOffset);
// 마커의 기본 표시 설정
var infoWindow = new nhn.api.map.InfoWindow(); // - info window 생성
var oLabel = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.
oMap.addOverlay(oLabel); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
oMap.addOverlay(infoWindow); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
//마커 추가
<?
//마커 쿼리 반복문 위치
$m = 0;
while($list = mysql_fetch_array($result)){
?>
var oPoint = new nhn.api.map.LatLng(<?=$list[we]?>,<?=$list[kng]?>);
var oMarker = new nhn.api.map.Marker(oIconOn, {
title : '<?=$m?>',
zIndex : 1
});
//변수전달 방법, 배열사용
oMarkerParam[<?=$m?>] = '변수값'+<?=$m?>;
oMarker.setPoint(oPoint);
oMap.addOverlay(oMarker);
//첫 마커의 설명창만 보이게 설정
<? if($m==0){ ?>
oMap.setCenter(oMarker.getPoint());
infoWindow.setContent('설명창 내용, 변수='+oMarkerParam[<?=$m?>]);
infoWindow.setPoint(oMarker.getPoint());
infoWindow.setVisible(true);
infoWindow.setPosition({right : 5, top : 20});
infoWindow.autoPosition();
<? } ?>
<?
$m++;
}
?>
oMap.attach('click', function(oCustomEvent) {
var oTarget = oCustomEvent.target;
var oMarkerId = oCustomEvent.target.getTitle();
// 마커 클릭하면
if (oTarget instanceof nhn.api.map.Marker) {
//oTarget.setIcon(oIconOn);
oMap.setCenter(oMarker.getPoint());
infoWindow.setContent('설명창 내용, 변수='+oMarkerParam[oMarkerId]);
infoWindow.setPoint(oTarget.getPoint());
infoWindow.setVisible(true);
infoWindow.setPosition({right : 5, top : 20});
infoWindow.autoPosition();
return;
}
});
});
</script>
<div id="naver_map"></div>
제pc에서 기존에 마커 출력 되는 소스와 윗부분이 좀 다르네요..
이것을 추가해달라는 말입니다.^^
(익스플로러 오류 표시 기능으로 보면 오류팝업)
--
웹 페이지 오류 세부 정보
메시지: 개체가 'getTitle' 속성이나 메서드를 지원하지 않습니다.
줄: 3
문자: 132021
코드: 0
URI: http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=63dd915c2f912c67b98ad379e971dce3
--
http://kiplayer.phps.kr/bbs/board.php?bo_table=comm_deve&wr_id=22
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 6430 | 12년 전 | 979 | ||
| 6429 | 12년 전 | 9102 | ||
| 6428 | 12년 전 | 602 | ||
| 6427 |
제이티37
|
12년 전 | 1569 | |
| 6426 |
프로프리랜서
|
12년 전 | 1154 | |
| 6425 |
프로프리랜서
|
12년 전 | 1608 | |
| 6424 |
프로프리랜서
|
12년 전 | 1812 | |
| 6423 | 12년 전 | 1000 | ||
| 6422 |
퍼블리셔지노군
|
12년 전 | 1573 | |
| 6421 | 12년 전 | 2207 | ||
| 6420 |
|
12년 전 | 1334 | |
| 6419 |
|
12년 전 | 1287 | |
| 6418 | 12년 전 | 1182 | ||
| 6417 |
senseme
|
12년 전 | 7420 | |
| 6416 |
senseme
|
12년 전 | 1330 | |
| 6415 |
senseme
|
12년 전 | 1191 | |
| 6414 |
senseme
|
12년 전 | 1968 | |
| 6413 |
senseme
|
12년 전 | 973 | |
| 6412 |
senseme
|
12년 전 | 1491 | |
| 6411 |
senseme
|
12년 전 | 1100 | |
| 6410 |
senseme
|
12년 전 | 1046 | |
| 6409 |
PASKRAN
|
12년 전 | 2818 | |
| 6408 | 12년 전 | 10798 | ||
| 6407 | 12년 전 | 2990 | ||
| 6406 |
프로프리랜서
|
12년 전 | 2833 | |
| 6405 |
프로프리랜서
|
12년 전 | 1371 | |
| 6404 |
프로프리랜서
|
12년 전 | 2724 | |
| 6403 |
프로프리랜서
|
12년 전 | 818 | |
| 6402 |
프로프리랜서
|
12년 전 | 1731 | |
| 6401 |
프로프리랜서
|
12년 전 | 1139 | |
| 6400 |
프로프리랜서
|
12년 전 | 1464 | |
| 6399 |
프로프리랜서
|
12년 전 | 1179 | |
| 6398 |
프로프리랜서
|
12년 전 | 1488 | |
| 6397 |
프로프리랜서
|
12년 전 | 3603 | |
| 6396 | 12년 전 | 1870 | ||
| 6395 | 12년 전 | 920 | ||
| 6394 |
|
12년 전 | 5240 | |
| 6393 |
제이티37
|
12년 전 | 1202 | |
| 6392 |
songsinica
|
12년 전 | 1205 | |
| 6391 |
|
12년 전 | 3386 | |
| 6390 |
|
12년 전 | 1625 | |
| 6389 | 12년 전 | 4858 | ||
| 6388 |
스누피사랑
|
12년 전 | 5431 | |
| 6387 | 12년 전 | 1838 | ||
| 6386 | 12년 전 | 3059 | ||
| 6385 |
희망과열정
|
12년 전 | 926 | |
| 6384 | 12년 전 | 3292 | ||
| 6383 | 12년 전 | 10600 | ||
| 6382 |
|
12년 전 | 5790 | |
| 6381 |
SugarSkull
|
12년 전 | 1031 | |
| 6380 | 12년 전 | 777 | ||
| 6379 |
|
12년 전 | 1984 | |
| 6378 | 12년 전 | 1562 | ||
| 6377 | 12년 전 | 497 | ||
| 6376 |
후라보노보노
|
12년 전 | 1332 | |
| 6375 | 12년 전 | 2867 | ||
| 6374 | 12년 전 | 834 | ||
| 6373 | 12년 전 | 2367 | ||
| 6372 |
takumi22
|
12년 전 | 1241 | |
| 6371 |
개초보제이
|
12년 전 | 773 | |
| 6370 |
고급자가되고
|
12년 전 | 1461 | |
| 6369 | 12년 전 | 883 | ||
| 6368 | 12년 전 | 3181 | ||
| 6367 | 12년 전 | 1880 | ||
| 6366 | 12년 전 | 2878 | ||
| 6365 |
lilyosia
|
12년 전 | 1796 | |
| 6364 | 12년 전 | 1057 | ||
| 6363 | 12년 전 | 1588 | ||
| 6362 | 12년 전 | 2734 | ||
| 6361 | 12년 전 | 2559 | ||
| 6360 | 12년 전 | 1007 | ||
| 6359 | 12년 전 | 2104 | ||
| 6358 |
|
12년 전 | 1787 | |
| 6357 |
에헤라디야자진방아를돌려라
|
12년 전 | 778 | |
| 6356 | 12년 전 | 2086 | ||
| 6355 | 12년 전 | 3787 | ||
| 6354 | 12년 전 | 3102 | ||
| 6353 | 12년 전 | 1546 | ||
| 6352 | 12년 전 | 7769 | ||
| 6351 | 12년 전 | 2539 | ||
| 6350 | 12년 전 | 2798 | ||
| 6349 | 12년 전 | 1880 | ||
| 6348 | 12년 전 | 3546 | ||
| 6347 | 12년 전 | 1447 | ||
| 6346 | 12년 전 | 1185 | ||
| 6345 | 12년 전 | 1835 | ||
| 6344 | 12년 전 | 1413 | ||
| 6343 |
프로프리랜서
|
12년 전 | 2059 | |
| 6342 |
프로프리랜서
|
12년 전 | 1383 | |
| 6341 |
프로프리랜서
|
12년 전 | 1812 | |
| 6340 |
프로프리랜서
|
12년 전 | 1899 | |
| 6339 |
프로프리랜서
|
12년 전 | 1340 | |
| 6338 |
프로프리랜서
|
12년 전 | 1597 | |
| 6337 | 12년 전 | 5267 | ||
| 6336 |
프로프리랜서
|
12년 전 | 1629 | |
| 6335 |
프로프리랜서
|
12년 전 | 951 | |
| 6334 |
프로프리랜서
|
12년 전 | 1328 | |
| 6333 |
프로프리랜서
|
12년 전 | 2441 | |
| 6332 | 12년 전 | 1102 | ||
| 6331 |
돗단배123
|
12년 전 | 1421 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기