动态标记无法使用新变量答案

【问题标题】：Dynamic markers not working using new variable动态标记无法使用新变量
【发布时间】：2015-03-11 01:44:32
【问题描述】：

var latitude = document.getElementById("latitude");
var longitude = document.getElementById("longitude");

var myCenter = new google.maps.LatLng(latitude, longitude);
var marker;

function initialize()
{
    var mapProp = {
        center: myCenter,
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

    marker = new google.maps.Marker({
        position: myCenter,
        animation: google.maps.Animation.BOUNCE
    });

    marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

var latitude 没有得到值

这里我从下面的 ids 中获取值，

<div class="map" id="googleMap" style="width:100%;height:260px;overflow:hidden;"></div>
<div id="latitude"><?php echo $itemData['130']; ?></div>
<div id="longitude"><?php echo $itemData['131']; ?></div>

在$itemData['130'] 和$itemData['130'] 中得到正确的值，

不知道自己做错了什么？

【问题讨论】：

这个脚本是放在头部还是放在正文中？当它放在头部时，将代码的前 3 行移动到初始化的开头。并删除最后一行。
然后进行建议的修改，目前这两个元素在您尝试访问它们时都是未知的。

标签： javascript php google-maps dynamic google-maps-markers

【解决方案1】：

This code will work try this

function initialize() {
var latitude = document.getElementById("latitude").innerHTML;
var longitude = document.getElementById("longitude").innerHTML;
var myCenter = new google.maps.LatLng(latitude, longitude);
var marker;
var mapProp = {
center: myCenter,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
marker = new google.maps.Marker({
position: myCenter,
animation: google.maps.Animation.BOUNCE
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

【讨论】：

【解决方案2】：

你得到的对象。如果您希望 PHP 回显该值，请使用 .innerHTML：

var latitude = document.getElementById("latitude").innerHTML;

【讨论】：

【解决方案3】：

您需要在 DOM 被渲染后获取 HTML div 元素的内容（在您的初始化函数中）
document.getElementById 返回一个 HTML 元素，您需要文本内容（我使用来自 geoxml3 的 nodeValue 函数来获取它，但类似的功能在 JQuery 和其他库中可用）。

working fiddle

代码sn-p：

var marker;

function initialize()
{
var latitude = nodeValue(document.getElementById("latitude"));
var longitude = nodeValue(document.getElementById("longitude"));

var myCenter = new google.maps.LatLng(latitude, longitude);
    var mapProp = {
        center: myCenter,
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

    marker = new google.maps.Marker({
        position: myCenter,
        animation: google.maps.Animation.BOUNCE
    });

    marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
//nodeValue: Extract the text value of a DOM node, with leading and trailing whitespace trimmed
var nodeValue = function(node, defVal) {
  var retStr="";
  if (!node) {
    return (typeof defVal === 'undefined' || defVal === null) ? '' : defVal;
  }
   if(node.nodeType==3||node.nodeType==4||node.nodeType==2){
      retStr+=node.nodeValue;
   }else if(node.nodeType==1||node.nodeType==9||node.nodeType==11){
      for(var i=0;i<node.childNodes.length;++i){
         retStr+=arguments.callee(node.childNodes[i]);
      }
   }
   return retStr;
};

html, body, #googleMap {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googleMap" style="border: 2px solid #3872ac;"></div>
<div id="latitude">45</div>
<div id="longitude">-85</div>

【讨论】：

【解决方案4】：

检查这个：

var latitude = document.getElementById("latitude").innerHTML;
var longitude = document.getElementById("longitude").innerHTML;

注意：这个会产生纬度和经度。您使用的将产生对象而不是值。

【讨论】：

对不起，我需要从两个 id 中获取值
是的，上面的会输出两个ID的值。但是您使用的将输出对象，而不是值。
如何获取值
这是获取纬度值document.getElementById("latitude").innerHTML 的代码并检查上面的代码以获取经度。