JavaScript 谷歌地图定制（基于Javascript）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 谷歌地图定制（基于Javascript）相关的知识，希望对你有一定的参考价值。
<script type="text/javascript">
function load(){
//<![CDATA[
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
//map.addControl(new GSmallMapControl());
map.enableScrollWheelZoom();
// Set up the copyright information
var myCopyright = new GCopyrightCollection("Custom Layer");
myCopyright.addCopyright(new GCopyright(1,new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)), 0,'©2008 LPA'));
// Create the tile layer overlay and
var tilelayers = [new GTileLayer(myCopyright , 1, 15)];
tilelayers[0].getTileUrl = CustomGetTileUrl;
var custommap = new GMapType(tilelayers, new GMercatorProjection(17), "Custom Layer", {errorMessage:"No data available"});
map.addMapType(custommap);
map.setMapType(custommap);
map.setCenter(new GLatLng(35.460669951495305, 10.546875), 1);
addCustomIcon("country.xml", 10);
GEvent.addListener(map, "zoomend", function(oldLevel, newLevel) {
if(newLevel==12){
map.setZoom(15);
map.setCenter(new GLatLng(1.290506, 103.850663));
}
if(oldLevel ==1){
map.setZoom(10);
}
if(oldLevel == 15){
map.setZoom(11);
}
if(newLevel == 15){
map.clearOverlays();
}
if(newLevel == 11){
map.clearOverlays();
map.setCenter(new GLatLng(1.33746396806039, 103.82080078125), 11);
}
if(newLevel <= 10){
map.clearOverlays();
map.setCenter(new GLatLng(1.371443, 103.833160), 10);
}
});
GEvent.addListener(map, "clearoverlays", function() {
var zoomLevel = map.getZoom();
if(zoomLevel == 15){
//project location display
var request = GXmlHttp.create();
request.open("GET", "position.xml", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = GXml.parse(request.responseText);
// obtain the array of markers and loop through it
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new GLatLng(lat,lng);
var label = markers[i].getAttribute("label");
var url= "../project/"+markers[i].getAttribute("loc")+"/";
map.addOverlay(createMarker(point, i, url));
}
}
}
request.send(null);
//end of display
}
if(zoomLevel == 11){
addCustomIcon("district.xml", 15);
}
});
function addCustomIcon(xmlfile, zoomlevel){
// district overlay display
var circleIcon = new GIcon(G_DEFAULT_ICON);
//var zoom = map.getZoom();
var size = 10;
circleIcon.image = "icon10.png";
circleIcon.iconSize = new GSize(size,size);
circleIcon.shadow = "transparent10.png";
circleIcon.shadowSize = new GSize(size,size);
circleIcon.iconAnchor = new GPoint(size/2, size/2);
var markerOptions = { icon:circleIcon };
// for customized marker
var req = GXmlHttp.create();
req.open("GET", xmlfile, true);
req.onreadystatechange = function() {
if (req.readyState == 4) {
var xmlDoc = GXml.parse(req.responseText);
// obtain the array of markers and loop through it
var zones = xmlDoc.documentElement.getElementsByTagName("zone");
for (var i = 0; i < zones.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(zones[i].getAttribute("lat"));
var lng = parseFloat(zones[i].getAttribute("lng"));
var point = new GLatLng(lat,lng);
var marker = new GMarker(point, markerOptions);
map.addOverlay(marker);
GEvent.addListener(marker, "click", function(latlng) {
if(latlng)
map.setCenter(latlng, zoomlevel);
});
}
}
}
req.send(null);
//end of display
}
}
}
//----------------------------other functions ----------------------------------
function createMarker(point, i, url) {
var blueIcon = new GIcon(G_DEFAULT_ICON);
var size = 20;
blueIcon.image = "icon15_"+i+".png";
blueIcon.iconSize = new GSize(size,size);
blueIcon.shadow = "transparent10.png";
blueIcon.shadowSize = new GSize(size,size);
blueIcon.iconAnchor = new GPoint(size/2, size/2);
var markerOptions = { icon:blueIcon };
var marker = new GMarker(point, markerOptions);
marker.value = i;
GEvent.addListener(marker, "click", function(latlng) {
var target = "floatwindow";
/*
var pixel = map.fromLatLngToContainerPixel(latlng);
document.getElementById(target).style.top = pixel.y;
document.getElementById(target).style.left = pixel.x;
*/
document.getElementById(target).innerHTML = ' Fetching data...';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if (req != undefined) {
req.onreadystatechange = function() {
if (req.readyState == 4) { // only if req is "loaded"
if (req.status == 200) { // only if "OK"
var str = req.responseText;
var result = str.replace(/src=\"/gi, "src=\""+url);
document.getElementById(target).innerHTML = result;
} else {
document.getElementById(target).innerHTML=" AHAH Error:\n"+ req.status + "\n" +req.statusText;
}
}};
req.open("GET", url+"index.html", true);
req.send("");
}
document.getElementById("cross").style.zIndex = 5;
document.getElementById("floatwindow").style.zIndex = 4;
});
return marker;
}
function CustomGetTileUrl(a,b) {
var z = b;
var f = "/sg"+b+"/"+"Tile_"+a.x+"_"+a.y+"_"+z+".jpg";
return f;
}
function toggleBack(){
document.getElementById("cross").style.zIndex = 1;
document.getElementById("floatwindow").style.zIndex = 2;
}以上是关于JavaScript 谷歌地图定制（基于Javascript）的主要内容，如果未能解决你的问题，请参考以下文章
谷歌地图 + javascript 仅在警报被编码时正确呈现
ArcGIS api for javascript——地图配置-定制缩放动画，定制缩放框