将Google地图点的坐标提取到HTML中的Google工作表 [英] Extract coordinates of google map point to google sheets in HTML

查看：104
本文介绍了将Google地图点的坐标提取到HTML中的Google工作表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

第一个问题因此，我开始使用HTML / JS，并且无法提取用户放置的标记的坐标并将其放入电子表格中。
现在，HTML文件有两部分。一个是带点的地图，并显示经纬度和其他信息。另一部分是要求用户输入经纬度和描述的表格。这会自动提交到Google问卷中，然后提交到Google表格中。



我想要做的是在地图上提交点的坐标，而不是让用户自己做。

 函数postContactToGoogle（）{
 var latitude = document.getElementById（'pointLat'）; 
 var longitude = document.getElementById（'pointLng'）; 
 var description = $（'＃description'）。val（）; 
 
 
 $阿贾克斯（{
网址： https://docs.google.com/forms/d/e/1FAIpQLSccwx1JnSaptL1JlXy-Jmr2S9NjkisKRsmj0pt_4E6bATYVdA/formResponse 数据：{ entry.149945546：latitude，entry.760486044：longitude，entry.573971734：description}，type：POST，dataType：xml，statusCode：{0：function（）{window.location。替换（CoordsfromPoint.html）;}，200：function（）{window.location.replace（CoordsfromPoint.html）;}} 
}）; 
}

在HTML中，脚本如下所示：

 < b>纵横< / b> 
< div id =pointLat>< / div> 
< b>经度< / b> 
< div id =pointLng>< / div>

值由JS函数给出： 

  function getPoint_Lat（latLng）{
 document.getElementById（'pointLat'）。innerHTML = [
 latLng.lat（）
]; 
 
 
 $ b函数getPoint_Lng（latLng）{
 document.getElementById（'pointLng'）。innerHTML = [
 latLng.lng（）
]; 
 longitude = [latLng.lng（）]; 
}

当作为网站运行时，上述2个函数可以显示当前的经纬度和地图上的标记的长度。但是，当我尝试将这些坐标导出到Google工作表时，它显示为空白。这是怎么回事？



完整代码：



http://codepen.io/kwilly/pen/RpWvGW/

解决方案

在控制台中，出现错误 Uncaught TypeError：非法调用
在提交后。因此，在ajax函数中添加 cache：false，processData：false， $ b 

 函数postContactToGoogle（）{
 var frmdata = $（'＃formRequest'）。serialize（）; 
 $阿贾克斯（{
网址： https://docs.google.com/forms/d/e/1FAIpQLSccwx1JnSaptL1JlXy-Jmr2S9NjkisKRsmj0pt_4E6bATYVdA/formResponse，
数据：frmdata，
类型：POST，
 dataType：xml，
 cache：false，
 processData：false，
 statusCode：{
 0：function（）{ 
 alert（'success'）
 //window.location.replace(\"CoordsfromPoint.html）; 
}，
 200：function（）{
 / /window.location.replace(\"CoordsfromPoint.html）; 
} 
} 
}）; 
}

Plunker



检查此评论仍然有任何错误



更新：

我使用表单id更新了表单，并更新了名称与表单输入字段名称。对于ajax发布，我将序列化表单输入值以发布为数据。



表格

 < form id =formRequest> 
 Latitude：
< br /> 
< input type =textname =entry.149945546id =latitudeplaceholder =latitude/> 
< br />经度：
< br /> 
< input type =textname =entry.760486044id =longitudemaxlength =10placeholder =longitude/> 
< br />说明：
< br /> 
< textarea name =entry.573971734id =descriptionrows =4cols =40placeholder =在此处写下您的查询...>< / textarea> 
< br /> 
< br /> 
< center> 
< input type =buttonname =Submitid =Submitonclick =postContactToGoogle（）value =Submit/> 
< input type =resetvalue =Reset/> 
< / center> 
< / form>

注意如果您希望拥有所有表单输入，输入字段与Google表单匹配



整体代码

  <！--http：//gis.stackexchange.com/questions/33238/how-do-you-get-the- 
 
坐标 - 点击或拖动事件-in最谷歌-MAPS-API  - > 
< html> 
 
< head> 
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/> 
 
< script type =text / javascriptsrc =https://maps.google.com/maps/api/js?sensor=false>< / script> 
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js>< / script> 
< script type =text / javascript> 
 var geocoder = new google.maps.Geocoder（）; 
 
函数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（'，'）; 
 
 
函数getPoint_Lat（latLng）{
 document.getElementById（'pointLat'）。innerHTML = [
 latLng.lat（）
]; 
 document.getElementById（'latitude'）。value = [
 latLng.lat（）
]; 
 
 
函数getPoint_Lng（latLng）{
 document.getElementById（'pointLng'）。innerHTML = [
 latLng.lng（）
]; 
 longitude = [latLng.lng（）]; 
 document.getElementById（'longitude'）。value = [
 latLng.lng（）
]; 
} 
 
函数updateMarkerAddress（str）{
 document.getElementById（'address'）。innerHTML = str; 
 
 
函数initialize（）{
 var latLng = new google.maps.LatLng（-34.397,150.644）; 
 var map = new google.maps.Map（document.getElementById（'mapCanvas'），{
 zoom：8，
 center：latLng，
 mapTypeId：google.maps。 MapTypeId.ROADMAP 
}）; 
 var marker = new google.maps.Marker（{
 position：latLng，
 title：'Point A'，
 map：map，
 draggable：true 
}）; 
 
 //更新当前位置信息。 
 updateMarkerPosition（latLng）; 
 geocodePosition（latLng）; 
 
 //添加拖动事件侦听器。 
 google.maps.event.addListener（marker，'dragstart'，function（）{
 updateMarkerAddress（'Dragging ...'）; 
}）; 
 
 google.maps.event.addListener（marker，'drag'，function（）{
 updateMarkerStatus（'Dragging ...'）; 
 updateMarkerPosition（marker.getPosition（ ））; 
 getPoint_Lat（marker.getPosition（））; 
 getPoint_Lng（marker.getPosition（））; 
}）; 
 
 google.maps.event.addListener（marker，'dragend'，function（）{
 updateMarkerStatus（'Drag ended'）; 
 geocodePosition（marker.getPosition（）） ; 
}）; 
} 
 //加载处理程序以启动应用程序。 
 google.maps.event.addDomListener（window，'load'，initialize）; 
 
函数postContactToGoogle（）{
 
 var frmdata = $（'＃formRequest'）。serialize（）; 
 
 $阿贾克斯（{
网址： https://docs.google.com/forms/d/e/1FAIpQLSccwx1JnSaptL1JlXy-Jmr2S9NjkisKRsmj0pt_4E6bATYVdA/formResponse，
数据：frmdata ，
 type：POST，
 dataType：xml，
 cache：false，
 processData：false，
 statusCode：{
 0： function（）{
 alert（'success'）
 //window.location.replace(\"CoordsfromPoint.html）; 
}，
 200：function（）{
 //window.location.replace(\"CoordfromPoint.html）; 
} 
} 
}）; 
} 
< / 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> 
< b>纬度< / b> 
< div id =pointLat>< / div> 
< b>经度< / b> 
< div id =pointLng>< / div> 
< b>最近的匹配地址：< / b> 
< div id =address>< / div> 
< / div> 
< table class =FormRequestalign =left> 
< tr> 
< td> 
< form id =formRequest> 
 Latitude：
< br /> 
< input type =textname =entry.149945546id =latitudeplaceholder =latitudereadonly /> 
< br />经度：
< br /> 
< input type =textname =entry.760486044id =longitudemaxlength =10placeholder =longitudereadonly /> 
< br />说明：
< br /> 
< textarea name =entry.573971734id =descriptionrows =4cols =40placeholder =在此处写下您的查询...>< / textarea> 
< br /> 
< br /> 
< center> 
< input type =buttonname =Submitid =Submitonclick =postContactToGoogle（）value =Submit/> 
< input type =resetvalue =Reset/> 
< / center> 
< / form> 
< / td> 
< / td> 
< / table> 
< / body> 
 
< / html>


First question So i'm getting started with HTML/JS and i'm having trouble extracting the coordinates of a marker placed by the user and putting them into a spreadsheet. As it stands, there are two parts of the HTML document. One is a map with a point and displays the lat/long and other info. The other part is a form which asks the user to input lat/long coords and a description. This gets submitted automatically into a Google Questionaire and then into a Google Sheets.

What I want to do is submit the coordinates of the point on the map instead of having the user do it on their own.

    function postContactToGoogle() {
        var latitude=document.getElementById('pointLat');
        var longitude=document.getElementById('pointLng');
        var description=$('#description').val();


             $.ajax({
             url:"https://docs.google.com/forms/d/e/1FAIpQLSccwx1JnSaptL1JlXy-Jmr2S9NjkisKRsmj0pt_4E6bATYVdA/formResponse",data:{"entry.149945546":latitude,"entry.760486044":longitude,"entry.573971734":description},type:"POST",dataType:"xml",statusCode: {0:function() { window.location.replace("CoordsfromPoint.html");},200:function(){window.location.replace("CoordsfromPoint.html");}}
             });
             }

In the HTML, the script looks like this:

     <b>Latitude</b>
     <div id="pointLat"></div>
     <b>Longitude</b>
     <div id="pointLng"></div>

And the values are given by the JS functions:

    function getPoint_Lat(latLng) {
      document.getElementById('pointLat').innerHTML = [
        latLng.lat()
      ];

     }

     function getPoint_Lng(latLng) {
      document.getElementById('pointLng').innerHTML = [
        latLng.lng()
      ];
      longitude = [latLng.lng()];
     }

When run as a website, the above 2 functions work to show the current lat and long of the marker in a map. But when I try to export those coordinates to the google sheet it shows up blank. What's going on?

Full code:

http://codepen.io/kwilly/pen/RpWvGW/

解决方案

in console there was error Uncaught TypeError: Illegal invocation after hitting submit. So add cache: false,processData: false, in ajax function 

 function postContactToGoogle() {
  var frmdata = $('#formRequest').serialize();
  $.ajax({
    url: "https://docs.google.com/forms/d/e/1FAIpQLSccwx1JnSaptL1JlXy-Jmr2S9NjkisKRsmj0pt_4E6bATYVdA/formResponse",
    data: frmdata,
    type: "POST",
    dataType: "xml",
    cache: false,
    processData: false,
    statusCode: {
      0: function() {
        alert('success')
          //window.location.replace("CoordsfromPoint.html");
      },
      200: function() {
        //window.location.replace("CoordsfromPoint.html");
      }
    }
  });
}

Plunker

Check this and comment still there any error

Update :

I updated the form with form id and updated the input fields with the name matching with the form input field name. And for ajax post i am serializing the form input value to get posted as data.

form 

<form id="formRequest">
      Latitude:
      <br/>
      <input type="text" name="entry.149945546" id="latitude" placeholder="latitude" />
      <br/> Longitude:
      <br/>
      <input type="text" name="entry.760486044" id="longitude" maxlength="10" placeholder="longitude" />
      <br/> Description:
      <br/>
      <textarea name="entry.573971734" id="description" rows="4" cols="40" placeholder="Write your query here..."></textarea>
      <br/>
      <br/>
      <center>
        <input type="button" name="Submit" id="Submit" onclick="postContactToGoogle()" value="Submit" />
        <input type="reset" value="Reset" />
      </center>
    </form>

Note if you want to have all form input you can update the from with the input fields matching the google form

Whole plunker code 

<!--http://gis.stackexchange.com/questions/33238/how-do-you-get-the-

coordinates-from-a-click-or-drag-event-in-the-google-maps-api-->
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

  <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script type="text/javascript">
    var geocoder = new google.maps.Geocoder();

    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 getPoint_Lat(latLng) {
      document.getElementById('pointLat').innerHTML = [
        latLng.lat()
      ];
      document.getElementById('latitude').value=[
        latLng.lat()
      ];
    }

    function getPoint_Lng(latLng) {
      document.getElementById('pointLng').innerHTML = [
        latLng.lng()
      ];
      longitude = [latLng.lng()];
      document.getElementById('longitude').value=[
        latLng.lng()
      ];
    }

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

    function initialize() {
      var latLng = new google.maps.LatLng(-34.397, 150.644);
      var map = new google.maps.Map(document.getElementById('mapCanvas'), {
        zoom: 8,
        center: latLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      var marker = new google.maps.Marker({
        position: latLng,
        title: 'Point A',
        map: map,
        draggable: true
      });

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

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

      google.maps.event.addListener(marker, 'drag', function() {
        updateMarkerStatus('Dragging...');
        updateMarkerPosition(marker.getPosition());
        getPoint_Lat(marker.getPosition());
        getPoint_Lng(marker.getPosition());
      });

      google.maps.event.addListener(marker, 'dragend', function() {
        updateMarkerStatus('Drag ended');
        geocodePosition(marker.getPosition());
      });
    }
    // Onload handler to fire off the app.
    google.maps.event.addDomListener(window, 'load', initialize);

    function postContactToGoogle() {

   var frmdata= $('#formRequest').serialize();

      $.ajax({
        url: "https://docs.google.com/forms/d/e/1FAIpQLSccwx1JnSaptL1JlXy-Jmr2S9NjkisKRsmj0pt_4E6bATYVdA/formResponse",
        data: frmdata,
        type: "POST",
        dataType: "xml",
        cache: false,
        processData: false,
        statusCode: {
          0: function() {
            alert('success')
            //window.location.replace("CoordsfromPoint.html");
          },
          200: function() {
            //window.location.replace("CoordsfromPoint.html");
          }
        }
      });
    }
  </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>
    <b>Latitude</b>
    <div id="pointLat"></div>
    <b>Longitude</b>
    <div id="pointLng"></div>
    <b>Closest matching address:</b>
    <div id="address"></div>
  </div>
  <table class="FormRequest" align="left">
    <tr>
      <td>
        <form id="formRequest">
          Latitude:
          <br/>
          <input type="text" name="entry.149945546" id="latitude" placeholder="latitude" readonly />
          <br/> Longitude:
          <br/>
          <input type="text" name="entry.760486044" id="longitude" maxlength="10" placeholder="longitude" readonly/>
          <br/> Description:
          <br/>
          <textarea name="entry.573971734" id="description" rows="4" cols="40" placeholder="Write your query here..."></textarea>
          <br/>
          <br/>
          <center>
            <input type="button" name="Submit" id="Submit" onclick="postContactToGoogle()" value="Submit" />
            <input type="reset" value="Reset" />
          </center>
        </form>
      </td>
      </td>
  </table>
</body>

</html>

这篇关于将Google地图点的坐标提取到HTML中的Google工作表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆