Question

使用哪种谷歌地图API在地图上选择区域选择鼠标？我已将鼠标图像附加到事件上。看到较暗的部分。在鼠标悬停在不同区域时会自动选择。以下是实施该功能的网站：http://www.apartmentlist.com/ny/new-york#map

enter image description here

如何在地图上定义区域？

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？我敢打赌，这就是他们添加strokeWeight: 0的原因。他们可能正在调试这个，没有注意到他们拼错了strokeOpacity并添加了strokeWeight: 0以通过给出笔划零宽度来修复它。如果他们修复了拼写错误，那就没必要了。

getLatLngs函数中还有另一个错误。它所说的_chain应该是_.chain。据推测，getLatLngs()永远不会在他们的代码中被调用，或者他们会遇到这个错误。

哪个谷歌地图API用于在区域选择上渲染此鼠标

1 个答案: