Googlemap API开发
最近接手公司开发WebGIS的任务（也就是所谓的网上查车系统）。所有的东西都要重新开始弄，包括地图文件的转换和配图等等。才刚刚开工，就问我进展如何。如果说只做这一个项目还好，中间还要插进来N个任务。他娘的，手头上的大项目还没完成，还要接一些小客户无关紧要的需求。发完牢骚之后，下面是我用googlemap api的一些体会。
Googlemap api有三个版本一个是javascript写的api版本，一个是javascript写的类版本，还有一个是flex版本。用javascript写的程序，只要用浏览器浏览，js代码就被下载到本地了，辛辛苦苦写的程序就这样公开了。Flex版本的api编译之后就是一个flash文件，代码安全性比较高。由于javacript版比较简单，这里就介绍一些常用的函数。主要介绍flex版本的环境搭建以及一些常见的用法。
（一） JavaScript版本的API经常使用的函数
/*html网页文件*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> googlemapapi实例</title>
<script src="http://ditu.google.com/maps?file=api&v=2&key=ABQIAAAAUbR6g0RGGvD3wc8nEOCNZhQ1-r6OYR-mHk-jCzYLxV7O5V1vkBR9GY27V0NNKkh2ASTbqJMDYJeu2A"
type="text/javascript"></script>
/* GoogleMapFunctions.js文件*/
<script src="js/GoogleMapFunctions.js" type="text/javascript"></script>
<script type="text/javascript">
function Button1_onclick() {
DisplayVehicle(113.93372, 22.9932, 270);
DrawPolyline(113.93372, 22.9932, 112.93372, 23.9932);
}
</script>
</head>
<body onload="Initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 900px; height: 600px">
</div>
<input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />
</body>
</html>
var map = null;
//初始化googlemap
function Initialize()
{
if(GBrowserIsCompatible())
{
/*
创建googlemap地图对象
map_canvas放置地图的<div>标签。如：<div id= map_canvas></div>
*/
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(22.9932, 113.93372), 7);
map.addControl(new GLargeMapControl());
/*添加比例尺控件*/
map.addControl(new GScaleControl());
/*添加地图类型控件*/
map.addControl(new GMapTypeControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(100,5)));
/*添加鹰眼控件*/
map.addControl(new GOverviewMapControl());
map.enableContinuousZoom();
//map.enableGoogleBar();
map.enableScrollWheelZoom();
//map.addControl(new GRulerControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(5,5)));
var dragObj = map.getDragObject();
dragObj.setDraggableCursor("url(images/handzoomin.cur)");
}
}
/*将地图移动到以该经纬度为中心的地方*/
function MoveToPoint(lng, lat)
{
map.panTo(new GLatLng(lat, lng));
}
/*车辆根据经纬度和方向选择不同的图片在地图分别显示*/
var vehicleMarker = null;
function DisplayVehicle(lng, lat, head)
{
if (vehicleMarker==null)
{
var vehicleIcon = new GIcon();
vehicleIcon.iconAnchor = new GPoint(18, 18);
if(head==0)
{
vehicleIcon.image = "images/east.gif";
}
else if(head>0 &&head<90)
{
vehicleIcon.image = "images/southeast.gif";
}
else if(head==90)
{
vehicleIcon.image = "images/south.gif";
}
else if(head>90 && head<180)
{
vehicleIcon.image = "images/southwest.gif";
}
else if(head==180)
{
vehicleIcon.image = "images/west.gif";
}
else if(head>180 && head<270)
{
vehicleIcon.image = "images/northwest.gif";
}
else if(head==270)
{
vehicleIcon.image = "images/north.gif";
}
else
{
vehicleIcon.image = "images/northeast.gif";
}
// 设置 GMarkerOptions 对象, dragCrossMove:true, draggable:true, autoPan:true
markerOptions = { icon:vehicleIcon};
vehicleMarker = new GMarker(new GLatLng(lat, lng), markerOptions);
map.addOverlay(vehicleMarker);
MoveToPoint(lng, lat);
}
else
{
if(head==0)
{
vehicleMarker.setImage("images/east.gif");
}
else if(head>0 && head<90)
{
vehicleMarker.setImage("images/southeast.gif");
}
else if(head==90)
{
vehicleMarker.setImage("images/south.gif");
}
else if(head>90 && head<180)
{
vehicleMarker.setImage("images/southwest.gif");
}
else if(head==180)
{
vehicleMarker.setImage("images/west.gif");
}
else if(head>180 && head<270)
{
vehicleMarker.setImage("images/northwest.gif");
}
else if(head==270)
{
vehicleMarker.setImage("images/north.gif");
}
else
{
vehicleMarker.setImage("images/northeast.gif");
}
vehicleMarker.setLatLng(new GLatLng(lat, lng));
MoveToPoint(lng, lat);
}
}
/*根据两个经纬度在地图上上划线
function DrawPolyline(startLng, startLat, endLng, endLat)
{
var polyline = new GPolyline([new GLatLng(startLat, startLng), new GLatLng(endLat, endLng)], "#ff0000", 2);
map.addOverlay(polyline);
}
显示效果如下所示：
（二） 搭建Flex开发平台以及常见的用法
这个将会详细介绍，-------待续。
浙公网安备 33010602011771号