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

Question

哪个谷歌地图 API 用于将鼠标悬停在地图上的区域选择上？我附上了鼠标悬停事件的图像。查看较暗的部分。鼠标悬停在不同区域上时会自动选择。这是实现该功能的网站：http: //www.apartmentlist.com/ny/new-york#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
        }
    },

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

该功能还有另一个错误getLatLngs。_chain它说它应该在哪里_.chain。大概getLatLngs()从来没有在他们的代码中调用过，否则他们会遇到这个错误。