Question

我需要使用数据标记将坐标传递给HTML 5中的javascript，以便在Google地图中使用。我不是很擅长Javascript，我无法在任何地方找到解决方案。这是带有ruby（erb）的html，如果查看页面源，坐标在HTML中是正确可用的：

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

和javascript：

$(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：值未传递给javascript。为什么不？我应该使用：

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

我尝试了所有这些都没有运气。有时地图似乎渲染但没有显示图像。

问题2：我是否必须在body标签上使用onload =“initialize（）”，还是可以在任何标签上使用？

Answer 1

对于＃1，$("#google_map_section").attr('data-latitude')应该有效。

对于＃2，你应该这样做：

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

当文档准备就绪时（即页面加载完毕并且所有DOM对象都已渲染时）将运行该javascript。我的猜测是，这就是为什么＃1的答案无效，因为尚未加载google_map_section对象。

Answer 2

使用attr应该可以正常工作：

Working example

您不需要使用onload内联事件处理程序，但是您的初始化方法应该是匿名方法而不是命名方法。

替换：

$(function initialize() {

使用：

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

使用HTML 5“data-”标记传递坐标

2 个答案: