7월 23일 목요일 실습 #61
Comments
|
박주혜
이건 모르고 삭제했습니다..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>닫기가 가능한 커스텀 오버레이</title>
<style>
.wrap {
position: absolute;
left: 0;
bottom: 40px;
width: 288px;
height: 132px;
margin-left: -144px;
text-align: left;
overflow: hidden;
font-size: 12px;
font-family: 'Malgun Gothic', dotum, '돋움', sans-serif;
line-height: 1.5;
}
.wrap * {
padding: 0;
margin: 0;
}
.wrap .info {
width: 286px;
height: 120px;
border-radius: 5px;
border-bottom: 2px solid #ccc;
border-right: 1px solid #ccc;
overflow: hidden;
background: #fff;
}
.wrap .info:nth-child(1) {
border: 0;
box-shadow: 0px 1px 2px #888;
}
.info .title {
padding: 5px 0 0 10px;
height: 30px;
background: #eee;
border-bottom: 1px solid #ddd;
font-size: 18px;
font-weight: bold;
}
.info .close {
position: absolute;
top: 10px;
right: 10px;
color: #888;
width: 17px;
height: 17px;
background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/overlay_close.png');
}
.info .close:hover {
cursor: pointer;
}
.info .body {
position: relative;
overflow: hidden;
}
.info .desc {
position: relative;
margin: 13px 0 0 90px;
height: 75px;
}
.desc .ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.desc .jibun {
font-size: 11px;
color: #888;
margin-top: -2px;
}
.info .img {
position: absolute;
top: 6px;
left: 5px;
width: 73px;
height: 71px;
border: 1px solid #ddd;
color: #888;
overflow: hidden;
}
.info:after {
content: '';
position: absolute;
margin-left: -12px;
left: 50%;
bottom: 0;
width: 22px;
height: 12px;
background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png')
}
.info .link {
color: #5085BB;
}
</style>
</head>
<body>
<div id="map" style="width:100%;height:350px;"></div>
<script type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=943b53233b847e0d759abe6174898676"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도의 중심좌표
mapOption = {
center: new kakao.maps.LatLng(33.451475, 126.570528), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 지도에 마커를 표시합니다
var marker = new kakao.maps.Marker({
map: map,
position: new kakao.maps.LatLng(33.450701, 126.570667)
});
// 커스텀 오버레이에 표시할 컨텐츠 입니다
// 커스텀 오버레이는 아래와 같이 사용자가 자유롭게 컨텐츠를 구성하고 이벤트를 제어할 수 있기 때문에
// 별도의 이벤트 메소드를 제공하지 않습니다
var content = '<div class="wrap">' +
' <div class="info">' +
' <div class="title">' +
' 카카오 스페이스닷원' +
' <div class="close" onclick="closeOverlay()" title="닫기"></div>' +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' <img src="https://cfile181.uf.daum.net/image/250649365602043421936D" width="73" height="70">' +
' </div>' +
' <div class="desc">' +
' <div class="ellipsis">제주특별자치도 제주시 첨단로 242</div>' +
' <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' +
' <div><a href="https://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>';
// 마커 위에 커스텀오버레이를 표시합니다
// 마커를 중심으로 커스텀 오버레이를 표시하기위해 CSS를 이용해 위치를 설정했습니다
var overlay = new kakao.maps.CustomOverlay({
content: content,
map: map,
position: marker.getPosition()
});
overlay.setMap(null)
// 커스텀 오버레이를 닫기 위해 호출되는 함수입니다
function closeOverlay() {
overlay.setMap(null);
}
// 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
kakao.maps.event.addListener(marker, 'click', function () {
overlay.setMap(map);
});
</script>
</html> |
|
이상경
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>키워드로 장소검색하기</title>
</head>
<body>
<input type="text" placeholder="주소를 검색하세요"></input>
<button onclick="foo();">검색</button>
<div id="map" style="width:100%;height:350px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=fd61e0b03d1a80892450cfd4fcf1f5db&libraries=services"></script>
<script>
// 마커를 클릭하면 장소명을 표출할 인포윈도우 입니다
var infowindow = new kakao.maps.InfoWindow({zIndex:1});
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 장소 검색 객체를 생성합니다
var ps = new kakao.maps.services.Places();
// 키워드로 장소를 검색합니다
function foo(){
const place = document.querySelector('input').value;
ps.keywordSearch(place, placesSearchCB);
console.log(place);
}
// 키워드 검색 완료 시 호출되는 콜백함수 입니다
function placesSearchCB (data, status, pagination) {
if (status === kakao.maps.services.Status.OK) {
// 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
// LatLngBounds 객체에 좌표를 추가합니다
var bounds = new kakao.maps.LatLngBounds();
for (var i=0; i<data.length; i++) {
displayMarker(data[i]);
bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
}
// 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
map.setBounds(bounds);
}
}
// 지도에 마커를 표시하는 함수입니다
function displayMarker(place) {
// 마커를 생성하고 지도에 표시합니다
var marker = new kakao.maps.Marker({
map: map,
position: new kakao.maps.LatLng(place.y, place.x)
});
kakao.maps.event.addListener(marker, 'click', function() {
// 마커를 클릭하면 장소명이 인포윈도우에 표출됩니다
infowindow.setContent('<div style="padding:5px;font-size:12px;">' + place.place_name +'</br>' + place.road_address_name +'</br>'+ place.phone + '</div>');
infowindow.open(map, marker);
console.log(place);
});
}
</script>
</body>
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
이름과 실습 번호 그리고 코드를 입력해주세요
The text was updated successfully, but these errors were encountered: