네이버 지도 api를 사용중인데 문제가 있습니다.
안녕하세요.
웹뷰로 앱을 만들고 수정 중입니다.
여기에 네이버 지도 api를 넣었습니다.
마커는 db에서 배열로 만들어서 가져오고요.
이게 필요한 내용을 보여주는건 문제가 없는데
사용자가 지도를 보고 터치를 하면 그 자리에 마커가 생깁니다.
그리고 다른 곳을 또 터치하면 마커가 하나더 생기고 두 마커사이에 줄이 생깁니다.
이렇게 사용자가 터치해서 생긴 마커가 db에 저장 되지는 않지만
아예 터치할 수 없도록 만들고 싶습니다.
웹뷰에서 부분적으로 터치 안되게 하거나.
지도에서 보여주는 것 외에 사용자 터치를 막을 방법이 있을까요?
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<title>분포위치 지도보기</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#imgPrevPage").click(function() {
location.href = "plantlist.do";
});
});
</script>
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=------"></script>
</head>
<body>
<form name="form1" action="plantlist.do" method="post">
<input type="hidden" name="proc_gubun" value="USER"></input>
<div id="wrap">
<!--header-->
<div id="header">
<div id="previous">
<input type="image" src="images/arrow_back.png" value="" width="26px" height="26px" id="imgPrevPage">
</div>
<p class="header_title">분포 위치</p>
</div>
<!--content-->
<div id="content">
<div id="map" style="border:1px solid #000;"></div>
${script}
var m = new Array();
<c:set var="i" value="0" />
<c:forEach items="${plantimage}" var="plantimage">
m[${i}] = new nhn.api.map.LatLng(${plantimage.latitude},${plantimage.longitude});
<c:set var="i" value="${i+1}" />
</c:forEach>
<c:remove var="i"/>
var defaultLevel = 8;
var oMap = new nhn.api.map.Map(document.getElementById('map'), {
point : m[0],
zoom : defaultLevel,
boundary : m,
enableWheelZoom : true,
enableDragPan : true,
enableDblClickZoom : false,
mapMode : 0,
activateTrafficMap : false,
activateBicycleMap : false,
minMaxLevel : [ 1, 14 ],
size : new nhn.api.map.Size(document.body.clientWidth,document.body.clientHeight) });
var oSlider = new nhn.api.map.ZoomControl();
oMap.addControl(oSlider);
oSlider.setPosition({
top : 10,
left : 10
});
var oMapTypeBtn = new nhn.api.map.MapTypeBtn();
oMap.addControl(oMapTypeBtn);
oMapTypeBtn.setPosition({
bottom : 10,
right : 80
});
var oThemeMapBtn = new nhn.api.map.ThemeMapBtn();
oThemeMapBtn.setPosition({
bottom : 10,
right : 10
});
oMap.addControl(oThemeMapBtn);
var oBicycleGuide = new nhn.api.map.BicycleGuide(); // - 자전거 범례 선언
oBicycleGuide.setPosition({
top : 10,
right : 10
}); // - 자전거 범례 위치 지정
//oMap.addControl(oBicycleGuide);// - 자전거 범례를 지도에 추가.
var oTrafficGuide = new nhn.api.map.TrafficGuide(); // - 교통 범례 선언
oTrafficGuide.setPosition({
bottom : 30,
left : 10
}); // - 교통 범례 위치 지정.
//oMap.addControl(oTrafficGuide); // - 교통 범례를 지도에 추가.
var trafficButton = new nhn.api.map.TrafficMapBtn(); // - 실시간 교통지도 버튼 선언
trafficButton.setPosition({
bottom:10,
right:150
}); // - 실시간 교통지도 버튼 위치 지정
//oMap.addControl(trafficButton);
var oSize = new nhn.api.map.Size(28, 37);
var oOffset = new nhn.api.map.Size(14, 37);
var oIcon = new nhn.api.map.Icon('images/pin_spot2.png', oSize, oOffset);
var oIcon2 = new nhn.api.map.Icon('images/pin_spot2.png', oSize, oOffset);
var oIcon3 = new nhn.api.map.Icon('images/pin_spot2.png', oSize, oOffset);
var oInfoWnd = new nhn.api.map.InfoWindow();
oInfoWnd.setVisible(false);
oMap.addOverlay(oInfoWnd);
oInfoWnd.setPosition({
top : 20,
left :20
});
<c:set var="i" value="0" />
<c:forEach items="${plantimage}" var="plantimage">
var oIcon = new nhn.api.map.Icon('images/pin_spot2.png', oSize, oOffset);
var oPoint = m[${i}];
var oMarker = new nhn.api.map.Marker(oIcon, { title : ${i} });
oMarker.setPoint(oPoint);
oMap.addOverlay(oMarker);
<c:set var="i" value="${i+1}" />
</c:forEach>
<c:remove var="i"/>
</script>
</div>
</div>
</form>
</body>
</html>