google API 点连线

2023-08-09 17:09:40

这个是模拟的数据,用于测试,为了方便学习弹出框信息都是固定的,以及操作都不是写的循环,实际开发用 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: %;

            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: ,

                center: new google.maps.LatLng(, -),

                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: ,

                strokeWeight:

            });

            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 />&nbsp;&nbsp;';

        setTimeout(function () {

            var oPolygon = {};

            oPolygon[""] = new google.maps.Marker({

                position: flightPlanCoordinates[],

                map: map

            });

            var infowindow2 = new google.maps.InfoWindow({ content: html });

            google.maps.event.addListener(oPolygon[""], 'click', function () {

                infowindow2.open(map, oPolygon[""]);

            });

            infowindow2.open(map, oPolygon[""]);

            window.addMarker = oPolygon;

        }, );

        setTimeout(function () {

            var oPolygon = {};

            oPolygon[""] = new google.maps.Marker({

                position: flightPlanCoordinates[],

                map: map

            });

            clearMap(flightPlanCoordinates[]);

            var infowindow2 = new google.maps.InfoWindow({ content: html });

            google.maps.event.addListener(oPolygon[""], 'click', function () {

                infowindow2.open(map, oPolygon[""]);

            });

            infowindow2.open(map, oPolygon[""]);

            window.addMarker = oPolygon;

        }, );

        setTimeout(function () {

            var oPolygon = {};

            oPolygon[""] = new google.maps.Marker({

                position: flightPlanCoordinates[],

                map: map

            });

            clearMap(flightPlanCoordinates[]);

            setView(flightPlanCoordinates[]);

            var infowindow2 = new google.maps.InfoWindow({ content: html });

            google.maps.event.addListener(oPolygon[""], 'click', function () {

                infowindow2.open(map, oPolygon[""]);

            });

            infowindow2.open(map, oPolygon[""]);

            window.addMarker = oPolygon;

        }, );

        setTimeout(function () {

            var oPolygon = {};

            oPolygon[""] = new google.maps.Marker({

                position: flightPlanCoordinates[],

                map: map

            });

            setView(flightPlanCoordinates[]);

            clearMap(flightPlanCoordinates[]);

            var infowindow2 = new google.maps.InfoWindow({ content: html });

            google.maps.event.addListener(oPolygon[""], 'click', function () {

                infowindow2.open(map, oPolygon[""]);

            });

            infowindow2.open(map, oPolygon[""]);

            window.addMarker = oPolygon;

        }, );

        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 />  ';

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>

码农公寓

相关文章