Javascript 在html类中获取属性

我使用谷歌地图和两个坐标属性（long和lat）。我还有一个html类，如下所示：

  </html:div>
          <html:div class="geoCard">
                    <xf:input ref="{{fieldname}}/longitude" appearance="{{properties/appearance}}"  class="geolocation_long">
                          <xf:label>{{properties/label}}</xf:label>
                      </xf:input>  
                    <xf:input ref="{{fieldname}}/latitude" appearance="{{properties/appearance}}"  class="geolocation_lat">
                          <xf:label>{{properties/label}}</xf:label>
                      </xf:input>  
          </html:div>

var map;

if (typeof initMap == 'function') {
    initMap();
}

function initMap() {

    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: { lat: 52.001321, lng: 4.374577 }
        //mapTypeControl: false
    });

    var geocoder = new google.maps.Geocoder();

    document.getElementById('submit').addEventListener('click', function () {
        geocodeAddress(geocoder, map);
    });
}//end function initMap

function toggleBounce() {
    if (marker.getAnimation() !== null) {
        marker.setAnimation(null);
    } else {
        marker.setAnimation(google.maps.Animation.BOUNCE);
    }
}

var marker;
var infowindow;
function geocodeAddress(geocoder, resultsMap) {
    if (typeof infowindow != 'undefined') {
        infowindow.close();
    }

    if (typeof marker != 'undefined') {
        marker.setMap(null);
    }

    var address = document.getElementById('address').value;
    geocoder.geocode({ 'address': address }, function (results, status) {

        if (status === google.maps.GeocoderStatus.OK) {
            resultsMap.setCenter(results[0].geometry.location);
            marker = new google.maps.Marker({
                map: resultsMap,
                draggable: true,
                animation: google.maps.Animation.DROP,
                position: results[0].geometry.location,
                title: "Drag me!"
            });

            document.getElementById(marker.getPosition().lat().toFixed(6)).className += "geolocation_long";
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }

        infowindow = new google.maps.InfoWindow({
            content: '<p>Marker Location:'
                    + 'lat: ' + marker.getPosition().lat().toFixed(6)
                    + ', '
                    + 'lng: ' + marker.getPosition().lng().toFixed(6)
                    + '</p>'            


        });

        google.maps.event.addListener(marker, 'dragend', function (event) {
            if (typeof infowindow != 'undefined') {
                infowindow.close();
            }
            infowindow = new google.maps.InfoWindow({
                content: '<p>Marker Location:'
                    + 'lat: ' + event.latLng.lat().toFixed(6)
                    + ', '
                    + 'lng: ' + event.latLng.lng().toFixed(6)
                    + '</p>'
            });

            infowindow.open(map, marker);


        });

        infowindow.open(map, marker);




        google.maps.event.addListener(marker, 'click', function (event) {
            if (typeof infowindow != 'undefined') {
                infowindow.open(map, marker);
            }
        });
    });
}

 document.getElementById(marker.getPosition().lat().toFixed(6)).className += "geolocation_long";

<input name="form_inp16" title="" class="xforms-input xforms-control geolocation_long xforms-ap-default" id="form_inp16" type="text" value="">

但是我得到了一个错误：

SCRIPT5007:无法获取未定义或空引用的属性“className”

多谢各位

好的，我有一个文本框，像这样：

  </html:div>
          <html:div class="geoCard">
                    <xf:input ref="{{fieldname}}/longitude" appearance="{{properties/appearance}}"  class="geolocation_long">
                          <xf:label>{{properties/label}}</xf:label>
                      </xf:input>  
                    <xf:input ref="{{fieldname}}/latitude" appearance="{{properties/appearance}}"  class="geolocation_lat">
                          <xf:label>{{properties/label}}</xf:label>
                      </xf:input>  
          </html:div>

var map;

if (typeof initMap == 'function') {
    initMap();
}

function initMap() {

    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: { lat: 52.001321, lng: 4.374577 }
        //mapTypeControl: false
    });

    var geocoder = new google.maps.Geocoder();

    document.getElementById('submit').addEventListener('click', function () {
        geocodeAddress(geocoder, map);
    });
}//end function initMap

function toggleBounce() {
    if (marker.getAnimation() !== null) {
        marker.setAnimation(null);
    } else {
        marker.setAnimation(google.maps.Animation.BOUNCE);
    }
}

var marker;
var infowindow;
function geocodeAddress(geocoder, resultsMap) {
    if (typeof infowindow != 'undefined') {
        infowindow.close();
    }

    if (typeof marker != 'undefined') {
        marker.setMap(null);
    }

    var address = document.getElementById('address').value;
    geocoder.geocode({ 'address': address }, function (results, status) {

        if (status === google.maps.GeocoderStatus.OK) {
            resultsMap.setCenter(results[0].geometry.location);
            marker = new google.maps.Marker({
                map: resultsMap,
                draggable: true,
                animation: google.maps.Animation.DROP,
                position: results[0].geometry.location,
                title: "Drag me!"
            });

            document.getElementById(marker.getPosition().lat().toFixed(6)).className += "geolocation_long";
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }

        infowindow = new google.maps.InfoWindow({
            content: '<p>Marker Location:'
                    + 'lat: ' + marker.getPosition().lat().toFixed(6)
                    + ', '
                    + 'lng: ' + marker.getPosition().lng().toFixed(6)
                    + '</p>'            


        });

        google.maps.event.addListener(marker, 'dragend', function (event) {
            if (typeof infowindow != 'undefined') {
                infowindow.close();
            }
            infowindow = new google.maps.InfoWindow({
                content: '<p>Marker Location:'
                    + 'lat: ' + event.latLng.lat().toFixed(6)
                    + ', '
                    + 'lng: ' + event.latLng.lng().toFixed(6)
                    + '</p>'
            });

            infowindow.open(map, marker);


        });

        infowindow.open(map, marker);




        google.maps.event.addListener(marker, 'click', function (event) {
            if (typeof infowindow != 'undefined') {
                infowindow.open(map, marker);
            }
        });
    });
}

 document.getElementById(marker.getPosition().lat().toFixed(6)).className += "geolocation_long";

<input name="form_inp16" title="" class="xforms-input xforms-control geolocation_long xforms-ap-default" id="form_inp16" type="text" value="">

所以我需要这个属性的值：marker.getPosition（）.lat（）.toFixed（6）

在文本框中：

多谢各位

我添加了一个截图。你会看到一个有两个Coorinate的信息框。因此，第一个坐标必须显示在文本字段Geo中

那么如何做到这一点呢

---

谢谢您

要获得地址或标签等标记的详细信息，您需要使用地理编码器服务

var映射；
if（initMap的类型=='function'）{
initMap（）；
}
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：10，
中心：{lat:52.001321，lng:4.374577}
//mapTypeControl:false
});
var geocoder=new google.maps.geocoder（）；
document.getElementById（'submit'）。addEventListener（'click'，函数（）{
地理编码地址（地理编码器、地图）；
});
}//端函数初始化映射
函数toggleBounce（）{
if（marker.getAnimation（）！==null）{
marker.setAnimation（null）；
}否则{
setAnimation（google.maps.Animation.BOUNCE）；
}
}
var标记；
var信息窗口；
函数geocodeAddress（geocoder，resultsMap）{
如果（信息窗口的类型！=“未定义”）{
infowindow.close（）；
}
如果（标记类型！=“未定义”）{
marker.setMap（空）；
}
var address=document.getElementById（'address'）。值；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
resultsMap.setCenter（结果[0].geometry.location）；
marker=新的google.maps.marker({
地图：结果地图，
真的，
动画：google.maps.animation.DROP，
位置：结果[0]。geometry.location，
标题：“拖我！”
});
document.getElementById（marker.getPosition（）.lat（）.toFixed（6））.className+=“地理位置”\u long；
}否则{
警报（'地理编码因以下原因未成功：'+状态）；
}
infowindow=新建google.maps.infowindow({
内容：“标记位置：”
+“lat:”+marker.getPosition（）.lat（）.toFixed（6）
+ ', '
+“lng:”+marker.getPosition（）.lng（）.toFixed（6）
+“
”
});
google.maps.event.addListener（标记'dragend'，函数（事件）{
//了解详情
var markerDetails=getAddress（event.latLng）；
如果（信息窗口的类型！=“未定义”）{
infowindow.close（）；
}
infowindow=新建google.maps.infowindow({
内容：“标记位置：”
+“lat:”+event.latLng.lat（）.toFixed（6）
+ ', '
+“lng:”+event.latLng.lng（）.toFixed（6）
+“
”
});
信息窗口。打开（地图、标记）；
});
信息窗口。打开（地图、标记）；
google.maps.event.addListener（标记，'click'，函数（事件）{
如果（信息窗口的类型！=“未定义”）{
信息窗口。打开（地图、标记）；
}
});
var geocoder=new google.maps.geocoder（）；
函数getAddress（latLng）{
geocoder.geocode（{'latLng'：latLng}，
功能（结果、状态）{
if（status==google.maps.GeocoderStatus.OK）{
console.log（结果[0]）；
}
});
}
}
});
}

通常使用唯一的“id”：

如果要在标记的“单击”上填充这些表单字段：

google.maps.event.addListener(marker,'click',function(e) {
    document.getElementById("form_inp16").value=marker.getPosition().lat().toFixed(6);
    document.getElementById("form_inp17").value=marker.getPosition().lng().toFixed(6);
});

---

您能提供您正在使用的实际标记吗？

{{properties/label}

不是HTMLTANK。我编辑了邮件，你在找这样的东西吗？我在回答中添加了同样的内容。一定要检查。谢谢