두개의 예제 소스를 같이 쓰고 있습니다.
어디 부분이 틀려서 안되는 걸까요?
클릭한 위치에 마커 표시하기는 잘되는데
현재 위치찾기 기능이 안됩니다.
<div id="map" style="width:100%;height:900px;"></div>
</div>
</div>
<div class="bottom_box" style="clear:both;">
<input type="text" name="address" id="address" value="">
<input type="button" value="지도 확인" onclick="run();">
</div>
<input type="hidden" name="lat" id="lat" value="">
<input type="hidden" name="lng" id="lng" value="">
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?
appkey=apikey&libraries=services"></script>
<script>
var marker;
var infowindow;
var latlng;
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new daum.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
if (navigator.geolocation) {
// GeoLocation을 이용해서 접속 위치를 얻어옵니다
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude, // 위도
lon = position.coords.longitude; // 경도
var locPosition = new daum.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합
니다
message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
// 마커와 인포윈도우를 표시합니다
displayMarker(locPosition, message);
});
} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
var locPosition = new daum.maps.LatLng(33.450701, 126.570667),
message = 'geolocation을 사용할수 없어요..'
displayMarker(locPosition, message);
}
// 지도에 마커와 인포윈도우를 표시하는 함수입니다
function displayMarker(locPosition, message) {
// 마커를 생성합니다
marker = new daum.maps.Marker({
map: map,
position: locPosition
});
var iwContent = message, // 인포윈도우에 표시할 내용
iwRemoveable = true;
// 인포윈도우를 생성합니다
infowindow = new daum.maps.InfoWindow({
content : iwContent,
removable : iwRemoveable
});
// 인포윈도우를 마커위에 표시합니다
infowindow.open(map, marker);
// 지도 중심좌표를 접속위치로 변경합니다
map.setCenter(locPosition);
}
function run()
{
var address = document.getElementById('address').value;
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new daum.maps.services.Geocoder();
// 주소로 좌표를 검색합니다
geocoder.addressSearch(address, function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === daum.maps.services.Status.OK) {
var coords = new daum.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시합니다
marker = new daum.maps.Marker({
map: map,
position: coords
});
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords);
// 마커가 드래그 가능하도록 설정합니다
//marker.setDraggable(true);
}
});
}
// 지도를 클릭한 위치에 표출할 마커입니다
marker = new daum.maps.Marker({
// 지도 중심좌표에 마커를 생성합니다
position: map.getCenter()
});
// 지도에 마커를 표시합니다
marker.setMap(map);
// 지도에 클릭 이벤트를 등록합니다
// 지도를 클릭하면 마지막 파라미터로 넘어온 함수를 호출합니다
daum.maps.event.addListener(map, 'click', function(mouseEvent) {
if (infowindow) {
infowindow.close();
}
// 클릭한 위도, 경도 정보를 가져옵니다
latlng = mouseEvent.latLng;
// 마커 위치를 클릭한 위치로 옮깁니다
marker.setPosition(latlng);
var message = '클릭한 위치의 위도는 ' + latlng.getLat() + ' 이고, ';
message += '경도는 ' + latlng.getLng() + ' 입니다';
var resultDiv = document.getElementById('clickLatlng');
resultDiv.innerHTML = message;
// 인포윈도우로 장소에 대한 설명을 표시합니다
infowindow = new daum.maps.InfoWindow({
content: '<div style="width:150px;text-align:center;padding:6px 0;">
차량위치</div>'
});
infowindow.open(map, marker);
});
function car_position()
{
//document.getElementById('result').value
//document.getElementById('result2').value
//document.getElementById('address').value
document.getElementById('lat').value = latlng.getLat();
document.getElementById('lng').value = latlng.getLng();
window.location.href = "http://crimy2000.cafe24.com/hicar2/insert2.php?lat=" + latlng.getLat() + "&lng="
+ latlng.getLng();
}
</script>