Google JavaScript API 开发实例

来源：互联网发布：预防网络诈骗心得体会编辑：程序博客网时间：2024/05/18 03:14
最近需要做一个演示demo
不得已需要用到Google Map Api函数
下面的代码仅仅是初级的demo，仅仅涉及api的使用
不包括数据库的调用
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css">   html { height: 100% }   body { height: 100%; margin: 0px; padding: 0px }  #map_canvas { height: 100% } </style> <script type="text/javascript"             src="https://maps.google.com/maps/api/js?sensor=true"> </script> <script type="text/javascript"> //this is the location of singaporevar sgLat = 1.360017;var sgLng = 103.807640;var map;var markers = [];var Locat = [];var count = 0;var countf = 500;var counts = 500;var linewidth = 1;var cityCircle;var cityCircle2;var cityCircle1s = [];var cityCircle2s = [];var lineM = [];    function initialize() {     var latlng = new google.maps.LatLng(sgLat, sgLng);     var myOptions = {zoom: 12,       center: latlng,      mapTypeId: google.maps.MapTypeId.ROADMAP};     map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);    /*var polyOptions = {          strokeColor: "#000000",          strokeOpacity: 1.0,          strokeWeight: 7    }poly = new google.maps.Polyline(polyOptions);    poly.setMap(map);*/google.maps.event.addListener(map, 'click', function(event) {addMarker(event.latLng);});//google.maps.event.addlistener(map, 'click', addline);  /*var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);var marker = new google.maps.Marker({position: latlng,  title:"Hello World!", animation: google.maps.Animation.DROP});*///marker.setMap(map);  }// Add a marker to the map and push to the array.function addMarker(location) {//var path = poly.getPath();//path.push(location);marker = new google.maps.Marker({     position: location, //title: '#' + path.getLength(), animation: google.maps.Animation.DROP, draggable:true,    map: map});/*var populationOptions = {            strokeColor: '#FF0000',            strokeOpacity: 0.8,            strokeWeight: 2,            fillColor: '#FF0000',            fillOpacity: 0.35,            map: map,            center: location,            radius: 2000          };*/    //var cityCircle = new google.maps.Circle(populationOptions);Locat.push(location);markers.push(marker);}  // Sets the map on all markers in the array.function setAllMap(map) {for (var i = 0; i < markers.length; i++) {  markers[i].setMap(map);}}function setCircle(map) {for (var i = 0; i < cityCircle1s.length; i++) {cityCircle1s[i].setMap(null);}for (var j = 0; j < cityCircle2s.length; j++) {cityCircle2s[j].setMap(null);}for (var j = 0; j < lineM.length; j++) {lineM[j].setMap(null);}linewidth = 1;}/*function drop(){for(var j = 0; j< markers.length; j++){setTimeout(function() { addMarker();}, j*200);}}*/// Removes the overlays from the map, but keeps them in the array.function clearOverlays() {setAllMap(null);}// Shows any overlays currently in the array.function showOverlays() {setAllMap(map);}// Deletes all markers in the array by removing references to them.function deleteOverlays() {clearOverlays();markers = [];Locat = [];//cityCircle.setMap(null);//cityCircle2.setMap(null);setCircle(null);}function countfirst() {//countf = 500;var location = Locat[0];//if(cityCircle!=[]){//cityCircle.setMap(null);//}//var location = new google.maps.LatLng(sgLat, sgLng);//cityCircle.setMap(null);var populationOptions = {            strokeColor: '#FFFFFF',            strokeOpacity: 0.8,            strokeWeight: 2,            fillColor: '#FF0000',            fillOpacity: 0.35,            map: map,            center: location,            radius: countf          };countf = countf + 50;//alert(countf);    cityCircle = new google.maps.Circle(populationOptions);cityCircle1s.push(cityCircle);}function countsecond() {//counts = 500;//cityCircle2.setMap(null);var location = Locat[1];var populationOptions = {            strokeColor: '#FFFFFF',            strokeOpacity: 0.8,            strokeWeight: 2,            fillColor: '#FF0000',            fillOpacity: 0.35,            map: map,            center: location,            radius: counts          };counts = counts + 50;//alert(counts);    cityCircle2 = new google.maps.Circle(populationOptions);cityCircle2s.push(cityCircle2);}function linetwoloc() {var flightPlanCoordinates = [Locat[0], Locat[1]];var flightPath = new google.maps.Polyline({path: flightPlanCoordinates,     strokeColor: "#0000ff",     strokeOpacity: 1.0,     strokeWeight: linewidth }); flightPath.setMap(map);lineM.push(flightPath);linewidth = linewidth + 1;}//google.maps.event.addDomListener(window, 'load', initialize);</script> </head> <body onLoad="initialize()">   <div><br/><form>  <input onclick="clearOverlays();" type=button value="Clear Overlays">      <input onclick="showOverlays();" type=button value="Show All Overlays">      <input onclick="deleteOverlays();" type=button value="Delete Overlays">  <!--input onclick="drop();" type=button value="Drop All Location"-->  <input onclick="countfirst();" type=button value="Count first location">  <input onclick="countsecond();" type=button value="Count second location">  <input onclick="linetwoloc();" type=button value="Test the line">  </form><br/></div><!--div id="content"--><div id="map_canvas" style="width: 85%; height: 85%"></div><!--/div--><!--div id="live_board" style="width: 13%; height: 85%;overflow:hidden;"--><!--ul id="box" style="width: 100%;"--></body> </html>
使用Dreamdweaver编译。
具体学习大家可以参考：
https://developers.google.com/maps/documentation/javascript/basics?hl=zh-CN#Libraries