上個禮拜我做一個關於Google地圖的引用，今天拿來跟大家分享一下。下面是做出來的功能效果圖
下面是代碼，複製可用。
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>
<script type="text/javascript">
var map;
var markersArray= [];
var infowindow;
var openPoly = false;
var openCir = false;
var openRect = false;
var start = null;
var polysPoint= [];
var path;
var poly;
var circle;
var circles = new Array();
var startPoint,endPoint;
function initialize() {
var latlng = new google.maps.LatLng(38.92416066460569, 121.58294677734375);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function (event) {
if(infowindow != null) infowindow.setMap(null);
if(openPoly) polyline(event.latLng); //折線
if(openCir) drawCircle(event.latLng); //畫園
else if(openRect == false)
placeMarker(event.latLng); //標記
document.getElementById("value").innerHTML = event.latLng;
});
google.maps.event.addListener(map, 'rightclick', function(event) {
if(infowindow != null) infowindow.setMap(null);
showImage(event.latLng);
});
google.maps.event.addListener(map, 'mousedown', function(event) {
if(openRect) {
map.setOptions({draggable: false});
startPoint = event.latLng;
}
});
google.maps.event.addListener(map, 'mouseup', function(event) {
if(openRect) {
map.setOptions({draggable: true});
endPoint = event.latLng;
drawRectangle();
}
});
}
google.maps.event.addDomListener(window, "load", initialize);
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
icon:"200882564246843778013.png",
title:"hello,world!"
})
if(openPoly) polyline(location);
markersArray.push(marker);
}
function deleteMarker(){
for(var i = 0; i < markersArray.length; i++)
markersArray[i].setMap(null);
}
function searchMarker(){
var x = document.getElementById("x").value;
var y = document.getElementById("y").value;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(x, y),
map: map,
icon:"12c54XAR0-413I.png",
title:"hello,world!"
})
}
function showImage(pos){
var img = "<img src='u=1058620012,3898037788&fm=21&gp=0.jpg'/><br/><span>hello,這裏可以顯示更多文本!</span>";
infowindow = new google.maps.InfoWindow({
content:img,
size: new google.maps.Size(50,50),
position:pos});
infowindow.open(map);
}
function polyline(point){
if(start == null) {
start = point;
return null;
}
var flightPlanCoordinates = [start,point];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2});
flightPath.setMap(map);
start = point;
}
function drawCircle(point){
var r = document.getElementById("r").value;
circle = new google.maps.Circle({
map: map,
radius: r,
fillColor: '#AA0000',
center: point
});
console.log(circle);
circles[circles.length] = circle;
}
function drawRectangle(){
var x1 = startPoint.lat();
var y1 = startPoint.lng();
var x2 = endPoint.lat();
var y2 = endPoint.lng();
var point1,point2;
if(x1 <= x2 && y1 <= y2){
point1 = new google.maps.LatLng(x2, y1);
point2 = new google.maps.LatLng(x1, y2);
}
if(x1 >= x2 && y1 <= y2){
point1 = new google.maps.LatLng(x1, y2);
point2 = new google.maps.LatLng(x2, y1);
}
if(x1 <= x2 && y1 >= y2){
point1 = new google.maps.LatLng(x1, y2);
point2 = new google.maps.LatLng(x2, y1);
}
if(x1 >= x2 && y1 >= y2){
point1 = new google.maps.LatLng(x2, y1);
point2 = new google.maps.LatLng(x2, y1);
}
var flightPlanCoordinates = [startPoint,point1,endPoint,point2,startPoint];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2});
flightPath.setMap(map);
}
function openPolyLine(){
if(openPoly == false) openPoly = true;
else {
openPoly = false;
start = null;
}
}
function openRectangle(){
if(openRect == false) openRect = true;
else openRect = false;
}
function openCircle(){
if(openCir == false) openCir = true;
else openCir = false;
}
function searchAddress(){
var geocoder = new GClientGeocoder();
var address = getElementById("address");
map.addControl(new GSmallMapControl());
geocoder.getLatLng(address, function(point) {
if (!point) {
alert('Google Maps 找不到該地址，無法顯示地圖！'); //如果Google Maps無法顯示該地址的警示文字
} else {
map.setCenter(point, 5);//遠距大小
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml("你的說明");//出現在說明欄的內容
}
})
}
</script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:92%"></div>
<input type="button" value="清除標記" onclick="deleteMarker()"/>
根據座標查位置：<input type="text" id="x"/>
<input type="text" id="y"/>
<input type="button" value="查找" onclick="searchMarker()"/>
<input type="button" value="折線標記" onclick="openPolyLine()"/>
<input type="button" value="矩形標記" onclick="openRectangle()"/>
<input type="button" value="圓形標記" onclick="openCircle()"/>
半徑：<input type="text" id="r"/>
根據座標查位置：<input type="text" id="address"/>
<input type="button" value="查找" onclick="searchAddress()"/>
<a id="value"></a><br/>
</body>
</html>