Question

这似乎是一个常见的问题，但是如果最新的Google地图API在最初隐藏的容器中显示地图，是否有修复？

目前，当容器显示为块

时，我有映射工作

<div class="map-container">
    <div id="map"></div>
</div>

如果.map-container最初在CSS上有display:none;，我会使用Javascript来显示＆＃34;显示＆＃34;容器，然后我看到地图应该在哪里，背景为空白，上面有谷歌徽标。

有没有人找到任何好的解决方案？我唯一可以想到的尝试是首先加载它显示，然后用javascript在页面加载时隐藏它...我不想显然这样做，所以如果有另一种方式，那将是很好的听！

Answer 1

显示div后，在地图上触发resize事件。你还需要设置地图的中心（当地图没有大小时，中心是div的左上角......）

proof of concept fiddle

代码段

＆＃13;

html,
body,
#map,
.map-container {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
#map {
  display: none;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="dispmap" type="button" value="toggle" />
<div class="map-container">
  <div id="map">
    <div>

    </div>

＆＃13;

class Exercise: NSObject, NSCoding {
    var name: String
    var notes: String?
    private var workoutDiary = WorkoutDiary(diary: [])
    var currentWeights = Weights(heavy: 0)

init(name: String, notes: String?, workoutDiary: WorkoutDiary, weight: Int) {
    self.name = name
    self.notes = notes
    self.workoutDiary = workoutDiary
    self.currentWeights.heavy = weight
}

// MARK: Types

// weights of the exercise
struct Weights {
    var heavy = 0
    var warmup25: Int { return roundToFives(Double(heavy) * 0.25) }
    var warmup50: Int { return roundToFives(Double(heavy) * 0.50) }
}

struct PropertyKey {
    static let nameKey = "Exercise_name"
    static let notesKey = "Exercise_notes"
    static let workoutDiaryKey = "Exercise_workoutDiary"
    static let currentWeightsHeavyKey = "Exercise_currentWeightsHeavy"
}

func recordWorkout(date: String, weight: Int, repsFirstSet: Int, repsSecondSet: Int) {
    let dateFormatter = NSDateFormatter()
    dateFormatter.dateFormat = "yy-MM-dd"

    let newSets = [Set(weight: weight, repCount: repsFirstSet),Set(weight: weight, repCount: repsSecondSet)]
    let newWorkoutLogEntry = Workout(date: dateFormatter.dateFromString(date)!, sets: newSets)
    workoutDiary.addWorkout(newWorkoutLogEntry)

    //update weights
    self.currentWeights.heavy = weight
}

func getLastWorkout() -> Workout? {
    if let workout = workoutDiary.getLastWorkout() {
        return workout
    } else {
        return nil
    }
}

func getOldestWorkoutFromRange(dateRange: Int? = nil) -> Workout? {
    return workoutDiary.getOldestWorkoutFromRange(15)
}

func getBarWeightsString(targetWeight: Int) -> String {
    if targetWeight < 54 {
        return "Bar"
    } else {
        return calculatePlates(roundToFives(Double(targetWeight)))
    }
}

func getTotalVolumeIncrease(dateRange: Int) -> Int {
    let perfAnalyzer = PerformanceAnalyzer()
    return perfAnalyzer.calcTotalVolumeIncrease(workoutDiary, dateRange: dateRange)
}

// MARK: NSCoder

func encodeWithCoder(aCoder: NSCoder) {
    aCoder.encodeObject(name, forKey: PropertyKey.nameKey)
    aCoder.encodeObject(notes, forKey: PropertyKey.notesKey)
    aCoder.encodeObject(workoutDiary, forKey: PropertyKey.workoutDiaryKey)
    aCoder.encodeInteger(currentWeights.heavy, forKey: PropertyKey.currentWeightsHeavyKey)
}

required convenience init?(coder aDecoder: NSCoder) {
    let name = aDecoder.decodeObjectForKey(PropertyKey.nameKey) as! String
    let notes = aDecoder.decodeObjectForKey(PropertyKey.notesKey) as! String?
    let workoutDiary = aDecoder.decodeObjectForKey(PropertyKey.workoutDiaryKey) as! WorkoutDiary
    let currentWeights = aDecoder.decodeIntegerForKey(PropertyKey.currentWeightsHeavyKey)

    // Must call designated initializer.
    self.init(name: name, notes: notes, workoutDiary: workoutDiary, weight: currentWeights)
}
}

＆＃13;

Javascript：Google Maps API：如果地图加载到隐藏容器中，则为空白地图

1 个答案: