google API 点连线
这个是模拟的数据,用于测试,为了方便学习 弹出框信息都是固定的,以及操作都不是写的循环,实际开发用 setInterval 或者for 以减少冗余。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polylines</title>
<style>
html, body, #map-canvas
{
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
<script src="http://maps.google.com/maps/api/js?v=3.1&sensor=true" type="text/javascript"></script>
<script>
var flightPlanCoordinates;
var map;
var allMarker = [];
function initialize() {
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(0, -180),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#00FF33",
strokeOpacity: 1,
strokeWeight: 6
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
var html = '<b>鲁B 897HE</b><br />2013-12-22 08:47:11<br />里程:0.00公里<br />纬度:36.10631,经度:120.36730<br />方向:正东,速度:16.00公里/小时<br /> ';
setTimeout(function () {
var oPolygon = {};
oPolygon["1"] = new google.maps.Marker({
position: flightPlanCoordinates[0],
map: map
});
var infowindow2 = new google.maps.InfoWindow({ content: html });
google.maps.event.addListener(oPolygon["1"], 'click', function () {
infowindow2.open(map, oPolygon["1"]);
});
infowindow2.open(map, oPolygon["1"]);
window.addMarker = oPolygon;
}, 2000);
setTimeout(function () {
var oPolygon = {};
oPolygon["2"] = new google.maps.Marker({
position: flightPlanCoordinates[1],
map: map
});
clearMap(flightPlanCoordinates[1]);
var infowindow2 = new google.maps.InfoWindow({ content: html });
google.maps.event.addListener(oPolygon["2"], 'click', function () {
infowindow2.open(map, oPolygon["2"]);
});
infowindow2.open(map, oPolygon["2"]);
window.addMarker = oPolygon;
}, 4000);
setTimeout(function () {
var oPolygon = {};
oPolygon["3"] = new google.maps.Marker({
position: flightPlanCoordinates[2],
map: map
});
clearMap(flightPlanCoordinates[2]);
setView(flightPlanCoordinates[2]);
var infowindow2 = new google.maps.InfoWindow({ content: html });
google.maps.event.addListener(oPolygon["3"], 'click', function () {
infowindow2.open(map, oPolygon["3"]);
});
infowindow2.open(map, oPolygon["3"]);
window.addMarker = oPolygon;
}, 6000);
setTimeout(function () {
var oPolygon = {};
oPolygon["4"] = new google.maps.Marker({
position: flightPlanCoordinates[3],
map: map
});
setView(flightPlanCoordinates[3]);
clearMap(flightPlanCoordinates[3]);
var infowindow2 = new google.maps.InfoWindow({ content: html });
google.maps.event.addListener(oPolygon["4"], 'click', function () {
infowindow2.open(map, oPolygon["4"]);
});
infowindow2.open(map, oPolygon["4"]);
window.addMarker = oPolygon;
}, 8000);
function setView(obj) {
var LatLngBounds = map.getBounds();
var isMap = LatLngBounds.contains(obj);
if (!isMap) {
map.panTo(obj);
}
}
function clearMap() {
for (var i in window.addMarker) {
window.addMarker[i].setMap(null);
}
}
</script>
</head>
<body>
<div id="map-canvas">
</div>
</body>
</html>
改进和优化
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polylines</title>
<style>
html, body, #map-canvas
{
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
<script src="http://maps.google.com/maps/api/js?v=3.1&sensor=true" type="text/javascript"></script>
<script>
var flightPlanCoordinates;
var map;
var allMarker = [];
function initialize() {
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(0, -180),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#00FF33",
strokeOpacity: 1,
strokeWeight: 6
});
//flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
var html = '<b>鲁B 897HE</b><br />2013-12-22 08:47:11<br />里程:0.00公里<br />纬度:36.10631,经度:120.36730<br />方向:正东,速度:16.00公里/小时<br /> ';
var index = 0;
var newMarkers = [], lastnewMarker = [], infoMsgList=[];
var ss = setInterval(function () {
if (index > flightPlanCoordinates.length - 1) {
clearInterval(ss);
return;
}
var newMarker = new google.maps.Marker({
position: flightPlanCoordinates[index],
map: map
});
var infoMsg = new google.maps.InfoWindow({ content: html });
google.maps.event.addListener(newMarker, 'click', function () {
infoMsg.open(map, newMarker);
});
infoMsg.open(map, newMarker);
newMarkers.push(newMarker);
infoMsgList.push(infoMsg);
if (index > 0) {
newMarkers[index - 1].setIcon("green_01.gif");
infoMsgList[index - 1].close();
}
index++;
}, 2000);
function setView(obj) {
var LatLngBounds = map.getBounds();
var isMap = LatLngBounds.contains(obj);
if (!isMap) {
map.panTo(obj);
}
}
function clearMap() {
for (var i in window.addMarker) {
window.addMarker[i].setMap(null);
}
}
</script>
</head>
<body>
<div id="map-canvas">
</div>
</body>
</html>
