带标注的电子地图
现在越来越多的网站会在“联系我们”里面会加上一个电子地图，标明办公地点。之前我用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&v=2&oe=utf-8&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>"); }
最后得到的页面显示结果如下图：
