javascript - 哪个谷歌地图 API 用于在区域选择上呈现此鼠标

Question

哪个 google map API 用于呈现鼠标悬停在 map 上的区域选择？我附上了鼠标悬停事件的图像。看到较暗的部分。将鼠标悬停在不同的区域上会自动选择。这是实现该功能的站点:http://www.apartmentlist.com/ny/new-york#map

如何在 map 上定义区域？

Answer 1

它使用 google.maps.Polygon() 以零不透明度绘制每个多边形，然后监听这些多边形上的 mouseover 事件以设置非零不透明度, 和 mouseout 将不透明度设置回零。

这是他们执行此操作的代码部分:

function makeWidgets(maps) {

    function AreaPolygon(kwargs) {
        _.assertKeys(kwargs, "id", "coordinates", "type", "zoom"),
        this.id = kwargs.id,
        this.polygon = this.makePolygon(kwargs.coordinates),
        this.type = kwargs.type,
        this.zoom = kwargs.zoom, this.bindEvents()
    }
    return _.extend(AreaPolygon.prototype, {
        options: {
            mouseover: {
                strokeWeight: 1,
                strokeOpacity: .5,
                fillOpacity: .2
            },
            mouseout: {
                strokeWeight: 0,
                strokOpacity: 0,
                fillOpacity: 0
            }
        },
        polygonStyles: {
            fillColor: "#000",
            strokeColor: "#000"
        },
        polygonsState: "mouseout",
        makePolygon: function(coordinates) {
            var paths = this.makePaths(coordinates),
                kwargs = _.extend({
                    paths: paths
                }, this.polygonStyles, this.options.mouseout);
            return new maps.Polygon(kwargs)
        },
        setOptions: function() {
            return this.polygon.setOptions(
                this.options[this.polygonsState]
            ),
            this
        },
        getMap: function() {
            return this.map
        },
        setMap: function(map) {
            return map !== this.map &&
            (this.map = map, this.polygon.setMap(map)),
            this
        },
        getLatLngs: function() {
            return _chain(this.polygon.getPaths())
                .invoke("getArray")
                .flatten()
                .invoke("getArray")
                .flatten()
                .value()
        },
        onMouseOver: function() {
            app.broker.modify("view:map:polygon:current", function() {
                return this.id
            }, this)
        },
        onMouseOut: function() {
            app.broker.modify("view:map:polygon:current", function(current) {
                return current === this.id ? null : current
            }, this)
        },
        onClickMarker: function(e) {
            this.onClick(e.latLng)
        },
        eventSpec: {
            click: "onClickMarker",
            mouseover: "onMouseOver",
            mouseout: "onMouseOut"
        },
        bindEvents: function() {
            return this.bindings || (this.bindings = _.map(this.eventSpec, function(fname, event) {
                return maps.event.addListener(this.polygon, event, _.bind(this[fname], this))
            }, this)), this
        },
        cancelEvents: function() {
            return _.each(this.bindings, function(listener) {
                maps.event.removeListener(listener)
            }, this), delete this.bindings, this
        },
        onClick: function(point) {
            app.broker.set("view:map:user_move", !1);
            if ( !! this.map && app.broker.get("view:map:mode") === "clusters") {
                var currentZoom = this.map.getZoom(),
                    defaultTargetZoom =
                        app.broker.get("view:map:polygon:default_target_zoom"),
                    targetZoom = this.zoom.target || defaultTargetZoom,
                    targetType = this.type;
                targetType === "Neighborhood" ?
                    targetZoom = Math.min(currentZoom + 2, defaultTargetZoom) :
                    targetZoom <= currentZoom &&
                        (targetZoom = Math.min(currentZoom + 1, defaultTargetZoom)),
                    app.broker.setAll({ "user:position": {
                        center: point.toJSON(),
                        zoom: targetZoom
                    },
                    "view:map:polygon:clicked_id": this.id
                })
            }
            return this
        },
        getBounds: function() {
            return maps.LatLngBounds.fromLatLngs(this.getLatLngs())
        },
        getBoundsCenter: function() {
            return this.getBounds().getCenter()
        },
        isPoint: function(arr) {
            return arr.length === 2 && _.all(arr, _.isNumber)
        },
        makePaths: function(coordinates) {
            return this.isPoint(coordinates) ?
                new maps.LatLng(coordinates[1], coordinates[0]) :
                _.map(coordinates, this.makePaths, this)
        },
        destroy: function() {
            return this.setMap(null), this.cancelEvents(), this
        }
    }), {
        AreaPolygon: AreaPolygon,
        CountLabel: CountLabel,
        MapTooltip: MapTooltip
    }
}

这部分很有趣:

    options: {
        mouseover: {
            strokeWeight: 1,
            strokeOpacity: .5,
            fillOpacity: .2
        },
        mouseout: {
            strokeWeight: 0,
            strokOpacity: 0,
            fillOpacity: 0
        }
    },

看到 mouseout 部分拼写错误的 strokOpacity 了吗？我敢打赌这就是他们添加 strokeWeight: 0 的原因。他们可能正在对此进行调试，没有注意到他们拼错了 strokeOpacity 并添加了 strokeWeight: 0 以通过给笔画零宽度来修复它。如果他们修复了拼写错误，就没有必要了。

getLatLngs 函数中还有另一个错误。它说 _chain 的地方应该是 _.chain。据推测，他们的代码中从未调用过 getLatLngs()，否则他们会遇到此错误。