Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
400 views
in Technique[技术] by (71.8m points)

javascript - TypeError:a.lat不是Google Maps API中的函数(TypeError: a.lat is not a function in Google Maps API)

I'm trying to make a page where users can place markers on a map, create a polygon, and then all of the coordinates are placed in a sql database.

(我正在尝试制作一个页面,用户可以在该页面上在地图上放置标记,创建多边形,然后将所有坐标都放置在sql数据库中。)

However, I'm at the point where I receive the error "uncaught TypeError: this.lat is not a function."

(但是,我正要收到错误“未捕获的TypeError:this.lat不是函数”。)

Additionally, no data arrives in my database.

(此外,没有数据到达我的数据库。)

This is my javascript:

(这是我的javascript:)

<script type="text/javascript">

    // declare map outside of initialize function so that drawPoints() can use it
    var map;

    // called when page is loaded
    function initialize() {

      // arbitrary point
      var myLatLng = new google.maps.LatLng(24.88484848484, -70.268858484);

      // options to init map with, again arbitrary
      var myOptions = {
        zoom: 5,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      // get our map object
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

      // array to store markers that user has drawn
      var markers = [];

      // add event listener to the map to get the click events and draw a marker
      google.maps.event.addListener(map, 'click', function (e) {

        var marker = new google.maps.Marker();

        marker.setPosition(e.latLng);
        marker.setMap(map);
        marker.setVisible(true);

        // push it to the markers array
        markers.push(marker);

        // add an event listener to each marker so that we can draw a polygon
        // once user clicks on on of the markers in the markers array, assuming
        // that they are ready to join up the polygon and have it drawn
        google.maps.event.addListener(marker, 'click', function (e) {
          drawPoints(markers);

          // empty the markers array so that the user can draw a new one, without
          // them all joining up. this is perphaps where you would want to push
          // the markers array to a database, storing the points as latitude/longitude
          // values so that they can be retrieved, put into an array, and drawn
          // as a polygon again.
          const dataList = markers.map(entry => entry.getPosition());
          console.log(dataList);
          $.ajax({
            url: "upload.php",
            type: "POST",
            data: { 'dataList': dataList }
          });
          markers = [];
        });

      });

    }

    function drawPoints(markers) {
      var poly = new google.maps.Polygon;

      var points = [];

      for (var i = 0; i < markers.length; i++) {
        points.push(markers[i].getPosition());
      }
      poly.setMap(map);
      poly.setPath(points);
      poly.setVisible(true);
    }

  </script>

and this is my php:

(这是我的PHP:)

$arr = $_POST['dataList'] ?? NULL;
if ($arr !== NULL) {
  mysql_select_db("coordinates", $con);

  $query = "INSERT INTO coordinates (coordinates) VALUES ";
  foreach($arr as $i => $v) {
    $query .= "(". $v .")";
    if ($i < sizeof($arr) - 1) $query .= ",";
  }
  $query .= ";"

  mysql_query($query);
  mysql_close($con);
}

whereby markers is an array in the javascript and my sql database has a single table, coordinates, with a single row, coordinates.

(从而标记是javascript中的数组,而我的sql数据库只有一个表坐标,只有一行坐标。)

I'm not at the point of knowing how to even separate longitude and latitude when entering them into the database, so I haven't tried to (or know how to) tackle that yet.

(在将它们输入数据库时??,我还不知道如何分开经度和纬度,因此我还没有尝试(或不知道)解决该问题。)

  ask by andromedutch translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
等待大神答复

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...