Google Maps API用法教程

<script 

charset="UTF-8"

src=http://maps.google.com/maps?file=api&v=2&hl=en&oe=utf-8&key=API_KEY 

type="text/javascript"> 

</script>

function initialize() { 

if (GBrowserIsCompatible()) { 

var map = new GMap2(document.getElementById("map_canvas")); 

map.setCenter(new GLatLng(37.97918, 23.71665), 13); 

map.setUIToDefault(); 

} 

}

1.var point = new GLatLng(37.97110, 23.72601);

2.map.addOverlay(new GMarker(point));

function initialize() { 

if (GBrowserIsCompatible()) { 

var map = new GMap2(document.getElementById("map_canvas")); 

map.setCenter(new GLatLng(37.97918, 23.71665), 13); 

var point = new GLatLng(37.97110, 23.72601); 

map.addOverlay(new GMarker(point)); 

map.setUIToDefault(); 

} 

}

function initialize() { 

if (GBrowserIsCompatible()) { 

var map = new GMap2(document.getElementById("map_canvas")); 

map.setCenter(new GLatLng(37.97110, 23.72601), 13); 

var html = "Parthenon 帕台农神庙, 地址: Acropolis Hill"; 

map.openInfoWindow(map.getCenter(), 

document.createTextNode(html)); 

map.setUIToDefault(); 

} 

}

function initialize() { 

if (GBrowserIsCompatible()) { 

var map = new GMap2(document.getElementById("map_canvas")); 

map.setCenter(new GLatLng(37.97918, 23.71665), 13); 

var baseIcon = new GIcon(G_DEFAULT_ICON); 

baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png"; 

baseIcon.iconSize = new GSize(20, 34); 

baseIcon.shadowSize = new GSize(37, 34); 

baseIcon.iconAnchor = new GPoint(9, 34); 

baseIcon.infoWindowAnchor = new GPoint(9, 2); 



function createMarker(point, index) { 

var redIcon = new GIcon(baseIcon); 

redIcon.image = "http://www.google.com/mapfiles/marker.png"; 

markerOptions = { icon:redIcon }; 

var marker = new GMarker(point, markerOptions); 

GEvent.addListener(marker, "click", function() { 

marker.openInfoWindowHtml("Parthenon, Address: Acropolis Hill"); 

}); 

return marker; 

} 



var latlng = new GLatLng(37.97110, 23.72601); 

map.addOverlay(createMarker(latlng)); 

} 

}

var baseIcon = new GIcon(G_DEFAULT_ICON); 

baseIcon.shadow = “http://www.google.com/mapfiles/shadow50.png”; 

baseIcon.iconSize = new GSize(20, 34); 

baseIcon.shadowSize = new GSize(37, 34); 

baseIcon.iconAnchor = new GPoint(9, 34); 

baseIcon.infoWindowAnchor = new GPoint(9, 2);

function createMarker(point, index) { 

var redIcon = new GIcon(baseIcon); 

redIcon.image = "http://www.google.com/mapfiles/marker.png"; 

markerOptions = { icon:redIcon }; 

var marker = new GMarker(point, markerOptions); 

GEvent.addListener(marker, "click", function() { 

marker.openInfoWindowHtml("Parthenon, Address: Acropolis Hill"); 

}); 

return marker; 

}

1.var latlng = new GLatLng(37.97110, 23.72601);

2.map.addOverlay(createMarker(latlng));

<markers> 

<marker

name="标题"

label="这是一个标签"

desc="气球提示的描述"

lat="37.97167" lng="23.72581"

type="标签的种类，如 Bridge"

address="地址信息"

icona="图标"

/> 

</markers>

1.<script src="http://gmaps-utility-library.googlecode.com/svn/trunk/labeledmarker/release/src/labeledmarker.js" type="text/javascript"></script>

var iconRed = new GIcon(); 

iconRed.image = '../img/marker-red.png'; 

iconRed.shadow = ''; 

iconRed.iconSize = new GSize(32, 32); 

iconRed.shadowSize = new GSize(22, 20); 

iconRed.iconAnchor = new GPoint(16, 16); 

iconRed.infoWindowAnchor = new GPoint(5, 1); 

var customIcons = []; 



customIcons["ancient"] = iconRed; 

var markerGroups = { "ancient": []};

GDownloadUrl("markers.xml", function(data) { //We tell Google Maps to load our file 

var xml = GXml.parse(data); 

var markers = xml.documentElement.getElementsByTagName("marker"); //and read markers 

for (var i = 0; i < markers.length; i++) { 

var name = markers[i].getAttribute("name"); //From here down we assign variables. 

var label = markers[i].getAttribute("label"); 

var desc = markers[i].getAttribute("desc"); 

var address = markers[i].getAttribute("address"); 

var type = markers[i].getAttribute("type"); 

var icona = markers[i].getAttribute("icona"); 

var point = new GlatLng(parseFloat(markers[i].getAttribute("lat")), //and we set the lat-long 

parseFloat(markers[i].getAttribute("lng"))); 

var marker = createMarker(point, name, label, desc, address, type, icona); 

map.addOverlay(marker); 

} 

}); 

} 

} 



function createMarker(point, name, label, desc, address, type, icona) { 

var marker = new LabeledMarker(point, {icon: customIcons[type], labelText: label, labelOffset: new GSize(-6, -8)}) 

};

markerGroups[type].push(marker); 

var html = "<img src=" + icona + " height=150 border=0 /><br><br><span><b>"+ name + "</b><br/>" + 

desc + "<br/><b>Address:</b> " + address + "<br/><br/><span>"; 

GEvent.addListener(marker, 'click', function() { 

marker.openInfoWindowHtml(html); 

}); 

return marker; 

}

var iconRed = new GIcon(); 

iconRed.image = '../img/marker-red.png'; 

iconRed.shadow = ''; 

iconRed.iconSize = new GSize(32, 32); 

iconRed.shadowSize = new GSize(22, 20); 

iconRed.iconAnchor = new GPoint(16, 16); 

iconRed.infoWindowAnchor = new GPoint(5, 1); 



var iconGreen = new GIcon(); 

iconGreen.image = '../img/marker-green.png'; 

iconGreen.shadow = ''; 

iconGreen.iconSize = new GSize(32, 32); 

iconGreen.shadowSize = new GSize(22, 20); 

iconGreen.iconAnchor = new GPoint(16, 16); 

iconGreen.infoWindowAnchor = new GPoint(5, 1); 



var iconBrown = new GIcon(); 

iconBrown.image = '../img/marker-brown.png'; 

iconBrown.shadow = ''; 

iconBrown.iconSize = new GSize(32, 32); 

iconBrown.shadowSize = new GSize(22, 20); 

iconBrown.iconAnchor = new GPoint(16, 16); 

iconBrown.infoWindowAnchor = new GPoint(5, 1); 



var customIcons = []; 



customIcons["hotel"] = iconRed; 

customIcons["bridge"] = iconGreen; 

customIcons["hill"] = iconBrown; 

var markerGroups = { "hotel": [], "bridge": [], "hill": []};

document.getElementById("hotelCheckbox").checked = true; 

document.getElementById("bridgeCheckbox").checked = true; 

document.getElementById("hillCheckbox").checked = true; 

document.getElementById("labelsCheckbox").checked = true;

01.function toggleGroup(type) { 

02.for (var i = 0; i < markerGroups[type].length; i++) { 

03.var marker = markerGroups[type][i]; 

04.if (marker.isHidden()) { 

05.marker.show(); 

06.} else { 

07.marker.hide(); 

08.} 

09.} 

10.} 

11.

12.function toggleLabels() { 

13.var showLabels = document.getElementById("labelsCheckbox").checked; 

14.for (groupName in markerGroups) { 

15.for (var i = 0; i < markerGroups[groupName].length; i++) { 

16.var marker = markerGroups[groupName][i]; 

17.marker.setLabelVisibility(showLabels); 

18.} 

19.} 

20.} 

21.

22.function <

  分享到：
      
      [原创] WCF技术剖析之二十二: 深入剖析WC ...
      |
      落实物联网
    
    2009-10-28 11:09
浏览 1395
评论(1)
查看更多
    
评论
    1 楼
    check-枫叶
    2011-11-04  
    
您好！我现在也在弄google Maps，现在可以把2点之间的距离得到  但现在还需要加一个功能  就是中间可以设置站点  然后在把总距离算出来    就是增加站点的这个还没找到资料  请问你这有资料么  我的Q是694833613  有资料请给我一份  谢谢您啦
发表评论   您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

原文链接：http://coolshell.cn/?p=1561（酷壳）

创建一个简单的地图

地图标记

活动标记

载入地图

定制地图

加入多个标记并分组

过滤显示标记

评论

发表评论

相关推荐

最近访客 更多访客>>