javascript - 谷歌地图 API 无法使用变量

Question

在javascript中，我相信它在使用时将变量作为字符串传递:

document.getElementById("lblLatitude")

当你对坐标进行硬编码时，它工作得很好。当使用变量时，它只会带回一个灰色框，而不会加载谷歌地图。这些变量不起作用有什么原因吗？

    <script type="text/javascript">

    function initMap() {

        // Declare
        var Latitude = document.getElementById("lblLatitude");
        var Longitude = document.getElementById("lblLongitude");

        // Map options
        var options = {
            zoom: 8,
            center: { lat: Latitude, lng: Longitude }
        }

        // New map
        var map = new google.maps.Map(document.getElementById('map'), options);
    }

Answer 1

由于您使用的是 HTML label 控件，因此可以通过在 DOM 元素上调用 textContent 来解决此问题，例如:

var Latitude = document.getElementById("<%=lblLatitude.ClientID%>").textContent || 0;
var Longitude = document.getElementById("<%=lblLongitude.ClientID%>").textContent || 0;

或者，

var Latitude = document.querySelector("[id$='lblLatitude']").textContent || 0;
var Longitude = document.querySelector("[id$='lblLongitude']").textContent || 0;

然后像这样使用它:

// Map options
var options = {
    zoom: 8,
    center: { lat: +Latitude, lng: +Longitude }
}

现在，您正在将 dom 节点传递给 lat 和 lng，但它们需要一个数字。

使用标签的演示:

var Latitude = document.getElementById("lblLatitude").textContent || 0;
var Longitude = document.getElementById("lblLongitude").textContent || 0;
console.log( Latitude, Longitude )

<label id="lblLatitude">-34.397</label><br>
<label id="lblLongitude">150.644</label>