google map api

最新推荐文章于 2024-09-24 21:59:14 发布
xuchen_si
最新推荐文章于 2024-09-24 21:59:14 发布
阅读量1.6k
点赞数
本文链接：https://blog.youkuaiyun.com/xuchen_si/article/details/21556053
版权
本文介绍了一系列使用谷歌地图API实现的功能案例，包括自定义地图样式、添加标记并展示信息窗体、绘制路线及图形等，为开发者提供了丰富的实践指导。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/CASs">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
   <script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?key=AIzaSyANl_j_bgj9up_PZ5-Y2x_tCYp6JU7Xjs0&sensor=false&libraries=drawing"></script>
    <script type="text/javascript">
  
/* 


// 双击取得坐标（存在放大问题）
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng( - 34.397, 150.644),
        zoom: 8,
        // disableDefaultUI: true,  //取消地图控件
        // panControl: false,  //用于启用/停用平移控件
        zoomControl: true, //用于启用/停用缩放控件
        zoomControlOptions: {
            //style: google.maps.ZoomControlStyle.SMALL,   //显示迷你伸缩控件
            //style: google.maps.ZoomControlStyle.LARGE   //显示标准的控件
            style: google.maps.ZoomControlStyle.DEFAULT,//根据设备自动默认
            position: google.maps.ControlPosition.RIGHT //控件位置
        },


        //xxxxxxOptions  根据前缀单独设置不同的设置  
        mapTypeControl: true, //用于启用/停用地图类型控件
        mapTypeControlOptions: { //右上角卫星、地图 【地图属性】
            // style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR   //水平显示  
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU //列表显示   DEFAULT  默认显示  取决于屏幕大小
        },
        scaleControl: false,//用于启用/停用比例控件
        streetViewControl: true,
        rotateControl: true,//用于决定显示/不显示旋转控件  45°角  地图是否支持
        overviewMapControl: true, //用于启用/停用总览图控件   右下角 
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    google.maps.event.addListener(map, 'dblclick',
    function(event) {
        document.getElementById("address").value = event.latLng;
    });


}
*/




/*
//随即取得5个坐标点，在地图上打上标记，点击标记给出info提示框
var map;
function initialize() {
    var myLatlng = new google.maps.LatLng( - 25.363882, 131.044922);
    var mapOptions = {
        zoom: 4,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    var southWest = new google.maps.LatLng( - 31.203405, 125.244141);
    var northEast = new google.maps.LatLng( - 25.363882, 131.044922);
    var bounds = new google.maps.LatLngBounds(southWest, northEast);
    var lngSpan = northEast.lng() - southWest.lng();
    var latSpan = northEast.lat() - southWest.lat();
    for (var i = 0; i < 5; i++) {
        var location = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
        var marker = new google.maps.Marker({
            position: location,
            map: map
        });
        var j = i + 1;
        marker.setTitle(j.toString()); //鼠标放上去 有小title提示
        attachSecretMessage(marker, i);
    }
}
function attachSecretMessage(marker, number) {
    var message = ["This", "is", "the", "secret", "message"];
    var infowindow = new google.maps.InfoWindow({
        content: message[number],
        size: new google.maps.Size(50, 50)
    });
    google.maps.event.addListener(marker, 'click',
    function() {


        infowindow.open(map, marker);
    });
}
*/


/*
//拖动显示 控制级别
function initialize() {
    var myLatLng = new google.maps.LatLng( - 25.363882, 131.044922);
    var mapOptions = {
        zoom: 4,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    var infowindow = new google.maps.InfoWindow({
        content: 'Change the zoom level',
        position: myLatLng
    });
    infowindow.open(map);
    google.maps.event.addListener(map, 'zoom_changed',
    function() {
        var zoomLevel = map.getZoom();
        map.setCenter(myLatLng);
        infowindow.setContent('Zoom: ' + zoomLevel)
    })
}
google.maps.event.addDomListener(window, 'load', initialize);


*/




/*
//自定义控件  回到中心
var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
function HomeControl(controlDiv, map) {
    controlDiv.style.padding = '5px';
    var controlUI = document.createElement('div');
    controlUI.style.backgroundColor = 'white';
    controlUI.style.borderStyle = 'solid';
    controlUI.style.borderWidth = '2px';
    controlUI.style.cursor = 'pointer';
    controlUI.style.textAlign = 'center';
    controlUI.title = 'Click to set the map to Home';
    controlDiv.appendChild(controlUI);
    var controlText = document.createElement('div');
    controlText.style.fontFamily = 'Arial,sans-serif';
    controlText.style.fontSize = '12px';
    controlText.style.paddingLeft = '4px';
    controlText.style.paddingRight = '4px';
    controlText.innerHTML = '<strong>Home</strong>';
    controlUI.appendChild(controlText);
    google.maps.event.addDomListener(controlUI, 'click',
    function() {
        map.setCenter(chicago)
    })
}
function initialize() {
    var mapDiv = document.getElementById('map_canvas');
    var mapOptions = {
        zoom: 12,
        center: chicago,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(mapDiv, mapOptions);
    var homeControlDiv = document.createElement('div');
    var homeControl = new HomeControl(homeControlDiv, map);
    homeControlDiv.index = 1;
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv)
}
*/




/*
//点击设置中心点   并且点击HOME  回到中心点
var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
HomeControl.prototype.home_ = null;
HomeControl.prototype.getHome = function() {
    return this.home_
}
HomeControl.prototype.setHome = function(home) {
    this.home_ = home
}
function HomeControl(map, div, home) {
    var controlDiv = div;
    var control = this;
    control.home_ = home;
    controlDiv.style.padding = '5px';
    var goHomeUI = document.createElement('div');
    goHomeUI.title = 'Click to set the map to Home';
    controlDiv.appendChild(goHomeUI);
    var goHomeText = document.createElement('div');
    goHomeText.innerHTML = '<strong>Home</strong>';
    goHomeUI.appendChild(goHomeText);
    var setHomeUI = document.createElement('div');
    setHomeUI.title = 'Click to set Home to the current center';
    controlDiv.appendChild(setHomeUI);
    var setHomeText = document.createElement('div');
    setHomeText.innerHTML = '<strong>Set Home</strong>';
    setHomeUI.appendChild(setHomeText);
    google.maps.event.addDomListener(goHomeUI, 'click',
    function() {
        var currentHome = control.getHome();
        map.setCenter(currentHome)
    });
    google.maps.event.addDomListener(setHomeUI, 'click',
    function() {
        var newHome = map.getCenter();
        control.setHome(newHome)
    })
}
function initialize() {
    var mapDiv = document.getElementById('map_canvas');
    var mapOptions = {
        zoom: 12,
        center: chicago,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(mapDiv, mapOptions);
    var homeControlDiv = document.createElement('div');
    var homeControl = new HomeControl(map, homeControlDiv, chicago);
    homeControlDiv.index = 1;
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv)
}


*/


/*
//5个坐标点，在地图上打上标记，点击标记给出info提示框
var map;
function initialize() {
    var myLatlng = new google.maps.LatLng( - 25.363882, 131.044922);
    var mapOptions = {
        zoom: 4,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    var pox = [ - 25.363882, -25.363882, -25.363882, -25.363882, -25.363882];
    var poy = [135.044922, 134.044922, 133.044922, 132.044922, 131.044922];
    for (var i = 0; i < pox.length; i++) {
        //alert(pox[i]);
        // alert(poy[i]);
        var location = new google.maps.LatLng(pox[i], poy[i]);
        var marker = new google.maps.Marker({
            position: location,
            map: map
        });
        var j = i + 1;
        marker.setTitle(j.toString()); //鼠标放上去 有小title提示
        attachSecretMessage(marker, i);
    }
}
function attachSecretMessage(marker, number) {
    var message = ["This", "is", "the", "secret", "message"];
    var infowindow = new google.maps.InfoWindow({
        content: message[number],
        size: new google.maps.Size(50, 50)
    });
    google.maps.event.addListener(marker, 'click',
    function() {
        infowindow.open(map, marker);
    });
}
*/




/*
//地图样式 颜色自定义
function initialize() {
    var styles = [{
        stylers: [
        //  { hue: "#00ffe6" },
        {
            hue: "#ff0000"
        },
        //地图底色
        {
            saturation: -20
        } //底色深度
        ]
    },
    {
        featureType: "road",
        elementType: "geometry",
        stylers: [{
            lightness: 100
        },
        {
            visibility: "simplified"
        }]
    },
    {
        featureType: "road",
        elementType: "labels",
        stylers: [{
            visibility: "off"
        }]
    }];
    var styledMap = new google.maps.StyledMapType(styles, {
        name: "Styled Map"
    });
    var mapOptions = {
        zoom: 11,
        center: new google.maps.LatLng(55.6468, 37.581),
        mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
        }
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    map.mapTypes.set('map_style', styledMap);
    map.setMapTypeId('map_style');
}
*/




/*
//地图上画五角星
var map;
var markersArray = [];
function initialize() {
    var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
    var mapOptions = {
        zoom: 12,
        center: haightAshbury,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var goldStar = {
        path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
        fillColor: "green",
        fillOpacity: 0.8,
        scale: 1,
        strokeColor: "red",
        //
        strokeWeight: 1
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    google.maps.event.addListener(map, 'click',
    function(event) {
        marker = new google.maps.Marker({
            position: event.latLng,
            icon: goldStar,
            map: map
        });
        marker.setMap(map)
    });
}
*/




/*
//地图标记弹跳 动画效果
var stockholm = new google.maps.LatLng( - 25.363882, 131.044922);
var marker;
var map;
function initialize() {
    var mapOptions = {
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: stockholm
    };
var image = 'map.png';   //自定义图片地址
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    var pox = [ - 26.363882, -27.363882, -29.363882, -28.363882, -24.363882];
    var poy = [135.044922, 134.044922, 133.044922, 132.044922, 131.044922];
    for (var i = 0; i < pox.length; i++) {
        var location = new google.maps.LatLng(pox[i], poy[i]);
        marker = new google.maps.Marker({
            map: map,
            draggable: true,
            animation: google.maps.Animation.DROP,
            position: location,
icon:image,  //自定义标记图片
        });
var j = i + 1;
marker.setTitle(j.toString());
        jump(marker);
    }
}
function jump(marker) {
        google.maps.event.addListener(marker, 'click',function() {
                if (marker.getAnimation() != null) {
                        marker.setAnimation(null);
                } else {
                        marker.setAnimation(google.maps.Animation.BOUNCE);
                }
        });


}
*/


/*
//地图上画线   手尾没闭合
function initialize() {
    var myLatLng = new google.maps.LatLng( - 25.363882, 131.044922);
    var mapOptions = {
        zoom: 3,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    var pox = [ - 26.363882, -27.363882, -29.363882, ];
    var poy = [135.044922, 134.044922, 133.044922, ];
    // var flightPlanCoordinates = [ new google.maps.LatLng(37.772323, -122.214897),new google.maps.LatLng(21.291982, -157.821856),new google.maps.LatLng(-27.46758, 153.027892) ];
    var flightPlanCoordinates = [];
    for (var i = 0; i < pox.length; i++) {
        flightPlanCoordinates[i] = new google.maps.LatLng(pox[i], poy[i])
    }
    var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    flightPath.setMap(map);
}
*/


/*
//地图画线  带箭头指示方向
function initialize() {
    var myLatLng = new google.maps.LatLng(0, -180);
    var mapOptions = {
        zoom: 3,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    var flightPlanCoordinates = [new google.maps.LatLng(37.772323, -122.214897), new google.maps.LatLng(21.291982, -157.821856), new google.maps.LatLng( - 18.142599, 178.431), new google.maps.LatLng( - 27.46758, 153.027892)];


    var lineSymbol = {
        path:google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,    //API  关键字  预定义路径
path:google.maps.SymbolPath.FORWARD_CLOSED_ARROW
    };


    var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2,
        icons: [{
            icon: lineSymbol,
            offset: '100%'
        }],


    });
    flightPath.setMap(map);
}
*/




/*
//地图画线  虚线
function initialize() {
    var myLatLng = new google.maps.LatLng(0, -180);
    var mapOptions = {
        zoom: 3,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    var flightPlanCoordinates = [new google.maps.LatLng(37.772323, -122.214897), new google.maps.LatLng(21.291982, -157.821856), new google.maps.LatLng( - 18.142599, 178.431), new google.maps.LatLng( - 27.46758, 153.027892)];
    var lineSymbol = {
        path: 'M 0,-1 0,1',
        strokeOpacity: 1,
        scale: 4
    };
    var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 0,
        strokeWeight: 1,
        icons: [{
            icon: lineSymbol,
            offset: '0',
            repeat: '20px'
        }],
    });
    flightPath.setMap(map);
}
*/




/*
//点击一下 加一个标记 并且画线
var poly;
var map;
function initialize() {
  var chicago = new google.maps.LatLng(41.879535, -87.624333);
  var mapOptions = {
    zoom: 7,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  var polyOptions = {
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  }
  poly = new google.maps.Polyline(polyOptions);
  poly.setMap(map);
  google.maps.event.addListener(map, 'click', addLatLng);
}
function addLatLng(event) {
  var path = poly.getPath();
  path.push(event.latLng);
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: map
  });
}
*/




/*
//绘制多边形 封口的
function initialize() {
  var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
  var mapOptions = {
    zoom: 5,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };


  var bermudaTriangle;


  var map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);


  var triangleCoords = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737),
    new google.maps.LatLng(25.774252, -80.190262)
  ];


  // Construct the polygon
  // Note that we don't specify an array or arrays, but instead just
  // a simple array of LatLngs in the paths property
  bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35
  });


  bermudaTriangle.setMap(map);
}
*/


/*
//绘制多边形区域 点击区域 给出提示框  多边形数组
var map;
var infoWindow;
function initialize() {
    var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
    var mapOptions = {
        zoom: 5,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    var bermudaTriangle;
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    var triangleCoords = [new google.maps.LatLng(25.774252, -80.190262), new google.maps.LatLng(18.466465, -66.118292), new google.maps.LatLng(32.321384, -64.75737)];
    bermudaTriangle = new google.maps.Polygon({
        paths: triangleCoords,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 3,
        fillColor: "#FF0000",
        fillOpacity: 0.35
    });
    bermudaTriangle.setMap(map);
    google.maps.event.addListener(bermudaTriangle, 'click', showArrays);
    infowindow = new google.maps.InfoWindow();
}
function showArrays(event) {
    var vertices = this.getPath();
    var contentString = "<b>Bermuda Triangle Polygon</b><br />";
    contentString += "Clicked Location: <br />" + event.latLng.lat() + "," + event.latLng.lng() + "<br />";
    for (var i = 0; i < vertices.length; i++) {
        var xy = vertices.getAt(i);
        contentString += "<br />" + "Coordinate: " + i + "<br />" + xy.lat() + "," + xy.lng();
    }
    infowindow.setContent(contentString);
    infowindow.setPosition(event.latLng);
    infowindow.open(map);
}
*/


/*
//画圆
var citymap = {};
citymap['chicago'] = {
    center: new google.maps.LatLng(41.878113, -87.629798),
    population: 2842518
};
citymap['newyork'] = {
    center: new google.maps.LatLng(40.714352, -74.005973),
    population: 8143197
};
citymap['losangeles'] = {
    center: new google.maps.LatLng(34.052234, -118.243684),
    population: 3844829
}
var cityCircle;
function initialize() {
    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(37.09024, -95.712891),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    for (var city in citymap) {
        // Construct the circle for each value in citymap. We scale population by 20.
        var populationOptions = {
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#FF0000",
            fillOpacity: 0.35,
            map: map,
            center: citymap[city].center,
            radius: citymap[city].population / 20
        };
        cityCircle = new google.maps.Circle(populationOptions);
    }
}
*/


/*
//折线上标记 移动动画效果   （封闭式有问题）
var line;
function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(25.774252, -80.190262),
    zoom:4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions); 
  var lineCoordinates =  [new google.maps.LatLng(25.774252, -80.190262), new google.maps.LatLng(18.466465, -66.118292), new google.maps.LatLng(32.321384, -64.75737)];


  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#ff0000',
  };


  line = new google.maps.Polyline({
    path: lineCoordinates,
    icons: [{
      icon: lineSymbol,
      offset: '100%'
    }],
    map: map
  });
}


function animateCircle() {
speed=200;
    var count =0;
    offsetId = window.setInterval(function() {
      count = (count + 1) % 200;
      var icons = line.get('icons');
      icons[0].offset = (count / 2) + '%';
      line.set('icons', icons);
  }, speed);
}
document.getElementById("map_canvas").setTimeout(animateCircle());
*/




/*
//地图上画圆形区域
var citymap = {};
citymap['chicago'] = {
  center: new google.maps.LatLng(41.878113, -87.629798),
  population: 2842518
};
citymap['newyork'] = {
  center: new google.maps.LatLng(40.714352, -74.005973),
  population: 8143197
};
citymap['losangeles'] = {
  center: new google.maps.LatLng(34.052234, -118.243684),
  population: 3844829
}
var cityCircle;


function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(37.09024, -95.712891),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };


  var map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);


  for (var city in citymap) {
    var populationOptions = {
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: citymap[city].population / 20
    };
    cityCircle = new google.maps.Circle(populationOptions);
  }
}
*/


/*//绘制 矩形区域
function initialize() {


  var coachella = new google.maps.LatLng(33.6803003, -116.173894);
  var rectangle;


  var mapOptions = {
    zoom: 11,
    center: coachella,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);
  rectangle = new google.maps.Rectangle();
  google.maps.event.addListener(map, 'click', function() {
    var rectOptions = {
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.05,
      map: map,
      bounds: map.getBounds()
    };
    rectangle.setOptions(rectOptions);
  });
}*/




/*//加载画图库（地图上 画圆 还可以点击标记）
function initialize() {


  var coachella = new google.maps.LatLng(33.6803003, -116.173894);
  var rectangle;


  var mapOptions = {
    zoom: 11,
    center: coachella,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
 var map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);
var drawingManager = new google.maps.drawing.DrawingManager({
  drawingMode: google.maps.drawing.OverlayType.MARKER,
  drawingControl: true,
  drawingControlOptions: {
    position: google.maps.ControlPosition.TOP_CENTER,
    drawingModes: [google.maps.drawing.OverlayType.MARKER, google.maps.drawing.OverlayType.CIRCLE]
  },
  markerOptions: {
    icon: new google.maps.MarkerImage('icon.png')
  },
  
  circleOptions: {   //圆形参数
    fillColor: '#ff0000',  
    fillOpacity: 0.5,
    strokeWeight: 0,
    clickable: false,
    zIndex: 1,
    editable: true
  }
});
drawingManager.setMap(map);
}
*/


/*//地图上放图片
function initialize() {
var newark = new google.maps.LatLng(40.740, -74.18);
var imageBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(40.716216,-74.213393),
    new google.maps.LatLng(40.765641,-74.139235));


var mapOptions = {
  zoom: 13,
  center: newark,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}


var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);


var oldmap = new google.maps.GroundOverlay(
    "img.jpg",
    imageBounds);
oldmap.setMap(map);


}
*/
;


/*


//地图关键字收索功能（无法自动提示关键字）
var geocoder;
var map;
//var query = "武汉市发展大道176号兴城大厦";
//var display = "<b>单位：</b>武汉市劲捷电子信息有限公司";
function initialize() {
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom : 12,
center: new google.maps.LatLng(40.740, -74.18),
mapTypeId : google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//codeAddress();
}


function codeAddress() {
//var address = query;
var address = document.getElementById("address").value
geocoder.geocode({
'address' : address
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map : map,
position : results[0].geometry.location
});
var infowindow = new google.maps.InfoWindow({
content : "<b>地址：</b>" + address + "<br>" + display
});
infowindow.open(map, marker);
} else {
alert("未能解析该地址的原因: " + status);
}
});
}*/


    </script>
  </head>
  <body onLoad="initialize()">
    <div id="map_canvas" style="width:800px; height:600px"></div>
    <input name="address" type="text" id="address" size="100" onBlur="codeAddress();">
  </body>
</html>