一个基于地图的便签

标签: , ,

如果本页在IE下弹出一些莫明其妙的警告窗口，完全正常，不必理会，使用FireFox就不会有这个问题。

正在载入地图，请稍候……


网页源代码：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://ditu.google.com/maps?file=api&v=2&key=abcdefg" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
var map;
var markercount = 0;
function gLoad() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GOverviewMapControl());
map.setCenter(new GLatLng(31.24847031868669, 121.5036392211914), 13);
GEvent.addListener(map, "click", function(marker, point) {
if (marker) {} else {
gCreateMarker(point, "新标记"+(++markercount)+"");
}});
gCreateMarker(new GLatLng(31.226454094040136, 121.5036392211914), "新建<strong>标记</strong>:在地图空白处单击\n移动<strong>标记</strong>:请用鼠标任意拖动\n编辑内容:支持HTML代码\n<a href=\"http://www.gomain.net\">过门制作</a>");
}}
function gCreateMarker(point, str){
var marker = new GMarker(point, {draggable: true});
GEvent.addListener(marker, "click", function() {
gOpenInfo(marker,str);
});
GEvent.addListener(marker, "dragstart", function() {
map.closeInfoWindow();
});
GEvent.addListener(marker, "dragend", function() {
gOpenInfo(marker,str);
});
map.addOverlay(marker);
gOpenInfo(marker,str);
}
var localmarker = null;
function gOpenInfo(marker,str){
localmarker = marker;
var p = marker.getPoint();
var e = p.lng();
var n = p.lat();
marker.openInfoWindowHtml("<p>"+str.replace(/\r/g,"").replace(/\n/g,"<br />")+"</p><p>"+(n<0?("南纬:"+(0-n)) :( "北纬:"+n))+"<br />"+(e<0?("西经:"+(0-e)) :( "东经:"+e))+"</p><small><a href=\"javascript:void(gBeginEdit('"+str.replace(/&/g,"&").replace(/\"/g,""").replace(/'/g,"'").replace(/</g,"<").replace(/>/g,">").replace(/\n/g,"\\n").replace(/\r/g,"\\r")+"'));\">编辑内容</a> <a href=\"javascript:void(gCloseMarker());\">删除标记</a></small>");
}
function gCloseMarker(){
if(localmarker!=null){
map.removeOverlay(localmarker);
localmarker = null;
}
}
function gBeginEdit(str){
if(localmarker!=null){
localmarker.openInfoWindowHtml("<form action=\"#\" onsubmit=\"return gEndEdit(this);\"> <textarea name=\"markerstr\" id=\"markerstr\" cols=\"30\" rows=\"8\" tabindex=\"1\" >"+str+"</textarea><br /><input name=\"submit\" type=\"submit\" id=\"submit\" tabindex=\"2\" value=\"完成修改\" /></form>");
}
}
function gEndEdit(theform){
if(localmarker!=null){
var point = localmarker.getPoint();
map.removeOverlay(localmarker);
localmarker = null;
gCreateMarker(point, theform.markerstr.value);
}
return false;
}
//]]></script>
</head>
<body onload="gLoad()" onunload="GUnload()">
<div id="map" style="width: 450px; height: 400px;"></div>
</body>
</html>

对《一个基于地图的便签》有 1 条评论

  1. 地图服务原来超简单 | 过门网 blog 在 2007年11月29日 星期四 5:40 am 说:

    [...] 点击打开地图 [...]

发表一条评论