这个是模拟的数据,用于测试,为了方便学习 弹出框信息都是固定的,以及操作都不是写的循环,实际开发用 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. SQLServer中获取特定表的所有列名

    1.获取特定表的所有列名: Select Name FROM SysColumns Where id=Object_Id('tableName') 参考:http://blog.csdn.net/wu ...

  2. cmd /c和cmd /k 解释，附★CMD命令★ 大全

    cmd /c和cmd /k http://leaning.javaeye.com/blog/380810 java的Runtime.getRuntime().exec(commandStr)可以调用执 ...

  3. Cornerstone详细操作

    1.⾸首先打开Cornerstone 2.然后如下图所⽰示: 3.选择对应的仓库,如下图所⽰示   4.然后Import完成之后,就把本地的⽂文件提交到SVN服务器上了,如下图所⽰示,另外如果你想要使 ...

  4. Xcode 历史版本

    概述[编辑] Xcode前身是继承自NeXT的Project Builder. The Xcode suite包含有GNU Compiler Collection自由软件(GCC.apple-darw ...

  5. readline

    注意,向后表示向左,向前表示向右. "\C-f": forward-char 光标向右一个字符 "\C-b": backward-char  光标向左一个字符 ...

  6. Ionic 常见问题及解决方案

    前言 Ionic是目前较为流行的Hybird App解决方案,在Ionic开发过程中会遇到很多常见的开发问题,本文尝试对这些问题给出解决方案. 一些常识与技巧 list 有延迟,可以在ion-cont ...

  7. Spring、Spring MVC、MyBatis整合文件配置详解

    原文  http://www.cnblogs.com/wxisme/p/4924561.html 主题 MVC模式MyBatisSpring MVC 使用SSM框架做了几个小项目了,感觉还不错是时候总 ...

  8. Python网络socket学习

    Python 网络编程 Python 提供了两个级别访问的网络服务.: 低级别的网络服务支持基本的 Socket,它提供了标准的 BSD Sockets API,可以访问底层操作系统Socket接口的 ...

  9. 黄学长模拟day1 大逃亡

    给出数字N(1<=N<=10000),X(1<=x<=1000),Y(1<=Y<=1000),代表有N个敌人分布一个X行Y列的矩阵上,矩形的行号从0到X-1,列号从 ...

  10. JavaWeb学习总结(五十三)——Web应用中使用JavaMail发送邮件

    现在很多的网站都提供有用户注册功能, 通常我们注册成功之后就会收到一封来自注册网站的邮件.邮件里面的内容可能包含了我们的注册的用户名和密码以及一个激活账户的超链接等信息.今天我们也来实现一个这样的功能 ...