4

領域を色で「マーク」し、その領域に数字を配置しようとしています:

私はそれをここに示しました：

ここに画像の説明を入力

  • 数値は静的であり、変化しません。エリアマークは色が変わると思われます。エリア マーキングは、その周りの通り/道路を使用してエリアを囲むと仮定します (単純な円の描画だけではありません)。

私は自分自身をよりよく説明しようとします. それらの数字が私が訪問する必要がある地域であるとします.. 最初は赤で着色されています. 1 つのエリアを訪問すると、訪問を終了すると、マーキングが青色に変わります。

私が理にかなっていることを願っています。そのためのコードはありません..検索しようとしましたが、運がありません

  • 私はそれを単純化しようとします。色を変更しないようにドロップして静的にすることもできます。そのために、マップ上にいくつかの「エリア」を描画する必要がありますが、そのエリアを囲む通り/道路からのみです。つまり、2 点間に線を引かないということです。
4

1 に答える 1

3

これが1つの解決策です。もう 1 つはイメージ オーバーレイかもしれませんが、以下のソリューションの方が柔軟性が高いと思います。

必要になります: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/maplabel/src/maplabel-compiled.js

上記の javascript ファイルを取得したら、 mapPane.appendChild(a)をfloatPane.appendChild( a) に変更する必要もあります。これは、ポリゴンの上にテキストを取得するためです。次の JSFIDDLE でわかるように、テキストはポリゴンの下にあります。

解決策: http://jsfiddle.net/yN29Z/

上記の JavaScript は、以下のコードの map_label.js です。

私のポリゴンは最高ではありませんが、あなたはアイデアを得る.

更新: 以下のコードにポリゴンをクリックしたときの色の変更を追加しました。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Polygon Arrays</title>
    <style>
        html, body, #map-canvas
        {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script src="scripts/map_label.js" type="text/javascript"></script>
    <script>
        var map;
        var infoWindow;
        var mypolygon;

        function initialize() {
            var mapOptions = {
                zoom: 18,
                center: new google.maps.LatLng(50.71392, -1.983551),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            // Define the LatLng coordinates for the polygon.
            var triangleCoords = [
            new google.maps.LatLng(50.71433, -1.98392),
            new google.maps.LatLng(50.71393, -1.98239),
            new google.maps.LatLng(50.71388, -1.98226),
            new google.maps.LatLng(50.71377, -1.98246),
            new google.maps.LatLng(50.71332, -1.98296),
            new google.maps.LatLng(50.71334, -1.98324),
            new google.maps.LatLng(50.71374, -1.9845),
            new google.maps.LatLng(50.71436, -1.98389)];

            // Construct the polygon.
            mypolygon = new google.maps.Polygon({
                paths: triangleCoords,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 3,
                fillColor: '#FF0000',
                fillOpacity: 0.35
            });

            mypolygon.setMap(map);

            //Define position of label
            var myLatlng = new google.maps.LatLng(50.71392, -1.983551);

            var mapLabel = new MapLabel({
                text: '1',
                position: myLatlng,
                map: map,
                fontSize: 20,
                align: 'left'
            });
            mapLabel.set('position', myLatlng);

            // Add a listener for the click event.  You can expand this to change the color of the polygon
            google.maps.event.addListener(mypolygon, 'click', showArrays);

            infoWindow = new google.maps.InfoWindow();

        }

        /** @this {google.maps.Polygon} */
        function showArrays(event) {

        //Change the color here           
        mypolygon.setOptions({ fillColor: '#0000ff' }); 

        // Since this polygon has only one path, we can call getPath()
        // to return the MVCArray of LatLngs.
        var vertices = this.getPath();

        var contentString = '<b>My polygon</b><br>' +
      'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
      '<br>';

            // Iterate over the vertices.
            for (var i = 0; i < vertices.getLength(); i++) {
                var xy = vertices.getAt(i);
                contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' + xy.lng();
            }

            // Replace the info window's content and position.
            infoWindow.setContent(contentString);
            infoWindow.setPosition(event.latLng);

            infoWindow.open(map);
        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>
<body>
    <div id="map-canvas">
    </div>
</body>
</html>

私の情報源は次のとおりでした。

ポリゴンの場合: https://developers.google.com/maps/documentation/javascript/examples/polygon-arrays

ラベルの場合 Google マップ V3 でポリゴンの上に MapLabel を配置する

于 2013-11-08T15:06:23.053 に答える