JavaScript 测试Google Map API(testgmap.js)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript 测试Google Map API(testgmap.js)相关的知识,希望对你有一定的参考价值。
// Main
function load() {
// Check compatibility
if (GBrowserIsCompatible()) {
gmap2 = new GMap2(document.getElementById("map"));
gmap2.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Adding controls to the map
gmap2.addControl(new GLargeMapControl());
gmap2.addControl(new GMapTypeControl());
// Register an event listener to display the latitude and longitude
GEvent.addListener(gmap2, "moveend", function() {
var center = gmap2.getCenter();
document.getElementById("gmessage").innerHTML = center.toString();
});
} else {
var map = document.getElementById("map");
map.innerHTML = "You cannot use this browser.<br />";
}
}
// Move map
function moveMap() {
window.setTimeout(
function() { gmap2.panTo(new GLatLng(37.4569, -122.1569)); },
1000
);
}
// Opening an info window
function displayInfoWindow() {
gmap2.openInfoWindow(gmap2.getCenter(), document.createTextNode("Hello, world"));
}
// Opening an info window with HTML
function displayInfoWindowHtml() {
var msg = "<div style='width:250px'><a href='http://www.yahoo.com/'><b>Yahoo!.com</b></a></div>";
gmap2.openInfoWindowHtml(gmap2.getCenter(), msg);
}
// Displays a polyline
// you must include the VML namespace and CSS in your HTML document
// to view polylines in IE.
function mapOverlaysPolyline() {
var points = [];
points.push(new GLatLng(37.4219, -122.1119));
points.push(new GLatLng(37.4419, -122.1619));
points.push(new GLatLng(37.4719, -122.1319));
gmap2.addOverlay(new GPolyline(points, '#000000', 5, 0.7));
}
// Creating icon
function mapOverlaysIcon() {
var icon = new GIcon();
icon.image = "http://xoops.ikinuku.com/images/gmap/yazirusi.png";
icon.shadow = "http://xoops.ikinuku.com/images/gmap/shadow.png";
icon.iconSize = new GSize(20, 34);
icon.shadowSize = new GSize(37, 34);
icon.iconAnchor = new GPoint(20, 34);
var marker = new GMarker(gmap2.getCenter(), icon);
gmap2.addOverlay(marker);
}
// Creating icon which are always shown at center of the map
function mapOverlaysCrossIcon() {
var icon = new GIcon();
icon.image = "http://xoops.ikinuku.com/images/gmap/cross.png";
icon.iconSize = new GSize(100, 100);
icon.iconAnchor = new GPoint(50, 50);
var marker = new GMarker(gmap2.getCenter(), icon);
gmap2.addOverlay(marker);
GEvent.addListener(gmap2, "move", function() {
gmap2.clearOverlays();
marker = new GMarker(gmap2.getCenter(), icon);
gmap2.addOverlay(marker);
});
}
// Display info windows above marker
// This uses simple api to show a thumbnail of web page.
function mapOverlaysMarker1() {
var point = new GLatLng(37.4285, -122.1293);
var marker = new GMarker(point);
gmap2.addOverlay(marker);
var html = '<div style="width:300px"><a href="http://blog.ikinuku.com/">'
+ '<img src="http://img.simpleapi.net/small/http://blog.ikinuku.com/"'
+ ' alt="" width="128" height="128" hspace="4" vspace="4" align="left" border="0"></a><br />'
+ '<a href="http://blog.ikinuku.com/"><b>My Blog</b></a></div>';
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
}
// Display tabbed info windows Above marker
function mapOverlaysMarker2withTab() {
var point = new GLatLng(37.4348, -122.1568);
var marker = new GMarker(point);
gmap2.addOverlay(marker);
var img = new Image();
img.src = 'http://xoops.ikinuku.com/images/gmap/daibutu01.gif';
var html = '<div style="width:300px"><img src="' + img.src + '" align="left"/>'
+ '<b>[[Display image test]]</b><br />'
+ 'Sample image<br />'
+ 'Big Buddha</div>';
var infoTabs = [
new GInfoWindowTab("Tab 1", html),
new GInfoWindowTab("Tab 2", "Tab test")
];
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml(infoTabs);
});
}
// Display info windows with music link above markers
function mapOverlaysMarker3withPodcast() {
var point = new GLatLng(37.4356, -122.1380);
var marker = new GMarker(point);
gmap2.addOverlay(marker);
var html = '<div style="width:300px"><a href="http://mt.ikinuku.com/podcast/test.mp3">Test music</a></div>';
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
}
// Download a csv file by using GDownloadUrl class
function downloadCsvCoordinateFile() {
GDownloadUrl('http://xoops.ikinuku.com/misc/ajax/sample.csv', function(data, responseCode) {
var rows = data.split('\n');
for (var i = 0; i < rows.length; i++) {
var lat = rows[i].split(',')[0];
var lon = rows[i].split(',')[1];
var point = new GLatLng(lat, lon);
var marker = new GMarker(point);
gmap2.addOverlay(marker);
var music = rows[i].split(',')[2];
var title = rows[i].split(',')[3];
createInfoWindow(marker, music, title);
}
});
}
// Click handling
function mapOverlaysMarkerShowHide() {
GEvent.addListener(gmap2, "click", function(overlay, point) {
if (overlay) {
gmap2.removeOverlay(overlay);
} else {
gmap2.addOverlay(new GMarker(point));
}
});
}
// Clear all overlays
function clearOverlays() {
gmap2.clearOverlays();
GEvent.clearListeners(gmap2, "click");
GEvent.clearListeners(gmap2, "move");
}
以上是关于JavaScript 测试Google Map API(testgmap.js)的主要内容,如果未能解决你的问题,请参考以下文章
使用 google map javascript api v3 在 google map 上添加多个目的地
javascript google map api get city #js #map #filter
javascript google map api get city #js #map #filter