许斌斌的博客

带标注的电子地图

作者：cnvisc 发布时间：January 28, 2010 分类：前端 标签：: 电子地图, google 地图 API

现在越来越多的网站会在“联系我们”里面会加上一个电子地图，标明办公地点。之前我用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>");
}