Google 地图 API 是一种通过 JavaScript 将 Google 地图嵌入到您的网页的 API。该 API 提供了大量实用工具用以处理地图(正如 http://maps.google.com 网页上的地图),并通过各种服务向地图添加内容,从而使您能够在您的网站上创建功能全面的地图应用程序。
1.初始化:
var map;//地图
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));//map_canvas为容器Id
//添加控件
//map.addControl(new GLargeMapControl());
//map.addControl(new GMapTypeControl());
// map.addControl(new google.maps.LocalSearch(),
//new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10, 20)));
}
var centerLaLngt = new GLatLng(centerLatLng);
map.setCenter(centerLatLng, 14);
2.点击地图获得坐标:
GEvent.addListener(map, "click", function(e1, e2, e3) {
document.getElementById("lnglat").innerHTML = e2;
})
3.函数调用:
var activeLatlng;//当前活动坐标
function createMarker(data) {
var c_pt = new GLatLng(data.latlng[0], data.latlng[1]);
var marker = new GMarker(c_pt, { draggable: true });
var myHtml = getWindowInfo(data);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(myHtml);
});
GEvent.addListener(marker, "dragstart", function(e) {//鼠标拖动开始
activeLatlng = e;
map.closeInfoWindow();
});
GEvent.addListener(marker, "dragend", function(e) {//鼠标拖动结束
for (var i = 0; i < gMapData.length; i++) {
if ((gMapData[i].latlng[0] == activeLatlng.lat())
&& (gMapData[i].latlng[1] == activeLatlng.lng())) {
gMapData[i].latlng = [e.lat(), e.lng()];
for (var j = 0; j < allmarkers.length; j++) {
if (allmarkers[j].getLatLng().lat() == activeLatlng.lat()
&& allmarkers[j].getLatLng().lng() == activeLatlng.lng()) {
allmarkers.splice(j, 1);
var mk = createMarker(gMapData[i]);
allmarkers.push(mk);
mk.openInfoWindowHtml(getWindowInfo(gMapData[i]));
break;
}
}
break;
}
}
});
return marker;
}
function addEmptyMarker(pt, isUpdate) {//添加一个无内容marker
var marker = new GMarker(pt, {
draggable: true,
icon: new GIcon(iconData)
});
var myHtml = getEmptyWindowInfo(pt, {
"nameId": new Date().getTime(),
"isUpdate": isUpdate
});
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(myHtml);
});
GEvent.addListener(marker, "dragstart", function() {
map.closeInfoWindow();
});
GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml(myHtml);
});
//marker.bindInfoWindowHtml(myHtml);
map.addOverlay(marker);
marker.openInfoWindowHtml(myHtml);
}
//点击土地添加时设置infowindow内容
function getWindowInfo(obj) {
}
function getEmptyWindowInfo(pt, ids) {
}
/*
pt:数组 删除marker
*/
function deleteMarker(pt) {
for (var i = 0; i < gMapData.length; i++) {
if ((gMapData[i].latlng[0] == pt[0])
&& (gMapData[i].latlng[1] == pt[1])) {
gMapData.splice(i, 1);
for (var j = 0; j < allmarkers.length; j++) {
if (allmarkers[j].getLatLng().lat() == pt[0]
&& allmarkers[j].getLatLng().lng() == pt[1]) {
allmarkers.splice(j, 1);
break;
}
}
break;
}
}
}
function showUpdate(pt) {
for (var j = 0; j < allmarkers.length; j++) {
if (allmarkers[j].getLatLng().lat() == pt[0]
&& allmarkers[j].getLatLng().lng() == pt[1]) {
var inf = getInfoByPt(pt);
allmarkers[j].openInfoWindowHtml(getEmptyWindowInfo(allmarkers[j].getLatLng(),
{
isUpdate: true,
nameId: new Date().getTime(),
Data: inf
}));
}
}
return false;
}
//标记地图
function markMap() {
map.clearOverlays();
allmarkers = [];
for (var i = 0; i < gMapData.length; i++) {
var m = createMarker(gMapData[i]);
allmarkers.push(m);
map.addOverlay(m);
}
}
var listener;
//开始标记
function beginMark() {
listener = GEvent.addListener(map, "click", function(e2, e) {
addEmptyMarker(e, false);
});
}
//结束标记
function endMark() {
GEvent.removeListener(listener);
}
/*
pt:数组
*/
function deleteM(pt) {
if (confirm("确定删除?")) {
deleteMarker(pt);
//更新服务器 action=delete
markMap();
}
return false;
}
function test() {
markMap()
}
//根据latlng获得信息
function getInfoByPt(pt) {
for (var i = 0; i < gMapData.length; i++) {
if ((gMapData[i].latlng[0] == pt[0])
&& (gMapData[i].latlng[1] == pt[1])) {
return gMapData[i];
}
}
return null;
}
function add(pt, e) {
var markInfo = {
"name": e.value,
"latlng": pt,
"address": "HangZhss",
"tel": "123s2",
"email": "x@live.com"
};
gMapData.push(markInfo);
//更新服务器 action=add
markMap();
}
function update(pt, e) {
for (var j = 0; j < allmarkers.length; j++) {
if (allmarkers[j].getLatLng().lat() == pt[0]
&& allmarkers[j].getLatLng().lng() == pt[1]) {
var inf = {
"name": e.value,
"latlng": pt,
"address": "浙江杭州",
"tel": "12345",
"email": "X@live.com"
};
//alert(inf.name)
var infoStr = getWindowInfo(inf);
allmarkers[j].openInfoWindowHtml(infoStr);
for (var i = 0; i < gMapData.length; i++) {
if ((gMapData[i].latlng[0] == pt[0])
&& (gMapData[i].latlng[1] == pt[1])) {
gMapData[i].name = e.value;
gMapData[i].latlng = pt;
gMapData[i].address = "add";
gMapData[i].tel = "9877546";
gMapData[i].email = "x@live.com";
break;
}
}
break;
}
}
markMap();
}
最终效果: