Maps API Javascript v3如何通过单击鼠标来加载标记 [英] Maps API Javascript v3 how to load markers with a mouse click
本文介绍了Maps API Javascript v3如何通过单击鼠标来加载标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您好，我已经为此工作了一段时间，并四处张望.我想用鼠标单击按钮而不是地图加载时加载标记.我需要朝正确的方向稍加推动.我正在本地进行此操作，因此没有链接.谢谢你的帮助
Hello all I have been working on this for awhile and have looked all over. I want to load markers with a mouse click on a button instead of when the map loads. I need a little push in the right direction. I am doing this local so I don't have a link. thanks for any help
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>boats</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
</script>
</head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var infowindow = null;
function initialize() {
var washington = new google.maps.LatLng(47.7435, -122.1750);
var myOptions = {
zoom: 7,
center: washington,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
boats(map, seller);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
}
var seller = [
['joe boat', 48.0350,-122.2570, 4, 'This is in good shape.'],
['bobs boat', 48.7435, -122.1750, 2, 'This is in bad shape.'],
['bubas boat', 47.3435, -122.1750, 1, 'This is in ok shape'],
['daveys boat', 47.7435, -122.1750, 3, 'dont buy this one.']
];
function boats(map, markers) {
for (var i = 0; i < markers.length; i++) {
var seller = markers[i];
var sellerLatLng = new google.maps.LatLng(seller[1], seller[2]);
var marker = new google.maps.Marker({
position: sellerLatLng,
map: map,
title: seller[0],
zIndex: seller[3],
html: seller[4]
});
var contentString = "content";
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}
</script>
<body onLoad="initialize()">
<div id="map_canvas" style="width: 450px; height: 350px;">map div</div>
<button id="boats" onClick="boats()">Boats</button>
</body>
</html>
推荐答案
函数 initialize()以上:
var map = null;
在映射初始化之前将 var 删除，以读取:
Remove the var before map in initialize to read:
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
注释或删除船(地图，卖方)； 在初始化中
更改按钮以包含船功能的参数:
Change button to include the parameters of the boats function:
<button id="boats" onClick="boats(map, seller);">Boats</button>
完整的代码块:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>boats</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
</script>
</head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var infowindow = null;
var map = null;
function initialize() {
var washington = new google.maps.LatLng(47.7435, -122.1750);
var myOptions = {
zoom: 7,
center: washington,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
}
var seller = [
['joe boat', 48.0350,-122.2570, 4, 'This is in good shape.'],
['bobs boat', 48.7435, -122.1750, 2, 'This is in bad shape.'],
['bubas boat', 47.3435, -122.1750, 1, 'This is in ok shape'],
['daveys boat', 47.7435, -122.1750, 3, 'dont buy this one.']
];
function boats(map, markers) {
for (var i = 0; i < markers.length; i++) {
var seller = markers[i];
var sellerLatLng = new google.maps.LatLng(seller[1], seller[2]);
var marker = new google.maps.Marker({
position: sellerLatLng,
map: map,
title: seller[0],
zIndex: seller[3],
html: seller[4]
});
var contentString = "content";
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}
</script>
<body onLoad="initialize()">
<div id="map_canvas" style="width: 450px; height: 350px;">map div</div>
<button id="boats" onClick="boats(map, seller);">Boats</button>
</body>
</html>
这篇关于Maps API Javascript v3如何通过单击鼠标来加载标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
