gpt4 book ai didi

javascript - 如何使用 Knockout js 和 html 显示 Google map

转载 作者:行者123 更新时间:2023-12-03 06:08:44 26 4
gpt4 key购买 nike

我是js新手,对Knockout知之甚少。我已经尝试了一些教程,但仍然没有意义。不管怎样,我想知道如何使用 Knockout 获得与下面的 HTML 相同的结果。

<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 100%;
height: 800px;
}
</style>
</head>
<body>
<h3>Map</h3>
<div id="map"></div>
<script type='text/javascript' src='knockout-3.3.0.js'></script>
<script>
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {lat: 39.962386, lng: -82.999563},
zoom: 14
});
var marker1 = new google.maps.Marker({
position: {lat: 39.969819, lng: -83.01012},
animation: google.maps.Animation.BOUNCE,
map: map,
title: 'EXPRESS LIVE!'
});
var marker2 = new google.maps.Marker({
position: {lat: 39.969424, lng: -83.005915},
animation: google.maps.Animation.BOUNCE,
map: map,
title: 'Nationwide Arena'
});
var marker3 = new google.maps.Marker({
position: {lat: 39.964425, lng: -82.987804},
animation: google.maps.Animation.BOUNCE,
map: map,
title: 'Columbus Museum of Art'
});
var marker4 = new google.maps.Marker({
position: {lat: 39.959688, lng: -83.007202},
animation: google.maps.Animation.BOUNCE,
map: map,
title: 'COSI'
});
var marker5 = new google.maps.Marker({
position: {lat: 39.969161, lng: -82.987289},
animation: google.maps.Animation.BOUNCE,
map: map,
title: 'Columbus State College'
});
var marker6 = new google.maps.Marker({
position: {lat: 39.946266, lng: -82.991023},
animation: google.maps.Animation.BOUNCE,
map: map,
title: "Schmidt's Sausage Haus und Restaurant"
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAzDEepTI6qMIoZ3OGMe03ZWpmrIakZCwc&callback=initMap">
</script>
</body>
</html>

我已经查看了该网站上有关该主题的多篇帖子,但我找不到任何适合我的答案。

最佳答案

我将创建一个绑定(bind)处理程序来完成对外部库和模板操作的所有引用。

/**
* Decorates a div with a map and adds marker points
*/

ko.bindingHandlers.googleMap = {

init(mapDiv, valueAccessor) {
let bindingData = ko.unwrap(valueAccessor()) || {},
map = new google.maps.Map(mapDiv, {
center: {
lat: bindingData.centerX,
lng: bindingData.centerY
},
zoom: bindingData.zoom
}),
markers = _.map(bindingData.markers,function (data) {
return new google.maps.Marker(data);
});

// do some more stuff or hook into markers
// you might want to subscribe to the markers collection
// if you make it an observable array
}

};

在模板中引用它类似于:

<html>
<body>
<div class='map-div' data-bind="googleMap:googleMapData"></div>
</body>
</html>

然后在 viewModel 中指定如下内容:

var ViewModel = function() {
this.googleMapData = ko.observable({
centerX: 39.962386,
centerY: -82.999563,
zoom: 14,
markers: [{
position: {lat: 39.964425, lng: -82.987804},
animation: google.maps.Animation.BOUNCE,
map: map,
title: 'Columbus Museum of Art'
},
...
]
});
}

ko.applyBindings(new ViewModel());

Added a Fiddle to help - 只需替换包含的 map API 库中的 API key 即可。

关于javascript - 如何使用 Knockout js 和 html 显示 Google map ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39417762/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com