动态标记无法使用新变量

Question

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']中得到的值很好，

我不知道我做错了什么？

Answer 1

检查这个：

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

注意：这将导致纬度和经度。您使用的那个将生成对象而不是值。

Answer 2

你拿到对象了。如果您想要 PHP:

回显的值，请使用 .innerHTML

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

Answer 3

您需要在呈现 DOM 之后获取 HTML div 元素的内容（在您的初始化函数内）
document.getElementById returns 一个 HTML 元素，你需要文本内容（我使用 geoxml3 中的 nodeValue 函数来获取它，但类似JQuery 和其他库中提供了功能。

working fiddle

代码片段：

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>

Answer 4

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);

动态标记无法使用新变量

Dynamic markers not working using new variable

javascript

php

google-maps

dynamic

google-maps-markers