스크립트 질문이요.
본문
2번 소스에 웹키를 입력하고 테스트해보면 아무런 반응이 없던데요.
어디를 수정해 주어야 하나요??
1>
http://developers.daum.net/services/apis/local/geo/addr2coord
2>
<!--<script type="text/javascript" src="http://apis.daum.net/maps/maps2.js?apikey=웹키입력">-->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=웹키입력"></script>
<script>
<script type="text/javascript">
var obj = {
apikey: "웹키입력",
init : function()
{
obj.q = document.getElementById('q');
obj.b = document.getElementById('b');
obj.r = document.getElementById('r');
obj.b.onclick = obj.pingSearch;
},
// 검색을 요청하는 함수
pingSearch : function()
{
if (obj.q.value)
{
obj.s = document.createElement('script');
obj.s.type ='text/javascript';
obj.s.charset ='utf-8';
obj.s.src = 'https://apis.daum.net/local/geo/addr2coord?apikey=' + obj.apikey + '&output=json&callback=obj.pongSearch&q=' + encodeURI(obj.q.value);
document.getElementsByTagName('head')[0].appendChild(obj.s);
}
},
// 검색 결과를 뿌리는 함수
pongSearch : function(z)
{
obj.r.innerHTML = '';
if(!z.channel || z.channel.item.length <= 0)
{
obj.r.innerHTML = "검색 결과가 없습니다.";
return;
}
else
{
for (var i = 0; i < z.channel.item.length; i++)
{
var li = document.createElement('li');
var a = document.createElement('a');
a.href = "javascript:obj.addMark(" + z.channel.item[i].point_y + ", " + z.channel.item[i].point_x + ");";
a.innerHTML = obj.stripHTMLtag(obj.escapeHtml(z.channel.item[i].title));
li.appendChild(a);
obj.r.appendChild(li);
}
}
},
// HTML태그 안 먹게 하는 함수
escapeHtml : function(str)
{
str = str.replace(/&/g, "&");
str = str.replace(/</g, "<");
str = str.replace(/>/g, ">");
return str;
},
// HTML태그 삭제하는 함수
stripHTMLtag : function(string) {
var objStrip = new RegExp();
objStrip = /[<][^>]*[>]/gi;
return string.replace(objStrip, "");
},
// 특정 좌표에 마커 추가
addMark : function(lat, lng)
{
var point = new DLatLng(lat, lng);
var mark = new DMark(point);
map.addOverlay(mark);
map.setCenter(point, 2);
}
};
window.onload = function()
{
obj.init();
obj.pingSearch();
};
</script>
</head>
<body>
<div id="map" style="width:600px;height:500px;">
<script type="text/javascript" defer="true">
var map = new DMap("map", {point:new DLatLng(35.78879895934866, 127.93130020103005), level:11});
</script>
주소 검색(<span style="color:red">검색한 주소를 클릭하면 해당 위치로 갑니다.</span>)
<br/>
<input type="text" name="q" id="q" value="양재"/>
<button id="b">검색</button>
<div id="r"></div>
답변 2
님 님이 올려주신 소스가 언제적 버전의 API 인지는 정확하게 모르겠씁니다만
최신버전으로 다시 확인해보니
코드가 조금 다르네요
제가 테스트한 버전으로 보여드리면
http://gboard.deb.kr/test/map3.php
에서 확인가능하시구요
코드를 적어드립니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>키워드로 장소검색하기</title>
</head>
<body>
<div id="map" style="width:500;height:450px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은API키&libraries=services"></script>
<script>
// 마커를 클릭하면 장소명을 표출할 인포윈도우 입니다
var infowindow = new daum.maps.InfoWindow({zIndex:1});
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new daum.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 생성합니다
var map = new daum.maps.Map(mapContainer, mapOption);
// 장소 검색 객체를 생성합니다
var ps = new daum.maps.services.Places();
// 키워드 검색 완료 시 호출되는 콜백함수 입니다
function placesSearchCB (data, status, pagination) {
if (status === daum.maps.services.Status.OK) {
// 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
// LatLngBounds 객체에 좌표를 추가합니다
var bounds = new daum.maps.LatLngBounds();
for (var i=0; i<data.length; i++) {
displayMarker(data[i]);
bounds.extend(new daum.maps.LatLng(data[i].y, data[i].x));
}
// 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
map.setBounds(bounds);
}
}
// 지도에 마커를 표시하는 함수입니다
function displayMarker(place) {
// 마커를 생성하고 지도에 표시합니다
var marker = new daum.maps.Marker({
map: map,
position: new daum.maps.LatLng(place.y, place.x)
});
// 마커에 클릭이벤트를 등록합니다
daum.maps.event.addListener(marker, 'click', function() {
// 마커를 클릭하면 장소명이 인포윈도우에 표출됩니다
infowindow.setContent('<div style="padding:5px;font-size:12px;">' + place.place_name + '</div>');
infowindow.open(map, marker);
});
}
function searchmap(stitle) {
// 키워드로 장소를 검색합니다
ps.keywordSearch(stitle, placesSearchCB);
}
</script>
<div id="objs">
장소검색 : <input type="text" name="stitle" id="stitle" value="양재"><input type="button" name="sss" value=" 검색 "
onclick="searchmap(document.getElementById('stitle').value);">
</body>
</html>
예제 까지 만들어서 올려주셔서 감사드립니다.
혹시 한가지만 더 여쭈어도 될런지~~
http://apis.map.daum.net/web/sample/roadviewToggle/
http://apis.map.daum.net/web/sample/basicRoadview/
이와같은 경우 혹시 그누보드 디비에 저장된 주소를 가지고
<<<위도경도로 변환>>해서 로드뷰, 지도+로드뷰에 출력되게 하려면 어떻게 해주어야 하나요?
위에 질문하신영역의 소스에서
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=웹키입력"></script>
<script>
<script type="text/javascript">
var obj = {
apikey: "웹키입력",
의 한글로 '웹키입력' 부분에
daum.net 에서 발급받으신
API Key 값을 넣고 호출해보시면 확인가능하실겁니다.
혹시 플래토님 본문에 나온 소스에 웹키 넣으시면 지도출력이 되시나요?
저는 웹키를 넣어 보았는데 안되는것 같아서요.
무엇을 수정을 해야 할지??
