google map api 与jquery结合使用(3) －－图标样式,使用xml和异步请求

核心提示： 使用小图标的效果使用更复杂图标样式map.js$(document).ready(function(){ if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map"));

使用小图标的效果

使用更复杂图标样式

map.js

$(document).ready(function()
{
　　 if (GBrowserIsCompatible()) {
　　　　 var map = new GMap2(document.getElementById("map"));
　　　　map.addControl(new GSmallMapControl());
　　　　map.addControl(new GMapTypeControl());
　　　　map.setCenter(new GLatLng(36.94,106.08),4);
　　　　//创建一个图标模板，指定阴影等
　　　　var baseIcon = new GIcon();
　　　　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);
　　　　baseIcon.infoShadowAnchor = new GPoint(18, 25);
　　　　//创建用指定字母作为前景图的图标
　　　　function createMarker(point, index) {
　　　　// Create a lettered icon for this point using our icon class
　　　　var letter = String.fromCharCode("A".charCodeAt(0) + index);
　　　　var icon = new GIcon(baseIcon);
　　　　icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
　　　　var marker = new GMarker(point, icon);
　　　　GEvent.addListener(marker, "click", function() {
　　　　marker.openInfoWindowHtml("Marker <b>" + letter + "</b>");
　　　　});
　　　　return marker;
　　　　}
　　　　//随机添加10个标记
　　　　var bounds = map.getBounds();
　　　　var southWest = bounds.getSouthWest();
　　　　var northEast = bounds.getNorthEast();
　　　　var lngSpan = northEast.lng() - southWest.lng();
　　　　var latSpan = northEast.lat() - southWest.lat();
　　　　for (var i = 0; i < 10; i++) {
　　　　　　var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
　　　　　　　　southWest.lng() + lngSpan * Math.random());
　　　　　　map.addOverlay(createMarker(point, i));
　　　　}
　　　　$(window).unload(function (){
　　　　　　　 $('.').unbind();
　　　　　　　 GUnload();
　　　　　 });
　　 }else
　　 {
　　　　 alert('你使用的浏览器不支持 Google Map!');　　
　　 }
});