konakona
Google Map API制作旅游流程图
Google Map API制作旅游流程图

能在这么短的时间内掌握这么多的API技巧,我得我感谢群(25229487)里的朋友:圆(83390286)和Sfan (410614315)
,不厌其烦的教了我很多东西,内牛满面啊~

公司项目中,一些地方需要显示旅游的行程图,因此需要用到Google Map,并且绘制出地图的具体路线。

之前一直不知道本地调试的情况下是不需要key的,所以在用别人的code在本地用能显示的,到服务器就不行了。

等这告一段落,打算研究下http://www.everytrail.com/的实现原理,但是复杂多多了。

项目主要功能 为:自定义图标,根据总线路数,自动递增图标数值,绘制路线。

成果:

http://great-panda.net/wblog/wp-content/uploads/2010/04/显示坐标.jpg
(可以显示列表的搜索框、点击地图将显示经纬度坐标)用于后台将坐标输入《坐标库》时提去坐标之用。

http://great-panda.net/wblog/wp-content/uploads/2010/04/后台.jpg

《坐标库》

http://great-panda.net/wblog/wp-content/uploads/2010/04/Guilin-Highlights-Tour-Mozilla-Firefox.jpg

通过GET值输入地名,在数据库中查找坐标,返回json和信息,并绘制图线为流程图。只需在想要的显示的页面中<iframe src=””></iframe>即可~

源代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Lychee Travel Route MAP</title>
<script type='text/javascript' src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAy3shfEJVVdIDHg9fZYynoxQfHZmODbV4Qqyt72tctT71WBWmcBTkMQiWE648priQESDDQNruogh7DA&hl=en-US&sensor=true'></script>
<link href="_{$web_url}styles/css/googlemap.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var district = _{$district};
//var district = [{"c_img":"http://www.baidu.com/logo.gif","c_lat":"37.42225327545478","c_lon":"-122.13329315185547","c_content":"<div class=\"m_gbody\"><img width=\"90\" height=\"68\" align=\"left\" class=\"m_gpic\" src=\"24.80169495167004\"><h5>Chongqing<\/h5><p>\u4ec0\u4e48\u4e5f\u6ca1\u6709\u5440~~~~~~~~~<\/p><div class=\"m_gclear\"><\/div><div class=\"m_garoundThing\"><strong><a target=\"_blank\" href=\"index.html\"> Details <\/a><\/strong><\/div><\/div>"},{"c_img":"","c_lat":"37.444608024880196","c_lon":"-122.11475372314453","c_content":"<div class=\"m_gbody\"><img width=\"90\" height=\"68\" align=\"left\" class=\"m_gpic\" src=\"\"><h5>Yichang<\/h5><p>\u5566\u5566\u5566\u3002\u3002\u3002\u3002<\/p><div class=\"m_gclear\"><\/div><div class=\"m_garoundThing\"><strong><a target=\"_blank\" href=\"tour\/index.html\"> Details <\/a><\/strong><\/div><\/div>"},{"c_img":"","c_lat":"37.43411302887416","c_lon":"-122.16642379760742","c_content":"<div class=\"m_gbody\"><img width=\"90\" height=\"68\" align=\"left\" class=\"m_gpic\" src=\"\"><h5>Shennong Stream<\/h5><p>\u4ec0\u4e48\u4e5f\u6ca1\u6709\u5566~~..sfasdfjksdfjlkasdfjlksadjflafkl<\/p><div class=\"m_gclear\"><\/div><div class=\"m_garoundThing\"><strong><a target=\"_blank\" href=\"tour\/\"> Details <\/a><\/strong><\/div><\/div>"},{"c_img":"media\/maps\/def7d940534fb75a45c4a2fdf1be1a49.png","c_lat":"37.44242736763641","c_lon":"-122.15389251708984","c_content":"<div class=\"m_gbody\"><img width=\"90\" height=\"68\" align=\"left\" class=\"m_gpic\" src=\"media\/maps\/def7d940534fb75a45c4a2fdf1be1a49.png\"><h5>Shanghai<\/h5><p>asfjaskdfjakl!!!<\/p><div class=\"m_gclear\"><\/div><div class=\"m_garoundThing\"><strong><a target=\"_blank\" href=\"sadfasdfas\"> Details <\/a><\/strong><\/div><\/div>"}];
var map;
var icon = new GIcon(G_DEFAULT_ICON);  //建立图标对象
//-------------------
var poliLineColor="#ff0000";
//-------------------

//地图初始化
function initialize(){
if(GBrowserIsCompatible()){
map = new GMap2(document.getElementById("map_canvas"));
map.setUIToDefault();
map.setCenter(new GLatLng(22.98, 113.82), 10);
}else{
alert("You can see -_-''");
}
show(district);
}
function createMarker(point,html,iconfile) {
icon.image = iconfile;
var marker = new GMarker(point,{icon:icon});
GEvent.addListener(marker,"click",function(){
marker.openInfoWindowHtml(html);
});
return marker;
}
function show(data){
var n = "1";
var ico = "/lychee/CHTMaps/images/";
var arr= new Array();
for(var i=0;i<data.length;i++){
var point = new GLatLng(data[i].c_lat,data[i].c_lon);
arr[i]=point;
var iconfile = "http://localhost"+ico+n+".gif";
//alert(iconfile);
map.addOverlay(createMarker(point,data[i].c_content,iconfile));
n++;
}
var polyShape=new GPolygon(arr);
var bounds=polyShape.getBounds();
var polyline= new GPolyline(arr,poliLineColor, 10);
map.addOverlay(polyline);
map.setCenter(bounds.getCenter());
map.setZoom(map.getBoundsZoomLevel(bounds));
}

</script>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas"  style="width: 570px; height: 210px">
</div>
</body>
<!--版权所有 http://crazyphper.com QQ 54853315 author:konakona  -->
赞赏
https://secure.gravatar.com/avatar/3b712b34a0e1b689cfb524c9c6bcdc47?s=256&r=g

团哥

文章作者

继续玩我的CODE,让别人说去。 低调,就是这么自信。

发表评论

textsms
account_circle
email

konakona

Google Map API制作旅游流程图
能在这么短的时间内掌握这么多的API技巧,我得我感谢群(25229487)里的朋友:圆(83390286)和Sfan (410614315) ,不厌其烦的教了我很多东西,内牛满面啊~ 公司项目中,一些地方需要显示…
扫描二维码继续阅读
2010-04-14