带标注的电子地图

时间：2010年1月28日  分类：web前端  关键词: ,

现在越来越多的网站会在“联系我们”里面会加上一个电子地图，标明办公地点。之前我用mapabc的地图API制作过电子地图，只是虽然能够定位显示公司所在地点，但是无法加上标注（我没有进行更深层次的研究）。最近偶然间获得一个根据Google 地图 API制作的电子地图，属于傻瓜式，只要简单修改几处就可以生成一个属于自己的电子地图。

首先，你必须先从 http://code.google.com/intl/zh-CN/apis/maps/signup.html 获取一个Google 地图 API 密匙，然后在放置电子地图的页面插入如下代码：

<script src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;oe=utf-8&amp;key=加密匙处" type="text/javascript"></script>
<div id="map" style="width:580px; height:400px;"></div>
<script src="map.js" type="text/javascript"></script>

然后将下面代码保存为map.js，不过要修改下标注地点的经度纬度，以及需要标注的内容。

var map;
	var myMarker;
	var geocoder = null;
	var _lat=32.039876; //纬度
	var _lng=118.786798; //经度
	window.onload = function() {
		if (GBrowserIsCompatible()) {  
        	map = new GMap2(document.getElementById("map"));
        	var center = new GLatLng(_lat,_lng);
         	map.addControl(new GLargeMapControl()); 
			map.addControl(new GScaleControl());
			map.enableScrollWheelZoom();
			geocoder = new GClientGeocoder();
    	}
 
			var _center = new GLatLng(_lat,_lng);
			map.setCenter(_center,18);
			Mark(_lat,_lng);
 
	}
 
function AddMarker(){
		document.getElementById("btn_addMarker").disabled = true;
		var ll = map.getCenter();
		document.getElementById("lat").value = ll.lat();
		document.getElementById("lng").value = ll.lng();
		Mark(ll.lat(),ll.lng());
	}
 
function Mark(lat,lng){
	myMarker = new GMarker(new GLatLng(lat,lng), {draggable: true});
	GEvent.addListener(myMarker, "click", function() {
   		 myMarker.openInfoWindowHtml("<b style=\"font-size:12px; margin-bottom:0\">公司名称</b><p style=\"margin-top:5px;font-size:12px;line-height:15px;\">公司地址</p>");	
	});
	GEvent.addListener(myMarker, "dragstart", function() {myMarker.closeInfoWindow();});
	GEvent.addListener(myMarker, "dragend", function() {
	var gll = myMarker.getLatLng();
	myMarker.openInfoWindowHtml("<b style=\"font-size:12px;margin-bottom:0\">公司名称</b><p style=\"margin-top:5px;font-size:12px;line-height:15px;\">公司地址</p>");});
	map.addOverlay(myMarker);
	myMarker.openInfoWindowHtml("<b style=\"font-size:12px;margin-bottom:0\">公司名称</b><p style=\"margin-top:5px;font-size:12px;line-height:15px;\">公司地址</p>");
}

最后得到的页面显示结果如下图：

转载时务必以超链接形式标明文章原始出处和作者信息及版权声明。
您可以通过订阅 RSS 2.0 跟踪这篇文章，或者在您自己的网站中 引用(Trackback) 它。

2条评论 发表»

  1. 愆伏 2010年1月29日

    其实用Mapadc或51ditu的api也都是大同小异。没那么困难，呵呵

    回复

    2010年1月30日visc：

    厄…他们的帮助文档一看就知道是技术人员写的，让人头痛…失去了兴趣

    回复

发表评论