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: %;
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 /> '; 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 /> ';
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 点连线的更多相关文章
- 借用Google API在线生成网站二维码地址方法
二维码其实很早就出现了,在国外很多年前就已经在应用了,国内这两年才开始异常的火爆,智能手机的发展,以及微博.微信等移动应用带动了二维码的普及.那么,如果为网址在线生成二维码呢?下面我们就来介绍一下Go ...
- [Java] - Google API调用
由于Google已经完成被墙,要上Google必需使用代理或VPN. 这里使用的是Google的GoAgent代理做开发.(如何使用GoAgent,这里不写了,忽略500字.....) 本地测试的Go ...
- PHP二维码生成的方法(google APi,PHP类库,libqrencode等)
原文地址: http://blog.csdn.net/liuxinmingcode/article/details/7910975 ================================== ...
- Google API在线生成二维码的方法
1.先看一个实例,是用Google API生成西部e网的网站地址www.weste.net二维码的方法: http://chart.apis.google.com/chart?cht=qr&c ...
- 缺少google api密钥,因此chromium的部分功能将无法使用”的解决办法
使用Chromium时会遇到 "缺少google api密钥,因此chromium的部分功能将无法使用"提示,google了一下 setx Google_API_K ...
- 利用google api生成二维码名片例子
二维条码/二维码可以分为堆叠式/行排式二维条码和矩阵式二维条码.堆叠式/行排式二维条码形态上是由多行短截的一维条码堆叠而成:矩阵式二维条码以矩阵的形式组成,在矩阵相应元素位置上用“点”表示二进制“1” ...
- google API的.NET库
Goolge发布了一个新的google API .NET库,是一个Portable Class Library,所以无论是.NET,WinTRy,Windows Phone或者Silverlight都 ...
- Google API v3 设置Icon问题处理
1.查看API实现 //虽然比较符合API实现的思想但这个没法; //会产生Uncaught TypeError: undefined is not a function //google API n ...
- ecshop使用Google API及OAuth2.0登录授权(PHP)
一.申请clientID https://console.developers.google.com/project 二.开启Google+ API权限 https://console.develop ...
随机推荐
- 7Z命令行详解
7z.exe在CMD窗口的使用说明如下: 7-Zip (A) 4.57 Copyright (c) 1999-2007 Igor Pavlov 2007-12-06 Usage: 7za <co ...
- 基于php使用memcache存储session的详解（转）
web服务器的php session都给memcached ,这样你不管分发器把 ip连接分给哪个web服务器都不会有问题了,配置方法很简单,就在php的配置文件内增加一条语句就可以了,不过前提你需要 ...
- 今天是JQ 的slideUp 和 slideDown 的点击事件
先贴代码,再讲详细事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...
- dubbo框架----探索-大型系统架构设计（图解）
对于高并发系统的架构要求: 1. 负载均衡 2.高并发 3.高可用 4.面向服务架构 (Dubbo框架使用) 5.分布式缓存 (redis分布式缓存) 6.分布式全文检索 (solr分分布式全文检索) ...
- 一张图告诉你，只会jQuery还不够！
会了jquery语法,会了jquery函数,你就真的会了jquery吗,来看这张图!是超实用的jquery代码段一书的导览!熊孩子们,赶紧学习去吧! 对于码农来说,代码就是生产力,你每天能码多少行并不 ...
- javascript高级程序设计---NodeList和HTMLCollection
节点对象都是单个节点,但是有时会需要一种数据结构,能够容纳多个节点.DOM提供两种接口,用于部署这种节点的集合分别是NodeList和HTMLCollection MDN上的定义: NodeList: ...
- 实操UNITY3D接入91SDK安卓版
原地址:http://bbs.18183.com/thread-149758-1-1.html 本文内容为创建UNITY3D接入91SDK的DEMO的具体操作过程.本人水平有限,UNITY3D与And ...
- 运动曲线提升CSS动画效果
原文链接 译文\译者鞠大宝 先有UI动画,然后才会有好的UI动画.好的动画会让人惊叹“哇哦!”——因为页面看上去很流畅.很漂亮,最重要的是,自然,一点都不会让人觉得不和谐或者僵硬死板.如果你经常逛Dr ...
- C++内存分配方式
参考:http://www.cnblogs.com/daocaoren/archive/2011/06/29/2092957.html http://www.cnblogs.com/skydesign ...
- windows下vim编辑器，字符编码设置。
在windows下的vim默认字符集修改 之前使用vim编辑器的时候碰到乱码的问题,后来在网上看了记下了:在vim编辑器中按esc进入命令模式 1.修改vim内部编码 set encoding= ...