10

谷歌地图网络应用程序以非常好的方式对区域进行地理编码和勾勒。这可以通过 Google Maps JavaScript API 实现吗?网站示例:

https://maps.google.se/maps?q=sk%C3%A5ne&hl=sv&ie=UTF8&ll=57.1422,13.337402&spn=5.468408,16.907959&sll=39.290385,-76.612189&sspn=0.243658,0.523%374&hnear=Sk +l%C3%A4n&t=m&z=7

寻找瑞典斯科讷

瑞典斯科讷的轮廓和阴影

这是瑞典斯科讷县。Google Maps Web 应用程序用红色勾勒出它的轮廓并用粉红色着色。我想使用 Google Maps JavaScript API 对这样的区域进行地理编码和显示。如何?

4

1 回答 1

10

据我所知,Google Map API v3 尚未提供边界功能。

您需要知道边界才能塑造多边形。给定地址的地理编码器返回的信息不足以形成边界。您可能会在此处看到返回的信息。

斯德哥尔摩的边界是:'17.73966,59.66395|17.75651,59.61827|17.81771,59.58645|17.84347,59.53069|17.78465,59.49340|17.78277,59.38916|17.83277,59.36500|17.93215,59.33652|18.00736,59.34496|18.09139,59.33444|18.05722,59.39139|18.12000,59.45388|18.19508,59.45012|18.16562,59.41083|18.32826,59.39795|18.28659,59.41228|18.25945,59.44638|18.31722,59.47361|18.37333,59.46694|18.66638,59.59138|18.69979,59.64409|18.74555,59.68916|18.84139,59.71249|18.98569,59.71666|19.03222,59.71999|19.07965,59.76743|18.93472,59.78361|18.86472,59.79804|18.96922,59.86561|19.06545,59.83250|19.07056,59.88972|19.00722,59.91277|18.92972,59.92472|18.89000,59.95805|18.81722,60.07548|18.77666,60.11084|18.71139,60.12806|18.63277,60.14500|18.50743,60.15265|18.44805,59.99249|18.37334,59.86500|18.29055,59.83527|18.15472,59.79556|18.08111,59.74014|17.96055,59.70472|17.89694,59.68916|17.73966,59.66395'

总之,困难的部分是找到您想要在地图上绘制的城市的边界。我不确定是否有提供这些界限的免费服务。检查此Stackoverflow 问题以获取有关提供边界的站点的更多信息。

在下面的示例中,当您单击绘制斯德哥尔摩按钮时,斯德哥尔摩将绘制在地图上。

<html>
        
        <head>
            
            <head>
                <title>Area calculator - Outline a property on a google map and find its area</title>
                <title>Google Maps</title>
                <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
                <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en">
                    
                </script>
                <script type="text/javascript">
                    var map,
                    geocoder,
                    addressMarker,
                    mapCenter = new google.maps.LatLng(59.3426606750, 18.0736160278);
    
                    function initialize() {
                        map = new google.maps.Map(document.getElementById('map_canvas'), {
                            zoom: 7,
                            center: mapCenter,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        });
                        geocoder = new google.maps.Geocoder();
                    }
    
                    function showAddress() {
                        var address = $('#to').val();
                        geocoder.geocode({
                            'address': address
                        }, function (results, status) {
                            if (status == google.maps.GeocoderStatus.OK) {
                                map.setCenter(results[0].geometry.location);
                                var marker = new google.maps.Marker({
                                    map: map,
                                    position: results[0].geometry.location
                                });
                            } else {
                                alert("Geocode was not successful for the following reason: " + status);
                            }
                        });
                    }
    
    				function drawPolygon() {
    				
    				// stockholm boundaries
    					var boundaries = '17.73966,59.66395|17.75651,59.61827|17.81771,59.58645|17.84347,59.53069|17.78465,59.49340|17.78277,59.38916|17.83277,59.36500|17.93215,59.33652|18.00736,59.34496|18.09139,59.33444|18.05722,59.39139|18.12000,59.45388|18.19508,59.45012|18.16562,59.41083|18.32826,59.39795|18.28659,59.41228|18.25945,59.44638|18.31722,59.47361|18.37333,59.46694|18.66638,59.59138|18.69979,59.64409|18.74555,59.68916|18.84139,59.71249|18.98569,59.71666|19.03222,59.71999|19.07965,59.76743|18.93472,59.78361|18.86472,59.79804|18.96922,59.86561|19.06545,59.83250|19.07056,59.88972|19.00722,59.91277|18.92972,59.92472|18.89000,59.95805|18.81722,60.07548|18.77666,60.11084|18.71139,60.12806|18.63277,60.14500|18.50743,60.15265|18.44805,59.99249|18.37334,59.86500|18.29055,59.83527|18.15472,59.79556|18.08111,59.74014|17.96055,59.70472|17.89694,59.68916|17.73966,59.66395';
                    
                        var latLngArray = boundaries.split('|');
                        var points = [];
                        for (var i = 0; i < latLngArray.length; i++) {
                            pos = latLngArray[i].split(',');
                            points.push(new google.maps.LatLng(parseFloat(pos[1]), parseFloat(pos[0])));
                        }
    
                        var shape = new google.maps.Polygon({
                            paths: points,
                            strokeColor: '#ff0000',
                            strokeOpacity: 0.8,
                            strokeWeight: 2,
                            fillColor: '#ff0000',
                            fillOpacity: 0.35
                        });
    
                        shape.setMap(map);
                    }
    
    
                    $(document).ready(function () {
                        initialize();
                    });
    
                    $(document).on('click', '.show-address', function (e) {
                        e.preventDefault();
                        showAddress();
                    });
    				
    				$(document).on('click', '.draw-address', function (e) {
                        e.preventDefault();
                        drawPolygon();
                    });
                </script>
            </head>
            
            <body>
                <div id="basic-map">
                    <div id="map_canvas" style="height:150px;"></div>
                    <label for="to">Address</label>
                    <input type="text" id="to" value="Stockholm, Sweden" />
                    <a href="#" class="show-address">Show Address</a>
    				<a href="#" class="draw-address">Draw Stockholm</a>
                </div>
            </body>
    
    </html>

我希望这有帮助。

于 2013-03-03T12:28:54.717 回答