google map api

来源:互联网 发布:windows program files 编辑:程序博客网 时间:2024/05/10 16:45
<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").valuegeocoder.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>


0 0