Google JavaScript API 开发实例

最新推荐文章于 2024-06-05 15:18:08 发布

Json_Nie

最新推荐文章于 2024-06-05 15:18:08 发布

阅读量1k

点赞数

分类专栏： HTML JaveScript 文章标签： javascript api google button function animation

本文链接：https://blog.csdn.net/DreamD1987/article/details/8089000

版权

HTML 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

JaveScript

7 篇文章 0 订阅

订阅专栏

最近需要做一个演示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 singapore
var 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 οnclick="clearOverlays();" type=button value="Clear Overlays">
      <input οnclick="showOverlays();" type=button value="Show All Overlays">
      <input οnclick="deleteOverlays();" type=button value="Delete Overlays">
	  <!--input οnclick="drop();" type=button value="Drop All Location"-->
	  <input οnclick="countfirst();" type=button value="Count first location">
	  <input οnclick="countsecond();" type=button value="Count second location">
	  <input οnclick="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

Json_Nie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Google JavaScript API 开发实例

最近需要做一个演示demo不得已需要用到Google Map Api函数下面的代码仅仅是初级的demo，仅仅涉及api的使用不包括数据库的调用 html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100%
复制链接

扫一扫