GoogleMap API Javascript 订单跟踪

需求：

网购客户已经成功下单，网上商店已将包裹通过快递公司发货，并将快递单号发给客户。客户可以从相应的快递公司上查看自己的包裹到了哪里，此时同时要求查看google map上跟踪的状态。

解决方案：

客户在网上商店的链接上能查看到自己的订单，是通过webservice来与快递公司通信。下面是将已知Locations的经纬度用google map api在地图上标记出来。

如下图所示

绿色标记开始的位置，黄色标记关卡，包裹标记目前包裹所在位置，红色标记目的地。

javascipt代码

<script language="javascript">
function initialize()
{var latlng = new google.maps.LatLng(22.5430990, 114.0578680);
var myOptions = 
{zoom:3,
center: latlng, //设置中心点
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
setMarkers(map, routings);
}
var routings = [
['SHENZHEN,CN', 22.5430990,114.0578680, 1,'DEPARTURE SCAN', 1]
,['LANTAU ISLAND,HK', 22.2664984,113.9417510, 2,'DEPARTURE SCAN', 2]
,['CHEK LAP KOK,HK', 22.3083934,113.9239070, 3,'DEPARTURE SCAN', 3]
,['TA YUAN HSIANG,TW', 25.0453340,121.5198880, 4,'DEPARTURE SCAN', 4]
,['ANCHORAGE,AK,US', 61.2180556,-149.9002778, 5,'DEPARTURE SCAN', 5]
,['MEMPHIS,TN,US', 35.1495343,-90.0489801, 6,'DEPARTURE SCAN', 6]
,['MEMPHIS,TN,US', 35.1495343,-90.0489801, 7,'DEPARTURE SCAN', 7]
,['RICHMOND,VA,US', 37.5407246,-77.4360481, 8,'Destination', 8]
];
var flightPlanCoordinates = [
new google.maps.LatLng(22.5430990, 114.0578680)
,new google.maps.LatLng(22.2664984, 113.9417510)
,new google.maps.LatLng(22.3083934, 113.9239070)
,new google.maps.LatLng(25.0453340, 121.5198880)
,new google.maps.LatLng(61.2180556, -149.9002778)
,new google.maps.LatLng(35.1495343, -90.0489801)
,new google.maps.LatLng(35.1495343, -90.0489801)
];
function setMarkers(map, locations)
{var imageStart = new google.maps.MarkerImage('Image/green.png',
new google.maps.Size(20, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var imageCheckout = new google.maps.MarkerImage('Image/yellow.png',
new google.maps.Size(20, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var imageEnd = new google.maps.MarkerImage('Image/red.png',
new google.maps.Size(20, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var imagePackage = new google.maps.MarkerImage('Image/package.png',
new google.maps.Size(55, 55),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
for (var i = 0; i < locations.length; i++)
{var beach = locations[i];
var image;
if (beach[3] == 1) image = imageStart;
else if (beach[3] == locations.length) image = imageEnd;
else if (beach[3] == locations.length - 1) image = imagePackage;
else image = imageCheckout;
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var beachInfo = '<h5 style=text-align:left;>' + beach[4] + '</h5> <div style=text-align:left;>Location:<br/>' + beach[0] + '<br/><br/>LatLng:<br/>' + myLatLng + '<br/></div>';
var marker = new google.maps.Marker
({position: myLatLng,
map: map,
icon: image,
title: beach[0],
info: beachInfo,
zIndex: beach[3]
});
var infowindow = new google.maps.InfoWindow          // 弹出标记窗口
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(this.info);
 infowindow.open(map, this);
});
}
var flightPath = new google.maps.Polyline({ // 画线
path: flightPlanCoordinates,
strokeColor: '#0000FF',
strokeOpacity: 1.0, strokeWeight: 2
});
flightPath.setMap(map);
}
window.onload = initialize;
</script>

结果图如下：

参考：

https://developers.google.com/maps/documentation/javascript/overlays

http://www.codeproject.com/Articles/291499/Google-Maps-API-V3-for-ASP-NET