将 jquery 元素引用传递给 vanilla javascript

Question

我正在尝试用 javascript 做一些非常简单的事情，但无法完全理解它。我不确定应该以什么格式传递 var 地址。

$(function() {
    $('.latlng').each(function(){
        var address = $(this).html();
        getMap(address);
    });
});

function getMap(address) {
    var map = new google.maps.Map(mapDiv, {
        center: new google.maps.LatLng(address),
        ...
    });
}

当我将 JQuery 引用传递给普通 javascript 时，出现错误：TypeError: 'undefined' is not an object (evaluating 'a.position=b')。任何帮助表示赞赏。

Answer 1

如果我正确地阅读了此内容并且您正确地发布了此代码，则您将传递一个持续到 getMap() 的不存在的对象，而您想要传递地址对象。如果你纠正这个问题会发生什么？

jQuery 实例与所有其他实例一样只是普通的 javascript 对象，因此应该不会有问题。

Answer 2

您将变量 latLng 传递给 getMap，但其值尚未设置。顶部的 ready 函数应如下所示：

$(function() {
    $('.latlng').each(function(){
        var address = $(this).html();
        getMap(this);
    });
});

或者，如果您尝试传递您设置的 address 变量，请使您的 ready 函数如下所示：

$(function() {
    $('.latlng').each(function(){
        var address = $(this).html();
        getMap(address);
    });
});

Answer 3

您的问题与 jquery 或 javascript 无关。
您向 LatLng 方法传递了错误的数据。

您需要向 LatLng 方法传入两个参数：
...

var mapDiv = $('#mapDiv')[0], // also make sure the div is a regular dom node
    lat = 7.1011123,
    lng = 4.6667566;

function getMap(address) {
    var map = new google.maps.Map(mapDiv, {
        center: new google.maps.LatLng( lat, lng ), // you must pass in two parameters
        ...
    });
}

如果您尝试从文本 div 获取 LatLng 坐标，那么您需要将字符串转换为浮点数。

假设您使用以下 html：

<ul>
    <li class="latlng">7.4142335,3.1296874</li>
    <li class="latlng">8.4135039,-5.1256828</li>
    <li class="latlng">-14.4101158,-5.2810335</li>
</ul>

那么这将是为每个 .latlng 列表项运行 getMap() 的函数：

$('.latlng').each(function( i ){
    var address = $(this).text();
    address = address.split(','); // convert your text into an array

    // send in your lat and lng strings parsed as floats
    getMap(
        parseFloat( address[0] ),
        parseFloat( address[1] )
    );
});