Question

我正在实施一个脚本，但在我无法弄清楚的两个问题上需要一些帮助。这个想法是允许某人创建一个运行路线并通过坐标将路线存储到数据库中。

代码如下：（信用到：Post 19 Here和This Fiddle此处）

            <html>
              <head>
                <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
                <meta charset="UTF-8">
                <title>Drawing Tools (B)</title>
            <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
            <script>
            window.onload = function() {
                var latlng = new google.maps.LatLng(51.4975941, -0.0803232);
                var map = new google.maps.Map(document.getElementById('map'), {
                    center: latlng,
                    zoom: 11,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: 'Set lat/lon values for this property',
                    draggable: true
                });
                google.maps.event.addListener(marker, 'dragend', function(a) {
                    console.log(a);
                    var div = document.createElement('div');
                    div.innerHTML = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4);
                    document.getElementsByTagName('body')[0].appendChild(div);
                });
            };
            </script>
              </head>
              <body>
            <div id="map" style="height:300px;"></div>
              </body>
            </html>

我想解决的第一个问题：

div.innerHTML = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4);

如何添加这些lat＆amp; amp;长坐标（当人创建路径时）到PHP数组中，以便将它们插入数据库。我正在努力解决这个问题，因为它正在显示它们。

我想解决的第二个问题：

div.innerHTML = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4);

如果用户丢弃了针脚，是否有办法在出错时删除最新的坐标？

我尝试过不同的方法（我对JS不好）;

div.innerHTML = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4) + ', <a onClick="$(this).closest("div").remove();">Delete</a>';

但似乎无法让它发挥作用。

对这些问题的任何帮助将不胜感激。非常感谢。

Answer 1

第一个问题

除非您拨打服务器电话，否则您无法将JS数据发送给PHP。一旦页面被呈现 - PHP就会关闭它，而JS则继续在浏览器中运行（阅读服务器端与客户端编程）。

您可能希望进行AJAX调用以将lat / long数据发送回服务器，以便将它们插入数据库。

第二个问题

（请在下次尝试另外提出问题）

$(this).parent().remove();应该有用。

Answer 2

将坐标保存在javascript对象/数组中会更容易，因此可以轻松添加/删除它们并保存。

我还会使用更合适的html元素向用户显示它们，例如无序/有序列表：

<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <title>Drawing Tools (B)</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
        $(function() {

            //Create an object to hold the values and encapsulate adding, removing and saving
            function List(ul, save){
                this.items = [];
                this.ul = ul;
                this.save = save;
            }
            //add item to list
            List.prototype.add=function(item){
                this.items.push(item);
                this.rebuildDom();
            };
            //remove item from list
            List.prototype.removeAt=function(index){
                this.items.splice(index, 1);
                this.rebuildDom();
            };
            //update the contents of the <ul> list to display current list items
            List.prototype.rebuildDom=function(){
                var html='';
                for(var i = 0; i < this.items.length; i++){
                    //note change here, each item is now an array, so it must be
                    //joined into a string for display
                    html += '<li>'+this.items[i].join(' , ') +'<span class="remove" data-id="'+i+'">X</span></li>'
                }
                $('#'+this.ul).html(html);
            };
            //upload the data via ajax
            List.prototype.upload=function(){
                var data = {data: this.items};
                $.post('/save.php', data, function(response){
                    console.log(response);
                })
            };
            List.prototype.init = function(){
                var _this = this;
                //remove items from list when remove is clicked
                $('#'+this.ul).on('click', 'span.remove', function(){
                    var index = $(this).data('id');
                    _this.removeAt(index);
                });
                //bind to click event of save button, and upload data
                $('#'+this.save).click(function(ev){
                    ev.preventDefault();
                    _this.upload();
                });
            };

            var list = new List('items', 'save');
            list.init();


            var latlng = new google.maps.LatLng(51.4975941, -0.0803232);
            var map = new google.maps.Map(document.getElementById('map'), {
                center: latlng,
                zoom: 11,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: 'Set lat/lon values for this property',
                draggable: true
            });
            google.maps.event.addListener(marker, 'dragend', function(a) {
                console.log(a);
                //note item is now an array containing both values, not a string
                var item = [a.latLng.lat().toFixed(4) ,  a.latLng.lng().toFixed(4)];
                //add item to our list
                list.add(item);
            });
        });
    </script>

    <style>
        body{
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
        #map{
            height: 400px;
            border-bottom: 1px solid #666666;
            margin-bottom: 20px;
        }

        h3{
            font-family: inherit;
        }
        #items{
            list-style: none;
            width: 300px;
            border: 1px solid #d8d8d8;
        }
        #items li{
            background-color: #666666;
            padding: 5px;
            margin: 5px;
            color:#ffffff;
        }
        #items li span.remove{
            float: right;
            background-color: red;
            color: #ffffff;
            margin: -5px;
            padding: 5px;
        }

    </style>

</head>
<body>
<div id="map" ></div>

<button id="save">Save</button>

<h3>Co-ordinates of your route:</h3>

<ul id="items"></ul>

</body>
</html>

实例： https://jsfiddle.net/rmsjf5oy/2/

要在php中检索数据，您只需访问$_POST超级全局：

即可

//save.php

if(isset($_POST['data']){
    $co-ordinates = $_POST['data'];

    // $co-ordinates is now a php array like
    //   [
    //        ['51.4886', '-0.0666'],
    //        ['51.4886', '-0.0666'],
    //        ['51.4886', '-0.0666']
    //   ]

    //do something with the data then send a message back to the javascript

    header('Content-Type: application/json');
    echo json_encode(['success'=>true, 'message'=>'Thanks, got the data']);
}

在浏览器的js控制台中查看响应，或在console.log(response);方法中执行upload以外的操作，以便对数据执行其他操作，例如在div中显示< / p>

Javascript到PHP和innerHTML删除

2 个答案:

第一个问题

第二个问题