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

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>

google API 点连线的更多相关文章

  1. 借用Google API在线生成网站二维码地址方法

    二维码其实很早就出现了,在国外很多年前就已经在应用了,国内这两年才开始异常的火爆,智能手机的发展,以及微博.微信等移动应用带动了二维码的普及.那么,如果为网址在线生成二维码呢?下面我们就来介绍一下Go ...

  2. [Java] - Google API调用

    由于Google已经完成被墙,要上Google必需使用代理或VPN. 这里使用的是Google的GoAgent代理做开发.(如何使用GoAgent,这里不写了,忽略500字.....) 本地测试的Go ...

  3. PHP二维码生成的方法(google APi,PHP类库,libqrencode等)

    原文地址: http://blog.csdn.net/liuxinmingcode/article/details/7910975 ================================== ...

  4. Google API在线生成二维码的方法

    1.先看一个实例,是用Google API生成西部e网的网站地址www.weste.net二维码的方法: http://chart.apis.google.com/chart?cht=qr&c ...

  5. 缺少google api密钥,因此chromium的部分功能将无法使用”的解决办法

            使用Chromium时会遇到 "缺少google api密钥,因此chromium的部分功能将无法使用"提示,google了一下 setx Google_API_K ...

  6. 利用google api生成二维码名片例子

    二维条码/二维码可以分为堆叠式/行排式二维条码和矩阵式二维条码.堆叠式/行排式二维条码形态上是由多行短截的一维条码堆叠而成:矩阵式二维条码以矩阵的形式组成,在矩阵相应元素位置上用“点”表示二进制“1” ...

  7. google API的.NET库

    Goolge发布了一个新的google API .NET库,是一个Portable Class Library,所以无论是.NET,WinTRy,Windows Phone或者Silverlight都 ...

  8. Google API v3 设置Icon问题处理

    1.查看API实现 //虽然比较符合API实现的思想但这个没法; //会产生Uncaught TypeError: undefined is not a function //google API n ...

  9. ecshop使用Google API及OAuth2.0登录授权(PHP)

    一.申请clientID https://console.developers.google.com/project 二.开启Google+ API权限 https://console.develop ...

随机推荐

  1. php概率算法（转）

    这是一个很经典的概率算法函数: function get_rand($proArr) { $result = ''; //概率数组的总概率精度 $proSum = array_sum($proArr) ...

  2. CentOS7 mono环境连接WCF

    总结下在mono环境中使用Wcf出现的问题以帮助你快速解决问题. 1.昨天在内网Centos7下部署由Windows上开发完成的ASP.NET Mvc4项目,部署到mono环境下遇到了无法找到endp ...

  3. 关于shell脚本时遇value too great for base (error token is "08")

    今天在书写一个定时cp脚本时遇到了一个问题,value too great for base (error token is "08") 在网上查看到原来是以0开头的数字 系统会默 ...

  4. hdu3555 Bomb （记忆化搜索 数位DP）

    http://acm.hdu.edu.cn/showproblem.php?pid=3555 Bomb Time Limit: 2000/1000 MS (Java/Others)    Memory ...

  5. [译]angularjs directive design made easy

    原文: http://seanhess.github.io/2013/10/14/angularjs-directive-design.html AngularJS directives很酷 Angu ...

  6. WCF--提示:异常消息为“传入消息的消息格式不应为“Raw”。此操作的消息格式应为 'Xml', 'Json'。

    Ajax调用WCF服务... 本来用 // $.getJSON("http://localhost:16625/Service1.svc/Article_GetInfo", { } ...

  7. Excel 使用CHIINV函数和GAMMA.DIST函数绘制卡方分布

    1.使用CHIINV(概率,自由度),在Excel中绘制卡方分布. 若n个独立的随机变量均服从标准正态分布,则这n个随机变量的平方和构成一新的随机变量,其分布规律称为服从自由度为ν 的χ2分布. 2. ...

  8. Codeforces Round #202 (Div. 2) A,B

    A. Cinema Line time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  9. php 调用系统命令

    system 与 exec 两者区别与联系:都会返回最后一行,命令执行成功的return返回值, 区别:system直接将输出内容echo出来,而exec将每一行输出内容保存到数组$output里. ...

  10. HDU 5033 Building

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5033 解题报告:在一条x轴上有n个建筑物,每个建筑物有一个高度h,然后现在有q次查询,查询的内容是假设 ...