从可拖动的标记中保存标记的新位置 - 谷歌地图V3 [英] save new position of marker from draggable marker - google maps V3

问题描述

我已经成功获得了可拖动标记的新位置。
在我的代码中，我可以通过右键创建newmarker，然后通过单击标记的infowindow处的保存按钮来保存标记...
但问题是我无法在窗体中插入新的坐标（经度和纬度）在infowindow ...

 < HTML> 
< head> 
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/> 
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< / script> 
< script type =text / javascript> 
 var geocoder = new google.maps.Geocoder（）; 
 var newmarker; 
 
函数geocodePosition（pos）{
 geocoder.geocode（{
 latLng：pos 
}，function（responses）{
 if（responses& &; respond.length> 0）{
 updateMarkerAddress（responses [0] .formatted_address）; 
} else {
 updateMarkerAddress（'Can not determine address at this location。'）; 
} 
}）; 
} 
 
函数updateMarkerStatus（str）{
 document.getElementById（'markerStatus'）。innerHTML = str; 
 
 
函数updateMarkerPosition（latLng）{
 document.getElementById（'info'）。innerHTML = [
 latLng.lat（），
 latLng .lng（）
] .join（'，'）; 
} 
函数updateMarkerLat（latLng）{
 document.getElementById（'latnew'）。innerHTML = [
 latLng.lat（）
]; 
} 
函数updateMarkerLng（latLng）{
 document.getElementById（'lngnew'）。innerHTML = [
 latLng.lng（）
]; 
} 
 
函数updateMarkerAddress（str）{
 document.getElementById（'address'）。innerHTML = str; 
 
 
函数initialize（）{
 var latLng = new google.maps.LatLng（-7.8,110.3666667）; 
 var map = new google.maps.Map（document.getElementById（'mapCanvas'），{
 zoom：13，
 center：latLng，
 mapTypeId：google.maps。 MapTypeId.ROADMAP 
}）; 
 
 $ b google.maps.event.addListener（map，rightclick，function（event）{
 placeMarker（event.latLng）; 
}）; 
 
 
函数placeMarker（location）{
 var newmarker = new google.maps.Marker（{
 position：location，
 map：map，
可拖动：true 
}）; 
 
 
 var form = 
'< div id =bodyContent>'+ 
'< b>新地图< / b>'+ $ b $< form method =post>'+ 
'< table> + 
'< tr>< td>名称位置：< input type =text name =name/>< / td>< / tr>'+ 
'< tr>< td> Latitude：< input type =textname =latitudevalue =latnew/>< / td>< / tr>'+ 
'< tr>< td> Longitude：< input type =textname =longitudevalue = lngnew/>< / td>< / tr>'+ 
'< tr>< td>< input type =submitvalue =save>< / td> < / tr>'+ 
'< / table>'+ 
'< / form>'+ 
'< / div>'; 
 
 var infowindow = new google.maps.InfoWindow（{
 content：form，
 maxWidth：500 
}）; 
 
 google.maps.event.addListener（newmarker，'click'，function（）{
 infowindow.open（map，newmarker）; 
 //marker1.openInfoWindowHtml（'一些文字'，{noCloseOnClick：'false'}）; 
}）; 
 
 //更新当前位置信息。 
 updateMarkerPosition（latLng）; 
 updateMarkerLat（latLng）; 
 updateMarkerLng（latLng）; 
 geocodePosition（latLng）; 
 
 //添加拖动事件侦听器。 
 google.maps.event.addListener（newmarker，'dragstart'，function（）{
 updateMarkerAddress（'Dragging ...'）; 
}）; 
 
 google.maps.event.addListener（newmarker，'drag'，function（）{
 updateMarkerStatus（'Dragging ...'）; 
 updateMarkerPosition（newmarker.getPosition（ ））; 
 updateMarkerLat（newmarker.getPosition（））; 
 updateMarkerLng（newmarker.getPosition（））; 
}）; 
 
 google.maps.event.addListener（newmarker，'dragend'，function（）{
 updateMarkerStatus（'Drag ended'）; 
 geocodePosition（newmarker.getPosition（）） ; 
 updateMarkerLat（newmarker.getPosition（））; 
 updateMarkerLng（newmarker.getPosition（））; 
}）; 
} 
 
 
} 
 
 //加载处理程序以启动应用程序。 
 google.maps.event.addDomListener（window，'load'，initialize）; 
< / script> 
< / head> 
< body> 
< style> 
 #mapCanvas {
 width：500px; 
 height：400px; 
 float：left; 
} 
 #infoPanel {
 float：left; 
 margin-left：10px; 
} 
 #infoPanel div {
 margin-bottom：5px; 
} 
< / style> 
 
< div id =mapCanvas>< / div> 
< div id =infoPanel> 
< b>标记状态：< / b> 
 
< div id =markerStatus>< i>按一下并拖曳标记。< / i>< / div> 
 当前位置：< / b> 
< div id =info>< / div> 
< div id =latnew>< / div>< div id =lngnew>< / div> 
< b>最近的匹配地址：< / b> 
< div id =address>< / div> 
< / div> 
< / body> 
< / html> 
  

这个问题的任何想法？
感谢...

Mahendra，

解决方案

您可以通过将它们嵌入到您正在构建的表单字符串中来将文本框的值设置为标记的经度和纬度：

  var form = 
'< div id =bodyContent>'+ 
'< b>新地图< / b> ;'+ 
'< form method =post>'+ 
'< table> + 
'< tr>< td>名称位置：<输入字型=textname =name/>< / td>< / tr>'+ 
'< tr>< td> Latitude：< input type = latitudevalue ='+ newmarker.position.lat（）+'/>< / td>< / tr>'+ 
'< tr>< td> input type =textname =longitudevalue ='+ newmarker.position.lng（）+'/>< / td>< / tr>'+ 
'< tr> < td>< input type =submitvalue =save >< / td>< / tr>'+ 
'< / table>'+ 
'< / form>'+ 
'< / div>'; 
  

但是你仍然有一个问题，当标记被拖动时值不会被更新。

您可以通过将窗体声明和infowindow变量放入click处理程序中来解决这个问题：

  google.maps.event.addListener（newmarker，'click'，function（）{
 var form = 
'< div id =bodyContent>'+ 
'< b>新地图< / b>'+ 
'< form method =post>'+ 
'<表格>'+ 
'< tr>< td>名称位置：< input type =textname =name/>< / td>< / tr>'+ 
'< tr>< td>纬度：< input type =textname =latitudevalue ='+ newmarker.position.lat（）+'/>< / td><< ; / tr>'+ 
'< tr>< td>经度：< input type =textname =longitudevalue ='+ newmarker.position.lng（）+ '< / t>< / td>< / tr>'+ 
'< tr>< td>< input type =submitvalue =save>< / td> < / tr>'+ 
'< / table>'+ 
'< / form>'+ 
'< / div>'; 
 
 var infowindow = new google.maps.InfoWindow（{
 content：form，
 maxWidth：500 
}）; 
 
 infowindow.open（map，newmarker）; 
}）; 
  

I have success to get new position of dragable marker.. In my code below I can create newmarker by rightclick, and then I can save the marker by click the save button at infowindow of the marker... But the problem is I can't insert the new coordinates (latitude and longitude) into the form at infowindow...

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
var newmarker;

function geocodePosition(pos) {
  geocoder.geocode({
    latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {
      updateMarkerAddress(responses[0].formatted_address);
    } else {
      updateMarkerAddress('Cannot determine address at this location.');
    }
  });
}

function updateMarkerStatus(str) {
  document.getElementById('markerStatus').innerHTML = str;
}

function updateMarkerPosition(latLng) {
  document.getElementById('info').innerHTML = [
    latLng.lat(),
    latLng.lng()
  ].join(', ');
}
function updateMarkerLat(latLng) {
  document.getElementById('latnew').innerHTML = [
     latLng.lat()
  ];
}
function updateMarkerLng(latLng) {
  document.getElementById('lngnew').innerHTML = [
    latLng.lng()
  ];
}

function updateMarkerAddress(str) {
  document.getElementById('address').innerHTML = str;
}

function initialize() {
  var latLng = new google.maps.LatLng(-7.8,110.3666667);
  var map = new google.maps.Map(document.getElementById('mapCanvas'), {
    zoom: 13,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });


  google.maps.event.addListener(map, "rightclick", function(event) {
        placeMarker(event.latLng);
    });


    function placeMarker(location) {
        var newmarker = new google.maps.Marker({
            position: location,
            map: map,
            draggable: true
        });


        var form = 
            '<div id="bodyContent">'+
            '<b>New Map</b>' +
            '<form method="post">'+
            '<table>'+
            '<tr><td>Name place :<input type="text" name="name"/></td></tr>'+
            '<tr><td>Latitude :<input type="text" name="latitude" value="latnew"/></td></tr>'+
            '<tr><td>Longitude: <input type="text" name="longitude" value="lngnew"/></td></tr>'+
            '<tr><td><input type="submit" value="save"></td></tr>'+
            '</table>'+
            '</form>'+
            '</div>';

        var infowindow = new google.maps.InfoWindow({
            content: form,
            maxWidth :500
        });

        google.maps.event.addListener(newmarker, 'click', function() {
            infowindow.open(map,newmarker);
            //marker1.openInfoWindowHtml('Some text', {noCloseOnClick: 'false'});
        });

        // Update current position info.
        updateMarkerPosition(latLng);
        updateMarkerLat(latLng);
        updateMarkerLng(latLng);
        geocodePosition(latLng);

        // Add dragging event listeners.
        google.maps.event.addListener(newmarker, 'dragstart', function() {
            updateMarkerAddress('Dragging...');
        });

        google.maps.event.addListener(newmarker, 'drag', function() {
            updateMarkerStatus('Dragging...');
            updateMarkerPosition(newmarker.getPosition());
            updateMarkerLat(newmarker.getPosition());
            updateMarkerLng(newmarker.getPosition());
        });

        google.maps.event.addListener(newmarker, 'dragend', function() {
            updateMarkerStatus('Drag ended');
            geocodePosition(newmarker.getPosition());
            updateMarkerLat(newmarker.getPosition());
            updateMarkerLng(newmarker.getPosition());
        });
    }


}

// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
  <style>
  #mapCanvas {
    width: 500px;
    height: 400px;
    float: left;
  }
  #infoPanel {
    float: left;
    margin-left: 10px;
  }
  #infoPanel div {
    margin-bottom: 5px;
  }
  </style>

  <div id="mapCanvas"></div>
  <div id="infoPanel">
    <b>Marker status:</b>

    <div id="markerStatus"><i>Click and drag the marker.</i></div>
    <b>Current position:</b>
    <div id="info"></div>
    <div id="latnew"></div><div id="lngnew"></div>
    <b>Closest matching address:</b>
    <div id="address"></div>
  </div>
</body>
</html>

any ideas of this problem? thanks before...

Mahendra,

解决方案

You can put the values of the textboxes to the latitude and longitude of the marker when first created by "embedding" them in the form string you are building like this:

var form = 
    '<div id="bodyContent">'+
    '<b>New Map</b>' +
    '<form method="post">'+
    '<table>'+
    '<tr><td>Name place :<input type="text" name="name"/></td></tr>'+
    '<tr><td>Latitude :<input type="text" name="latitude" value="' + newmarker.position.lat() + '"/></td></tr>'+
    '<tr><td>Longitude: <input type="text" name="longitude" value="' + newmarker.position.lng() + '"/></td></tr>'+
    '<tr><td><input type="submit" value="save"></td></tr>'+
    '</table>'+
    '</form>'+
    '</div>';

But you then still have a problem that the values aren't updated when the marker has been dragged.

You can solve that by putting the declaration of your form and infowindow variables inside the click handler like this:

google.maps.event.addListener(newmarker, 'click', function() {
    var form = 
        '<div id="bodyContent">'+
        '<b>New Map</b>' +
        '<form method="post">'+
        '<table>'+
        '<tr><td>Name place :<input type="text" name="name"/></td></tr>'+
        '<tr><td>Latitude :<input type="text" name="latitude" value="' + newmarker.position.lat() + '"/></td></tr>'+
        '<tr><td>Longitude: <input type="text" name="longitude" value="' + newmarker.position.lng() + '"/></td></tr>'+
        '<tr><td><input type="submit" value="save"></td></tr>'+
        '</table>'+
        '</form>'+
        '</div>';

    var infowindow = new google.maps.InfoWindow({
        content: form,
        maxWidth :500
    });

    infowindow.open(map,newmarker);
});

这篇关于从可拖动的标记中保存标记的新位置 - 谷歌地图V3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！