Question

我正在开展一个项目，在那里我拍摄一个中心的谷歌地图图像，然后采取图像的坐标来创建我自己的交互式地图。到目前为止，我将地图的图像作为画布，我可以点击它来获得坐标，我可以通过两次点击画一条线。

但是我想点击单位的每个角落： 1 - 获取每个角落的坐标 2 - 在每个点之间画一条线，在原始图像的顶部绘制周边。

我的问题是我点击一个点得到坐标，然后点击另一个点，同时在两者之间绘制一条线（这是正确的）原始坐标被新的坐标覆盖，这阻止了我从显示中有多条画线

以下是代码：

HTML：

<body>
@using (Html.BeginForm("Index", "DB", FormMethod.Post))
{
    <div id="container">

        <div id="main">
  <h2>Coordinates</h2>


            @Html.ValidationSummary()

            <div id="table-cnt2" style="overflow: auto">
                <table id="coordinates">
                    <tr>
                        @*<th>Level</th>*@
                        <th>Unit Number</th>
                        <th>Co-ordinate Order</th>
                        <th>X Co-ordinates</th>
                        <th>Y Co-ordinates</th>
                    </tr>

                    <tr style="background-color: grey">
                        <td>@Html.DropDownListFor(x => x.NewShoppingCenterUnitCoordinate.ShoppingCenterUnitId, new SelectList(Model.Units, "ShoppingCenterUnitId", "ShoppingCenterUnitId", Model.NewShoppingCenterUnitCoordinate.ShoppingCenterUnitId), new {onchange = "resetOrderToOne()"})</td>
                        <td>@Html.TextBoxFor(x => x.NewShoppingCenterUnitCoordinate.Ordered)</td>
                        <td>@Html.TextBoxFor(x => x.NewShoppingCenterUnitCoordinate.x)</td>
                        <td>@Html.TextBoxFor(x => x.NewShoppingCenterUnitCoordinate.y)</td>
                    </tr>


                    @for (int i = 0; Model.Coordinates.Count > i ; i++)

                    {
                        //testing 

                        <tr>
                            <td>@Html.DropDownListFor(x => x.Coordinates[i].ShoppingCenterUnitId, new SelectList(Model.Units, "ShoppingCenterUnitId", "ShoppingCenterUnitId", Model.Coordinates[i].ShoppingCenterUnitId))</td>
                            <td>@Html.TextBoxFor(x => x.Coordinates[i].Ordered)</td>
                            <td>@Html.TextBoxFor(x => x.Coordinates[i].x)</td>
                            <td>@Html.TextBoxFor(x => x.Coordinates[i].y)</td>
                        </tr>
                    }

                </table>
            </div>

            <input type="button" value="Save" onclick="getCursorPosition(e)"/>
            <input type="submit" value="Save"/>


        </div>

        <div id="map">
            <canvas id="canvas" width="900" height="800"></canvas>
            <img id="image" src="~/Content/images/map.png" style="display: none"  />
        </div>

        <div class="clear-both"></div>
    </div>
}
</body>

Javascript：

(function($, window, document) {


    var clicks = 0;
    var lastClick = [0, 0];

    $("#canvas").on("click", function (e) {
        console.log('click');
        var posArr = getCursorPosition(e);
        console.log(posArr);
        drawLine(posArr);
    });

    function getCursorPosition(e) {
        var xPos;
        var yPos;


        if (e.pageX != undefined && e.pageY != undefined) {

            xPos = parseInt(e.pageX - $('#canvas').offset().left),
            yPos = parseInt(e.pageY - $('#canvas').offset().top);
            $("#NewShoppingCenterUnitCoordinate_x").val(xPos);
            $("#NewShoppingCenterUnitCoordinate_y").val(yPos);

            $('#canvas').closest("form").save();

        } else {
            xPos = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            yPos = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        }





        return [xPos, yPos];

        }

    function drawLine(posArr) {

        var context = document.getElementById('canvas').getContext('2d');
        console.log(context);


        var x = posArr[0],
        y = posArr[1];

        if (clicks != 1) {
            clicks++;
        } else {
            context.beginPath();
            context.moveTo(lastClick[0], lastClick[1]);
            context.lineTo(x, y, 6);

            context.strokeStyle = '#000000';
            context.stroke();

            clicks = 0;
        }

        lastClick = [x, y];
    };

    //$(this).closest("form").submit();

})(window.jQuery, window, document)

Answer 1

希望这个例子可以帮助你： example

Google Maps JavaScript API绘图库，请参阅完整文档here

function initialize() {
  // Map Center
  var myLatLng = new google.maps.LatLng(33.5190755, -111.9253654);
  // General Options
  var mapOptions = {
    zoom: 12,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.RoadMap
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
  // Polygon Coordinates
  var triangleCoords = [
    new google.maps.LatLng(33.5362475, -111.9267386),
    new google.maps.LatLng(33.5104882, -111.9627875),
    new google.maps.LatLng(33.5004686, -111.9027061)
  ];
  // Styling & Controls
  myPolygon = new google.maps.Polygon({
    paths: triangleCoords,
    draggable: true, // turn off if it gets annoying
    editable: true,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  myPolygon.setMap(map);
  //google.maps.event.addListener(myPolygon, "dragend", getPolygonCoords);
  google.maps.event.addListener(myPolygon.getPath(), "insert_at", getPolygonCoords);
  //google.maps.event.addListener(myPolygon.getPath(), "remove_at", getPolygonCoords);
  google.maps.event.addListener(myPolygon.getPath(), "set_at", getPolygonCoords);
}

//Display Coordinates below map
function getPolygonCoords() {
  var len = myPolygon.getPath().getLength();
  var htmlStr = "";
  for (var i = 0; i < len; i++) {
    htmlStr += "new google.maps.LatLng(" + myPolygon.getPath().getAt(i).toUrlValue(5) + "), ";
    //Use this one instead if you want to get rid of the wrap > new google.maps.LatLng(),
    //htmlStr += "" + myPolygon.getPath().getAt(i).toUrlValue(5);
  }
  document.getElementById('info').innerHTML = htmlStr;
}
function copyToClipboard(text) {
  window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}

HTML Canvas使用鼠标单击绘制图像，保存坐标但不提交

1 个答案: