Question

我正在编写一些Google Maps API v3代码，它似乎可以正常使用多个标记，但是当只有1时，它总是在地图的左上角绘制标记，只是在可见区域之外：< / p>

Screenshot of how the map looks

这是我的coffeescript代码：

class SimpleMap
    constructor: (div_id, lat = 40.783627, lng = -73.942583) ->
        # L.Icon.Default.imagePath = "/assets"
        @div_id = div_id
        @map_options = {center: new google.maps.LatLng(lat, lng), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}
        @markers = []
        @map = new google.maps.Map document.getElementById(div_id), @map_options
        @loadMarkers() # gets them and plots on the map
        @autoFit()
    loadMarkers: ->
        items = $(".grid-item[data-lat], .apartment[data-lat]")
        for item in items
        console.log "Adding #{item}"
        @addMarker(item)
    @autoFit()

    addMarker: (item) ->
        console.log "Adding marker"
        lat = $(item).attr("data-lat")
        lng = $(item).attr("data-lng")

        console.log "#{lat}, #{lng}"

        marker = new google.maps.Marker(
            position: new google.maps.LatLng lat, lng
            map: @map
            title: "This is my marker"
        )

        @markers.push marker

    autoFit: ->
        bounds = new google.maps.LatLngBounds()
        for marker in @markers
            bounds.extend marker.getPosition()
        @map.fitBounds bounds
        # if you leave out the below, the marker appears int he same position as in the screenshot (slightly off screen) but at the max zoom level. 
        listener = google.maps.event.addListener(@map, "idle", =>
            @map.setZoom 9 if @map.getZoom() > 8
            @map.setCenter @markers[0].getPosition()
            google.maps.event.removeListener listener
        )

地图似乎忽略了我设置setCenter(@markers[0].getPosition())的尝试。有什么想法吗？

Answer 1

发表评论后，只有当有1个标记时才会出现此问题。

基于这个事实，我会把问题解决到这一行：

@map.fitBounds bounds

当只有一个标记时，边界的NE角等于SW角。

在这种情况下，当你使用bounds作为fitBounds（） - 参数时，我注意到了意外的交互。

建议：

仅在至少有2个标记时才使用fitBounds（）。

Answer 2

我认为问题在于：

    bounds = new google.maps.LatLngBounds()
    for marker in @markers
        bounds.extend marker.getPosition()
    @map.fitBounds bounds

您要扩展当前地图边界以包含所有标记，但只有一个标记，边界将以标记将位于地图限制边界的方式延伸。

此致

Google Maps v3标记始终显示在左上角

2 个答案: