google map api

最新推荐文章于 2018-12-27 17:07:44 发布
最新推荐文章于 2018-12-27 17:07:44 发布
阅读量1.6k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuchen_si/article/details/21556053
版权 
<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>


xuchen_si
关注
谷歌地图测距工具\右键菜单
11-13
右键菜单\谷歌地图测距工具（先点击右键加入起点，再点击左键确定终点，后线段中间位置弹出距离弹窗）
vue使用谷歌地图绘制图形以及地图选点功能
qq_45963071的博客
08-24 3762
使用谷歌地图绘制多边形以及地图选点，功能齐全、现已封装，拿来即可食用
Google Map开发系列（十）——给你的地图加上API提供的默认控件
ForEvErNoME专栏
07-01 1015
地图上的控件一般是指悬浮在地图上、不随地图移动的图片、按钮等等DOM元素，可以用来控制地图、帮助用户和地图交互、显示地图的特定信息和状态。在谷歌地图主页上，有可以控制地图缩放的控件、有切换地图类型的控件、有显示缩略图的控件等等，这些控件在地图API里默认也都是提供的，所以，你可以在你的地图上加上这些控件，并且可以根据你的需要随意调整地图控件的位置、改变控件的外观，就像我在右边的地图上把缩放控件移到
GoogleMap风格地图模板
12-14
目前提供的仿GoogleMap地图风格V1.0版本，使用的数据为SuperMap Deskpro .NET 6R中提供的示例数据China400.udb、China400.udd。
基于Google Map Api的Android导航应用
01-19
一、引言 ...　本文提出并实现了一种基于Google Map Api 的Android 导航应用，能够给用户提供人性化和智能化的地图导航服务。 　二、系统体系结构 图1 系统体系结构 　三、UI 界面设计 　Android 应
Google-Map-Api.rar_google map_google map api
09-24
**谷歌地图API详解** 谷歌地图API（Google Maps API）是谷歌提供的一项强大的服务，允许开发者在自己的网站或应用中嵌入交互式地图功能。...请参考提供的“Google Map Api.doc”文档，深入理解并实践这些技术。
Google Map Api
08-12
Google Map API 是一款由谷歌公司提供的强大工具，用于在网页或移动应用中集成地图功能。这个API允许开发者将交互式地图集成到他们的网站或应用程序中，提供定位、导航、地理编码、路线规划等多种功能。最新版的...
Google Map api V3 (3.9.12)的离线开发包
06-20
Google Map API V3（3.9.12）是谷歌提供的一个用于在网页上嵌入交互式地图的服务，它是Google Maps JavaScript API的第三个主要版本。这个离线开发包允许开发者在没有网络连接的情况下进行地图应用的开发和测试，这...
Google Map Api和GOOGLE Search Api整合实现代码
09-05
在本文中，我们将深入探讨如何将Google Map API与Google Search API进行整合，以便在地图上显示基于地理位置的搜索结果。这个整合实现的核心是一个名为`KMapSearch`的JavaScript类，它利用面向对象的设计来简化这一...
谷歌地图Google Map API V3中文开发文档
04-20
谷歌地图Google Map API中文开发文档 V3
Android Google Map API 开发基础知识
weixin_30469895的博客
04-23 171
开发基于谷歌地图的应用和普通的android应用差不多都要使用它提供给我们的类库，所不同的是google map的类库不是android平台的基本类库，是google api的一部分，所以建立项目时，SDK要选择Google APIs； 还有一点，开发基于地图的应用时候需要使用google map的APIkey，必须先申请key，然后才能开发基于地图的应用。 下边分步骤记录下，整个过程： ...
Google map自定义style（午夜蓝等）
weixin_33735077的博客
09-25 1074
最近有个项目调用google map，希望用午夜蓝样式的地图，找了好久找到下面这个网站，提供了很多自定义的style https://snazzymaps.com/explore 转载于:https://www.cnblogs.com/marost/p/7591483.html...
GoogleMapAPI接口文档说明
cc_1209的博客
12-27 4427
1、 Directions API 使用HTTP请求来访问驾驶、骑自行车、步行和公共交通路线。路点提供了通过特定位置改变路线的能力。指定原点、目的地和航点，作为文本串（例如“芝加哥、IL”或“达尔文、NT、澳大利亚”）或作为纬度/经度坐标。 https://developers.google.com/maps/documentation/directions/start?hl=zh_CN 2、 D...
Google Map Api 谷歌地图接口整理
热门推荐
钟爱技术
01-17 1万+
Google Map Api 谷歌地图接口整理 一：基本知识：  1. 使用谷歌地图 API 的第一步就是要注册一个 API 密钥，需要注重一下两点：     1.假如使用 API 的页面还没有发布，只是在本地调试，可以不用密钥，随便用个字符串代替就可以了。     2.API 密钥只对网站目录或者域有效。对不同域的网页，需要用这些域分别注册不同的密钥 2.页面引用jav
Google Map API 使用总结
weixin_34221775的博客
08-26 463
Google Map API (一)：显示一个最基本的地图 1 实现一个地图：&lt;head&gt;中引用： &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"&gt;&lt;/script&gt; Html里面合适的位置定义： &lt;div id="m...
Google Map API V2
DaiLM的专栏
05-13 175
以后如果要开发包含google map的程序就更麻烦咯 [url]http://www.cnblogs.com/mengdd/archive/2013/01/01/2841390.html[/url] 找到篇不错的文章，大家可以参考一下 [url]http://blog.sina.com.cn/s/blog_c2839d410101jahv.html[/url] 1. 创建Andr...
使用Google Map Api在Android平台上开发地图应用1
kbest的专栏
07-09 907
首先实现地图应用的界面：需要在主界面展示一个“最近跟踪”（自己的所在位置记录）的列表，首先在res/value目录下string.xml文件添加一些需要用到的字符串的定义，实现代码如下：
基于ssm的理发店会员管理系统设计与实现.docx
最新发布
09-14
基于ssm的理发店会员管理系统设计与实现.docx
掌握Google Map API V2实战教程
本篇文档详细介绍了Google Map API V2的使用方法，是关于在网页中集成Google地图的强大工具。作者郑华超从Google Maps的历史背景和不同类型入手，帮助读者理解其起源和发展，包括普通地图、卫星地图和地形地图的区别...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值