//point = new GLatLng(36.94,106.08); //设置点的经纬度 //var er = new GMarker(point); //初始化点的位置 //map.openInfoWindowHtml(point, "hello world"); //在点上添加1个提示框 显示hello world } }
//解析地名 function showAddress() { var address=document.all("address").value; if (geocoder) { geocoder.getLatLng( address, function(point) { if (!point) { alert("不能解析: " + address); } else { map.setCenter(point, 13); var er = new GMarker(point); map.addOverlay(er); er.openInfoWindowHtml(address); } } ); } }
装备三张不同分辨率的图,比如:256*256,512*512,1024*1024,显示区是256*256.
拖动:就是把html元素top,left变化了。
放大缩小:假设不能拖动,小图是全部显示,中图应该显示哪个位置呢?大图应该显示哪个位置?要是能拖动,把位移量代进去,又要怎要显示。这些弄清楚了,基本原理就搞懂了。
要是实际应用,还要把图片切割,目的是为了快速显示。还要对已经显示的图片做缓存之内的。
我2007年写过一个类似的地图,楼主不说,我都忘记自己还弄过这些了。
利用JS调用图就可以了
给你个示例代码看看<html>
<head>
<title>google map sample</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<!--引入了Google Map的API-->
<script charset="utf-8" src="http://ditu.google.cn/maps?file=api&v=2&key=abcdefg" type="text/javascript"></script> <script type="text/javascript">
var map = null; //保存地图对象
var geocoder = null; // 保存地图地址解析对象
//载入事件
function load() {
if (GBrowserIsCompatible()) {
//创建地图对象
map = new GMap2(document.getElementById("map"));
//添加完整地图控件
map.addControl(new GLargeMapControl());
//添加地图的视图切换功能
map.addControl(new GMapTypeControl());
//添加地形视图
map.addMapType(G_PHYSICAL_MAP);
//Google Map最终是根据位置的经度纬度来查找的
map.setCenter(new GLatLng(36.94,106.08),4);
//允许滚轮
map.enableScrollWheelZoom();
//地址解析对象
geocoder = new GClientGeocoder();
//point = new GLatLng(36.94,106.08); //设置点的经纬度
//var er = new GMarker(point); //初始化点的位置
//map.openInfoWindowHtml(point, "hello world"); //在点上添加1个提示框 显示hello world
}
}
//解析地名
function showAddress() {
var address=document.all("address").value;
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert("不能解析: " + address);
} else {
map.setCenter(point, 13);
var er = new GMarker(point);
map.addOverlay(er);
er.openInfoWindowHtml(address);
}
}
);
}
}
</script>
</head>
<body onLoad="load()" onUnload="GUnload()">
<p>爱房网 </p>
您要在哪里找房子?
<input name="address" type="text" id="address" value="深圳南山" />
<input type="button" name="Submit" value="地图找房" onClick="showAddress()" />
<hr />
<div id="map" style="width: 1240px; height: 550px"></div>
</body>
</html>
对,我就是要做一个拓扑图,点击或鼠标移到营业厅上面可以看到相关信息。google map很强大,但不适合这个。