Google地图突出显示特定区域

时间:2014-01-09 09:35:49

标签: google-maps google-maps-api-3

如何突出显示Google地图中的特定区域?如果您访问maps.google.com并搜索您的位置,虚线会突出显示该区域。如何在Google Maps API中执行相同操作?

1 个答案:

答案 0 :(得分:3)

您想在地图上的某个区域周围画一条线?使用Polyline class

更新:如果您想要一个风格漂亮的半透明叠加层,例如http://zumper.com上的邻居示例,您应该使用Polygon class

这是他们的JS样本,它可以让你知道他们是如何做到的。

makeHood: function (hood, hoodId) {
            var hoodPoly = HOOD_CACHE[hoodId];
            if (hoodPoly) {
                hoodPoly.setOptions(hoodPolyStandardOptions)
            } else {
                var coordinates = [];
                var markerBounds = hood["bounds"][0]["exterior"];
                for (var i = 0, len = markerBounds.length; i < len; ++i) {
                    coordinates.push(new google.maps.LatLng(markerBounds[i][3], markerBounds[i][0]))
                }
                var options = angular.copy(hoodPolyInitialOptions);
                options.paths = coordinates;
                hoodPoly = new google.maps.Polygon(options);
                hoodPoly.name = hood["name"];
                hoodPoly.id = hoodId;
                hoodPoly.point = new google.maps.LatLng(hood["lat"], hood["lng"]);
                hoodPoly.mouseoverOptions = hoodPolyMouseoverOptions;
                hoodPoly.standardOptions = hoodPolyStandardOptions;
                var box = hood["box"];
                hoodPoly.box = new google.maps.LatLngBounds(new google.maps.LatLng(box[1], box[0]), new google.maps.LatLng(box[3], box[2]));
                hoodPoly.getPosition = angular.bind(hoodPoly, function () {
                    return this.point
                });
                HOOD_CACHE[hoodId] = hoodPoly
            }
            hoodPoly.hood = hood;
            return hoodPoly
        },