javascript — динамические маркеры не работают с использованием новой переменной

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 не получил значения

здесь я получаю значения из ниже идентификаторов,

<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'] получает значение штрафа,

Я не знаю, какую ошибку я совершил?

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

Другие решения

Вы получаете объект. использование .innerHTML если вы хотите, чтобы это значение отображалось в PHP:

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

  1. вам нужно получить содержимое HTML-элементов div после рендеринга DOM (внутри вашей функции инициализации)
  2. document.getElementById возвращает элемент HTML, вам нужно текстовое содержимое (я использую nodeValue функция от geoxml3 чтобы получить это, но похожая функциональность доступна в JQuery и других библиотеках).

рабочая скрипка

фрагмент кода:

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>
2

Проверьте это:

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

Примечание: это приведет к широте и долготе. Тот, который вы использовали, будет производить объект, а не значение.

0
По вопросам рекламы [email protected]