如何从周围的街道/道路上“标记”一个区域，并在该区域中输入一个数字 [英] How to 'mark' an area from the streets/roads around it and place a number in that area

问题描述

我已经在这里说明了它：

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

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

希望我有道理。我没有任何代码..我试图寻找它，但没有运气

• 我会尽量简化它，我可以设法放弃颜色不变，并使其静态
  ，因为我需要在地图上绘制一些区域但，来自该区域周围的街道/道路$仅限b $ b。我的意思是不要在两点之间画一条线。
。另一个可能是图像叠加，但我相信下面的解决方案更加灵活。




您需要： 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中的代码如下。



我的多边形不是最好的，但你明白了。


$ b

UPDATE ：在点击下面代码中的多边形时添加了颜色更改。



 <！DOCTYPE html> 
< html> 
< head> 
< meta name =viewportcontent =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.jstype =text / javascript>< / script> 
< script> 
 var map; 
 var infoWindow; 
 var mypolygon; 
 
函数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）; 
 
 //定义多边形的LatLng坐标。 
 var triangleCoords = [
 new google.maps.LatLng（50.71433，-1.98392），
 google.maps.LatLng（50.71393，-1.98239），
 google.maps .LatLng（50.71388，-1.98226），
新google.maps.LatLng（50.71377，-1.98246），
新google.maps.LatLng（50.71332，-1.98296），
新谷歌。 maps.LatLng（50.71334，-1.98324），
 new google.maps.LatLng（50.71374，-1.9845），
 new google.maps.LatLng（50.71436，-1.98389）]; 
 
 //构造多边形。 
 mypolygon = new google.maps.Polygon（{
 paths：triangleCoords，
 strokeColor：'＃FF0000'，
 strokeOpacity：0.8，
 strokeWeight：3，
 fillColor：'＃FF0000'，
 fillOpacity：0.35 
}）; 
 
 mypolygon.setMap（map）; 
 
 //定义标签的位置
 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）; 
 
 //为click事件添加一个侦听器。您可以展开以更改多边形的颜色
 google.maps.event.addListener（mypolygon，'click'，showArrays）; 
 
 infoWindow = new google.maps.InfoWindow（）; 
 
 
 $ b @this {google.maps.Polygon} * / 
 function showArrays（event）{
 
 / /改变颜色
 mypolygon.setOptions（{fillColor：'＃0000ff'}）; 
 
 //由于这个多边形只有一个路径，我们可以调用getPath（）
 //来返回LatLng的MVCArray。 
 var vertices = this.getPath（）; 
 
 var contentString ='< b>我的多边形< / b>< br>'+ 
'点击位置：< br>'+ event.latLng.lat（）+ '，'+ event.latLng.lng（）+ 
'< br>'; 
 
 //遍历顶点。 （var i = 0; i< vertices.getLength（）; i ++）{
 var xy = vertices.getAt（i）; 
 contentString + ='< br>'+'坐标'+ i +'：< br>'+ xy.lat（）+'，'+ xy.lng（）; 
} 
 
 //替换信息窗口的内容和位置。 
 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-array





标签
在Google Maps V3中将MapLabel放置在Polygon上面




Trying to 'mark' an area with color and place a number in that area:

I have illustrated it here:

• the numbers are static and don't change. The area mark is suppose to change colors. and the area marking suppose to surround the area using the streets/roads around it(not just plain circle drawing)

I will try to explain myself better, Suppose those numbers are areas that I need to visit.. initially they are colored with red. If I visit one area .. then when i finish the visit the marking is turning to blue color.

Hope I make sense. I don't have any code for that .. I tried to search for it but with no luck

• I'll try to simplify it, I can manage to drop the colors to not change and make it static also for that I need to draw on the map some 'areas' but from the streets/roads surrounding the area only. by that I mean not to draw a line between two points.

解决方案

Here is one solution. Another might be an image overlay but I believe the solution below is more flexible.

You will need: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/maplabel/src/maplabel-compiled.js

In the above javascript file once you have it, you will also need to change mapPane.appendChild(a) to floatPane.appendChild(a) this is to get the text on top of the polygon. As you will see in the following JSFIDDLE the text is underneath the polygon.

SOLUTION: http://jsfiddle.net/yN29Z/

The above javascript is map_label.js in the code below.

My polygon is not the best but you get the idea.

UPDATE: Added color change on clicking the polygon in to code below.

<!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>

My sources were as follows.

For the polygon: https :// developers.google.com/maps/documentation/javascript/examples/polygon-arrays

For the label Placing a MapLabel on top of a Polygon in Google Maps V3

这篇关于如何从周围的街道/道路上“标记”一个区域，并在该区域中输入一个数字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！