使用Google Map的多邊形顏色

Question

我嘗試在Google地圖中設置多邊形顏色。

<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

多邊形需要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是經度，緯度和高度。

使用Google Map的多邊形顏色

問題描述

1 個解決方案

解決方案1
0 2013-09-25 14:01:53

使用Google Map的多邊形顏色

問題描述

1 個解決方案

解決方案1 0 2013-09-25 14:01:53

解決方案1
0 2013-09-25 14:01:53