Question

我希望我能够很好地解释这个问题。我有一张谷歌地图，我放置了一个网格。网格实际上是经度和纬度线的折线，布局1/4分钟网格。这是由空闲事件引发的。

当我用户点击地图时，会调用createGridBox（event.latLng）函数，并在此过程中，在GridBox中创建一个gridOverBox，用于概述特定的感兴趣网格。它还在该框中创建一个子网格，并将其划分为8个。

在我现在的代码中，还创建了另一个GridBox，因为我随意调用createMicroGrid来创建围绕click事件点的smGridOverBox。那只是为了测试。

我想要发生的是：

当发生点击事件时，如果它位于没有绘制子网格的GridBox中，请绘制它们。
如果子网格已存在，则通过调用createMicroGrid（point）在该点创建一个smGridOverBox。

我希望这不会太混乱。

代码可以创建所有网格。缺少的是用于测试subGrid是否已在该网格框内具有latlon线的脚本。我添加（注释掉了）一些伪代码来帮助解释我想要做的事情。

感谢施普林格

 <html>
<head>
    <script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=geometry&amp;sensor=false"></script>
            <!--<script type="text/javascript" src="http://melterium.net/label.js"></script>-->
    <title>Find your Qtr minute locator</title>
</head>
<body style="height:100%;margin:0">
<!-- Declare the div, make it take up the full document body -->
<div id="map-canvas" style="width: 100%; height: 95%;"></div>

<script type="text/javascript">

    var map;

    var qtrArray = [];
    var Startlatlng;
    var llOffset = 0.0666666666666667;
    var smallGridOffset = llOffset/8;
    var drawGridBox = false;
    var drawSmGridBox = false;

    var gridline;
    var polylinesquare;
    var latPolylines = [];
    var smLatPolylines = [];
    var latLabels = [];
    var latMapLabel;

    var lngPolylines = [];
    var smLngPolylines = [];
    var lngLabels = [];
    var lngMapLabel;
    var bounds = new google.maps.LatLngBounds();

    function initialize() {
        map = new google.maps.Map(document.getElementById('map-canvas'), {
            center: new google.maps.LatLng(34.00, -84.00),
            zoom: 10,
            streetViewControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scaleControl: true
        });

        /*
         var oLat = 90.00;
         var oLon = 0.00;

         var gridlocator = [new google.maps.LatLng(oLat, oLon)];
         */
        google.maps.event.addListener(map, 'click', function (event) {
//            if gridOverBox does not exist then        <<= pseudo code
//            createGridBox(event.latLng)
//            else
//            createMicroGrid(event.latLng);
            createGridBox(event.latLng);
            createMicroGrid(event.latLng);
        });
        DrawGridOn();
        google.maps.event.addListener(map, 'idle', function () {
            createGridLines(map.getBounds());
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);

    function DrawGridOn() {
        drawGridBox = true;
    }

    function DrawGridOff() {
        drawGridBox = false;
    }


    function ClearLastGrid() {
        polyline.setMap(null);
    }

//    function drawPolyLine(from, to, orient)

    function createGridLines(bounds) {
        for (var i = 0; i < latPolylines.length; i++) {
            latPolylines[i].setMap(null);
        }

        latPolylines = [];
        for (var i = 0; i < lngPolylines.length; i++) {
            lngPolylines[i].setMap(null);
        }
        lngPolylines = [];

        if (map.getZoom() < 10) return;
        var north = bounds.getNorthEast().lat();
        var east  = bounds.getNorthEast().lng();
        var south = bounds.getSouthWest().lat();
        var west  = bounds.getSouthWest().lng();

        // define the size of the grid
        var topLat = Math.ceil(north / llOffset) * llOffset;
        var rightLong = Math.ceil(east / llOffset) * llOffset;

        var bottomLat = Math.floor(south / llOffset) * llOffset;
        var leftLong = Math.floor(west / llOffset) * llOffset;

        for (var latitude = bottomLat; latitude <= topLat; latitude += llOffset) latPolylines.push(new google.maps.Polyline({
            path: [
                new google.maps.LatLng(latitude, leftLong), new google.maps.LatLng(latitude, rightLong)],
            map: map,
            geodesic: true,
            strokeColor: '#0000FF',
            strokeOpacity: 0.5,
            strokeWeight: 1
        }));
        for (var longitude = leftLong; longitude <= rightLong; longitude += llOffset) lngPolylines.push(new google.maps.Polyline({
            path: [
                new google.maps.LatLng(topLat, longitude), new google.maps.LatLng(bottomLat, longitude)],
            map: map,
            geodesic: true,
            strokeColor: '#0000FF',
            strokeOpacity: 0.5,
            strokeWeight: 1
        }));
    }

    function createGridBox(point) {
        // Square limits
//        var smPoint = point;
        var bottomLeftLat = Math.floor(point.lat() / llOffset) * llOffset;
        var bottomLeftLong = Math.floor(point.lng() / llOffset) * llOffset;

        var i;

        var gridLineSquare = [
            new google.maps.LatLng(bottomLeftLat, bottomLeftLong), //lwr left
            new google.maps.LatLng(bottomLeftLat, bottomLeftLong + llOffset), //lwr right
            new google.maps.LatLng(bottomLeftLat + llOffset, bottomLeftLong + llOffset), //upr right
            new google.maps.LatLng(bottomLeftLat + llOffset, bottomLeftLong), //upr left
            new google.maps.LatLng(bottomLeftLat, bottomLeftLong)]; //lwr left

        // external.getData(event.latLng);
        if (drawGridBox == true) {

            gridOverBox = new google.maps.Polyline({
                path: gridLineSquare,
                geodesic: true,
                strokeColor: '#CC0099',
                strokeOpacity: 0.5,
                strokeWeight: 2
            });


            for (var latitude = bottomLeftLat + smallGridOffset; latitude <= (bottomLeftLat + llOffset); latitude += smallGridOffset) smLatPolylines.push(new google.maps.Polyline({
                path: [
                    new google.maps.LatLng(latitude, bottomLeftLong), new google.maps.LatLng(latitude, bottomLeftLong + llOffset)],
                map: map,
                geodesic: true,
                strokeColor: '#0000FF',
                strokeOpacity: 0.5,
                strokeWeight: 1
            }));

            for (var longitude = bottomLeftLong + smallGridOffset; longitude <= bottomLeftLong + llOffset; longitude += smallGridOffset) smLngPolylines.push(new google.maps.Polyline({
                path: [
                    new google.maps.LatLng(bottomLeftLat, longitude), new google.maps.LatLng(bottomLeftLat + llOffset, longitude)],
                map: map,
                geodesic: true,
                strokeColor: '#0000FF',
                strokeOpacity: 0.5,
                strokeWeight: 1
            }));


            gridOverBox.setMap(map);

            qtrArray.push(gridOverBox);

            drawSmGridBox = true;

        }

    }

    function createMicroGrid(point){
        // Square limits
        var bottomLeftLat = Math.floor(point.lat() / smallGridOffset) * smallGridOffset;
        var bottomLeftLong = Math.floor(point.lng() / smallGridOffset) * smallGridOffset;

        var i;

        var smGridLineSquare = [
            new google.maps.LatLng(bottomLeftLat, bottomLeftLong), //lwr left
            new google.maps.LatLng(bottomLeftLat, bottomLeftLong + smallGridOffset), //lwr right
            new google.maps.LatLng(bottomLeftLat + smallGridOffset, bottomLeftLong + smallGridOffset), //upr right
            new google.maps.LatLng(bottomLeftLat + smallGridOffset, bottomLeftLong), //upr left
            new google.maps.LatLng(bottomLeftLat, bottomLeftLong)]; //lwr left

        // external.getData(event.latLng);
        if (drawSmGridBox == true) smGridOverBox = new google.maps.Polyline({
            path: smGridLineSquare,
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 0.5,
            strokeWeight: 1
        });
        smGridOverBox.setMap(map);
        map.setZoom(14);
    }


</script>
</body>

</html>

Answer 1

首先，我必须宣布

var gridOverBox = new google.maps.Polyline({
    path: [],
    geodesic: true,
    strokeColor: '#CC0099',
    strokeOpacity: 0.5,
    strokeWeight: 2
});

作为脚本全局，因此addListener方法可见。然后我添加了

google.maps.event.addListener(map, 'click', function (event) {
if (!google.maps.geometry.poly.containsLocation(event.latLng, gridOverBox)) 
    createGridBox(event.latLng)
    else
    createMicroGrid(event.latLng);
});

我知道脚本非常需要重构，但我是JS新手，这确实有效。

深入了解Google地图

1 个答案: