Question

我尝试在谷歌地图中设置多边形颜色..

<html>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script>

    <script>
        var x=new google.maps.LatLng(-34.397, 150.644);

        var a=new google.maps.LatLng(12.9667,77.5667);
        var b=new google.maps.LatLng(13.0839,80.2700);
        var c=new google.maps.LatLng(11.9310,79.7852);
        var lat_point=new google.maps.LatLng('76.96332200000001,10.991397,0 76.963318,10.991423,0 76.96339500000001,10.991436,0 76.96339999999999,10.991411,0 76.96332200000001,10.991397,0 ');
        function initialize() {

           var options = {
                center: x,
                zoom:4,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("canvas"), options);
            var parser = new geoXML3.parser({map: map, processStyles: true});
            parser.parse("sample.kml"); 

            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.open("GET","sample.kml",false);
            xmlhttp.send();
            xmlDoc=xmlhttp.responseXML;

            var fff=xmlDoc.getElementsByTagName("topo")[0];

            y=fff.childNodes[0];
            //alert(y.nodeValue);
            //document.write(y.nodeValue);

            var myTrip=[a,b,c,lat_point];

            var flightPath=new google.maps.Polygon({
                path:myTrip,
                strokeColor:"#01700A",
                strokeOpacity:0.8,
                strokeWeight:2,
                fillColor:"#01700A",
                fillOpacity:0.4
            });

            flightPath.setMap(map);

        }

        $(document).ready(initialize);

    </script>

    <div id="canvas" style="width:500px; height:500px"></div>

<html>

成功设置了前3个纬度和经度点多边形颜色。

我遇到了麻烦

lat_point=new google.maps.LatLng('76.96332200000001,10.991397,0 76.963318,10.991423,0 76.96339500000001,10.991436,0 76.96339999999999,10.991411,0 76.96332200000001,10.991397,0 ');

如何解决？

Answer 1

Polygon需要一个google.maps.LatLng对象数组作为其路径，而不是字符串。

lat_point=new google.maps.LatLng('76.96332200000001,10.991397,0 76.963318,10.991423,0 76.96339500000001,10.991436,0 76.96339999999999,10.991411,0 76.96332200000001,10.991397,0 ');

应该是：

lat_point=[new google.maps.LatLng(10.991397,76.96332200000001),
       new google.maps.LatLng(10.991423,76.963318),
       new google.maps.LatLng(10.991436,76.96339500000001),
       new google.maps.LatLng(10.991411,76.96339999999999),
       new google.maps.LatLng(10.991397,76.96332200000001)];

请注意，我假设字符串来自KML并且反转经度和纬度，google.maps.LatLng对象参数是纬度，经度，KML是经度，纬度，海拔。

使用谷歌地图的多边形颜色

1 个答案: