4

尝试用颜色“标记”一个区域并在该区域放置一个数字：

我在这里说明了它：

在此处输入图像描述

  • 数字是静态的，不会改变。区域标记应该改变颜色。并且区域标记假设使用周围的街道/道路围绕该区域（不仅仅是简单的圆形图）

我会尝试更好地解释自己，假设这些数字是我需要访问的区域.. 最初它们是红色的。如果我访问一个区域.. 那么当我完成访问时，标记会变成蓝色。

希望我说得通。我没有任何代码..我试图搜索它但没有运气

  • 我会尽量简化它，我可以设法去掉颜色以不改变并使其保持静止，因为我需要在地图上绘制一些“区域” ，但仅从该区域周围的街道/道路绘制。我的意思是不要在两点之间画一条线。
4

1 回答 1

3

这是一种解决方案。另一个可能是图像叠加，但我相信下面的解决方案更灵活。

您将需要：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 Maps V3 中将 MapLabel 放置在多边形顶部的标签

于 2013-11-08T15:06:23.053 回答