HTML 5 "data-"태그를 사용하여 좌표 전달

Google지도에서 사용할 데이터 태그를 사용하여 HTML 5의 자바 스크립트에 좌표를 전달해야합니다. Javascript가 좋지 않아 어디서나 솔루션을 찾을 수 없습니다. 이 페이지의 소스를 볼 경우 루비 (ERB)와 HTML을, 좌표가 HTML에서 제대로 사용할 수 있습니다 :HTML 5 "data-"태그를 사용하여 좌표 전달

<div id="google_map_section" data-latitude="<%= @place.latitude %>" data-longtitude ="<%= @place.longtitude %>"></div>

그리고 자바 스크립트 :

$(function initialize() { 
    var latlng = new google.maps.LatLng(
     parseFloat($("#google_map_section").attr("data-latitude")), 
     parseFloat($("#google_map_section").attr("data-longtitude")) 
    ); 
    var myOptions = { 
     zoom: 12, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.SATELLITE 
    }; 
    var map = new google.maps.Map(document.getElementById("google_map_section"), 
    myOptions); 
    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map 
    }); 

});

질문 1 : 값이 존재하지 않습니다 자바 스크립트로 전달. 왜 안돼? 나는 사용해야한다 :

$("#google_map_section").data("latitude")? 
$("#google_map_section").attr("data-latitude")? 
$("#google_map_section").getAttribute("data-latitude")?

나는 그들을 운이 좋게 시도했다. 지도가 렌더링되는 것처럼 보이지만 이미지가 표시되지 않는 경우가 있습니다.

질문 2 : body 태그에 onload = "initialize()"를 사용해야합니까, 아니면 모든 태그에 사용할 수 있습니까?

출처

2011-10-11 raoul_dev

감사합니다! 나는 분명히 아주 가까이에, initialize() 트릭을 삭제 삭제되었습니다! –

Working example

당신은 그러나 당신의 초기화 방법은 익명의 방법 대신 명명 된 방법이어야 온로드 인라인 이벤트 핸들러를 사용할 필요가 없습니다.

은 교체 :

$(function initialize() {

로 : 당신의 모두

$(function() { // Shortcut for $(document).ready(function(){});

출처

2011-10-11 10:01:51

# 1의 경우 $("#google_map_section").attr('data-latitude')이 작동해야합니다.

# 2의 경우, 당신은 이런 식으로 그것을 수행해야합니다 문서가 준비되면 그 자바 스크립트를 실행

$(document).ready(function() { 
    var latlong // etc. 
});

(즉 페이지가 로딩을 완료하고 모든 DOM 객체가 렌더링 된 경우). 내 생각 엔 google_map_section 객체가 아직로드되지 않았으므로 # 1에 대한 응답이 작동하지 않는 이유입니다. 잘 작동합니다 ATTR를 사용

출처

2011-10-11 10:01:09 bricker

HTML 5 "data-"태그를 사용하여 좌표 전달

답변

관련 문제