您的位置：首页 > 编程语言 > Go语言

Google Map Api 的简单应用

2010-09-19 09:32 435 查看
最近在项目中涉及到了google map api 的应用,写到这里,相信以后还会用到, 大家共勉..

代码如下

<head >

<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<script src="http://ditu.google.cn/maps?file=api&v=2&key=abcdefg&sensor=true_or_false" type="text/javascript">
</script>
<script type="text/javascript">
//据两地经纬度画出路线
function initialize()
{
var map = new GMap(document.getElementById("map_div"));
map.setCenter(new GLatLng(35.419622,116.593308),14);//设置地图的起始坐标
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

var point = new GPoint(116.580981,35.414988);
var marker = new GMarker(point);
map.addOverlay(marker);

point = new GPoint(116.588513,35.427106);
var marker2 = new GMarker(point);
marker2.openInfoWindowHtml("<font style='color:red;'><strong>济宁中山公用水务有限公司<br>客服中心共青团北路营业厅</strong></font>");
map.addOverlay(marker2);

point = new GPoint(116.607835,35.414306);
var marker3 = new GMarker(point);
map.addOverlay(marker3);

GEvent.addListener(marker, 'click', function(overlay, point) {
marker.openInfoWindowHtml("<font style='color:red;'><strong>济宁中山公用水务有限公司<br>客服中心水务大厦营业厅</strong></font>");
});
GEvent.addListener(marker2, 'click', function(overlay, point) {
marker2.openInfoWindowHtml("<font style='color:red;'><strong>济宁中山公用水务有限公司<br>客服中心共青团北路营业厅</strong></font>");
});
GEvent.addListener(marker3, 'click', function(overlay, point) {
marker3.openInfoWindowHtml("<font style='color:red;'><strong>济宁中山公用水务有限公司<br>客服中心琵琶山路营业厅</strong></font>");
});
}

</script>

<title>路线</title>
</head>
<body onload="initialize()" onunload="GUnload()" style="margin: 0 0 0 0 ;">
<form >

<div id="map_div" style =" width: 730px; margin-top: 0; height: 500px;">
</div>

</form>

</body>

效果如下：



实现这人效果还有另外一种写法，其实只是书写格式不一样而已

<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>地图test</title>
<script src="http://ditu.google.com/maps?file=api&v=2"
type="text/javascript"></script>
<script type="text/javascript">

var targets = [
{'name':'公司A', 'pt':[35.4003,116.5979, ], 'icon':'images/markerA'},
{'name':'公司B', 'pt':[35.3914, 116.6017], 'icon':'images/markerB'},
{'name':'公司C', 'pt':[35.4095,116.5880], 'icon':'images/markerC'}
];

var targetMarkers = []; // 显示公司位置
var map;

function switchMarkers() {

// 先清除掉当前的所有标注
map.clearOverlays();

// 再根据当前模式加入对应的标注
for (i = 0; i < targets.length; i++) {
map.addOverlay(targetMarkers[i] );
}

}

/* 本函数为每个地点创建正确的标注
* @param {Number} i 该地点在 targets 数组中的下标
*/
function createMarker(i) {

// 下一行代码演示了如何将 map 控件的像素坐标转化为经纬度

var ico = new GIcon(G_DEFAULT_ICON, targets[i]['icon'] + '.png');//.png

// 创建标注：将它们放在正确的位置上，而且是不可拖拽的
var targetPt = new GLatLng(targets[i]['pt'][0], targets[i]['pt'][1]);
var marker = new GMarker(targetPt, { icon: new GIcon(ico) });
targetMarkers.push(marker);
}

/**
* 创建地图控件，以及标注
*/
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(39.88174,116.40632),14);
map.setMapType(G_SATELLITE_MAP);//修改地图类型
//信息浮窗内容
var infoTabs = [
new GInfoWindowTab("环境", "天坛公园很漂亮，祈年殿尤其不错"),
new GInfoWindowTab("饮食", "仅次于一般")
];
//在地图的中心添加一个标记并自动打开其信息浮窗
var marker = new GMarker(map.getCenter());
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml(infoTabs);
});
map.addOverlay(marker);
marker.openInfoWindowTabsHtml(infoTabs);

//map = new GMap2(document.getElementById('map'));
// 将视图移到中国.济宁市区
//map.setCenter(new GLatLng(35.4008,116.5899), 11);
// 为 targets 数组中的每个地点，创建标注
//for (i = 0; i < targets.length; i++) {
//createMarker(i);
//}
//switchMarkers();
}
}

</script>
</head>
<body onload="load()" onunload="GUnload()">
<table width="100%">
<tr>
<td style="width: 100%">
<div id="map" style="width: 100%; height: 500px;"></div>
</td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航