Question

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

我在这里说明了一遍：

enter image description here

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

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

希望我有道理。我没有任何代码..我试图搜索它但没有运气

我会尽量简化它，我可以设法让颜色不变，也让它变得静止为此，我需要在地图上绘制一些“区域”但来自该区域周围的街道/道路只要。我的意思是不要在两点之间画一条线。

Answer 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

标签 Placing a MapLabel on top of a Polygon in Google Maps V3

如何从周围的街道/道路上“标记”某个区域并在该区域中放置一个数字

1 个答案: