Google JavaScript API 开发实例
最近需要做一个演示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 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