如何使用Knockout js和html显示Google地图

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

function MapViewModel() {
  var self = this;
  
  // 地图相关的数据
  self.map = null;
  self.markers = ko.observableArray([]);
  
  // 初始化地图
  self.initMap = function() {
    self.map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 37.7749, lng: -122.4194}, // 设置地图中心点坐标
      zoom: 12 // 设置地图缩放级别
    });
  };
  
  // 添加标记
  self.addMarker = function(location) {
    var marker = new google.maps.Marker({
      position: location,
      map: self.map
    });
    self.markers.push(marker);
  };
  
  // 移除所有标记
  self.clearMarkers = function() {
    self.markers().forEach(function(marker) {
      marker.setMap(null);
    });
    self.markers([]);
  };
}

// 创建ViewModel对象
var viewModel = new MapViewModel();
ko.applyBindings(viewModel);

<div id="map"></div>

<button data-bind="click: initMap">初始化地图</button>
<button data-bind="click: clearMarkers">清除标记</button>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>