我的应用程序使用的是 Google map API 3。
所以我接下来要做的就是。 加载页面时,我将获得以下格式的位置数组:
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
首先,我想为每个位置添加标记
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
标记上的图片:
var image = new google.maps.MarkerImage("images/truck3.png",
new google.maps.Size(32.0, 37.0),
new google.maps.Point(0, 0),
new google.maps.Point(16.0, 18.0)
);
var shadow = new google.maps.MarkerImage("images/shadow-truck3.png",
new google.maps.Size(51.0, 37.0),
new google.maps.Point(0, 0),
new google.maps.Point(16.0, 18.0)
);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
icon: image,
shadow: shadow,
title: 'Click to zoom'
});
这应该缩放在屏幕中心初始化的所有标记,但仅在开始时缩放一次,稍后中心不会被使用,因为用户可能会在 map 上查看其他内容。
我希望标记始终移动,所以也许我需要添加一些事件处理程序来始终获取新位置?
然后是当您单击标记时,您被缩放并且标记仍在移动(获取新位置),但现在我需要使用将在 php 数组中发送的 ID,以便我可以调用一些 php 函数使用该参数。
之后,当用户单击侧面的按钮时,我希望能够到达请求的开头,这意味着在屏幕中央加载标记。
点击部分:
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(13);
map.setCenter(marker.getPosition());
google.maps.event.addListener(map, 'center_changed', function() {
// 1 seconds after the center of the map has changed, pan back to the
// marker.
window.setTimeout(function() {
map.panTo(marker.getPosition());
}, 1000);
});
});
}
所以基本上我告诉了你们我想要实现的一切,我相信你们很多人都做了同样的事情。这些是来自许多来源的代码的一部分,我需要使它们协同工作并添加一些较小的新功能,如我上面所写。
谢谢
最佳答案
所以听起来您正在通过每隔几秒重复一次的数据库查询来检索 locations
变量。在此演示中,我使用 JSON 来检索数据,并更新位置或创建标记(如果标记尚不存在)。
http://freezoo.alwaysdata.net/truck2.html
function updateTrucks() {
$.ajax({
url: "gettruck.php",
cache: false,
dataType: 'json',
data: {},
error: function(jqxhr, textStatus, errorThrown) {
alert("Error: " + textStatus + " " + errorThrown);
},
success: function(data) {
for(var i = 0; i < data.results.length; i++) {
if(trucks.hasOwnProperty(data.results[i].id)) {
// update position
trucks[data.results[i].id].setPosition(new google.maps.LatLng(
parseFloat(data.results[i].lat),
parseFloat(data.results[i].lng)));
trucks[data.results[i].id].speed = data.results[i].speed;
}
else {
// create new marker
trucks[data.results[i].id] = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(
parseFloat(data.results[i].lat),
parseFloat(data.results[i].lng)),
title: data.results[i].name,
id: data.results[i].id
});
在您的应用程序中,数据库将通过某种方式更新,这里,数据库是静态的,并且移动(用于演示)是使用 PHP rand
人为创建的,因此每隔几秒标记就会出现在不同地点。
header("Content-type: application/json");
echo '{ "results" : [ ';
$gettruck_result = $dbh->query("SELECT * FROM `truck`");
$result_array = array();
foreach($gettruck_result as $row) {
$newlat = $row['lat'] + (0.0025 * rand(-3,3));
$newlng = $row['lng'] + (0.0025 * rand(-3,3));
$speed = $row['speed'] + rand(1,8);
$row_object = '{';
$row_object .= '"id": "' . $row['id'] . '", ';
$row_object .= '"speed": "' . $speed . '", ';
$row_object .= '"name": "' . $row['name'] . '", ';
$row_object .= '"lat": "' . $newlat . '", ';
$row_object .= '"lng": "' . $newlng . '"';
$row_object .= '}';
$result_array[] = $row_object;
}
$result_str = implode(", ", $result_array);
echo $result_str;
echo " ] }";
跟踪标记是通过两个监听器完成的:
google.maps.event.addListener(trucks[data.results[i].id], 'position_changed', function() {
if(typeof tracked !== "undefined") {
if(this.id == tracked.id) {
map.panTo(this.getPosition());
$("#speed").val(this.speed);
}
}
});
google.maps.event.addListener(trucks[data.results[i].id], 'click', function() {
$("#trackedId").val(this.id);
map.setZoom(13);
map.setCenter(this.getPosition());
tracked = this;
});
关于javascript - 需要 Google map API 3 帮助,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10950626/