Google map api应用实例 2

精选转载

visionsky 2011-04-27 16:28:06

文章标签 职场 Google 休闲 map api应用实例 文章分类 JavaScript 前端开发

本来是想将×××地图google map的应用记录一个系列，但继1)记录完之后总找不到时间继续记录下去，1)中主要解决了Google Maps JavaScript API V3 与 Google Local Search API两者由于版本问题带来的一系列麻烦，思路是使用一个iframe作为兼容的跳板，子页面应用Local Search API获得查询的result后返回给父页面，下面再记录一些地图坐标的定位和一些UI的组成。

效果可参考 http://xf.house.163.com/gz/map/00Xa.html

1.坐标定位

Google map api应用实例 2_职场

打开一个楼盘的地图，首先需要将此楼盘定位为此地图的中心点

这里要注意的是我们引进了http://maps.google.com/maps/api/js?sensor=false，这是google MAP API V3版本的连接点
创建了一个div <div id="map-canvas" style="width: 600px; height: 500px"></div>作为地图的容器，然后对地图基本类Map进行创建

google.maps.Map 是google map的容器实现，在指定的 HTML 容器中创建新的地图，该容器通常是一个DIV元素
在初始化地图，还要创建一个地图的初始化变量，这些变量包括了上面的center，zoom，mapTypeId等等

google.maps.LatLng 是一个以纬度和经度表示的地理坐标点，在上面我们使用一个定义好的LatLng类确定了整个地图的中心点，其中lat 和 lng 分别为我们楼盘的经纬度值
zoom 为地图展开的级别
google.maps.MapTypeId.ROADMAP 是地图显示的类型，通常有ROADMAP，SATELLITE，TERRAIN等等，这里选择的ROADMAP类型是显示为普通的街道地图

2.为定位的楼盘添加图标

在上面完成了将楼盘显示到整个地图的中心处，下面为该楼盘添加图标，给楼盘坐标的位置添加图标，实际上也就是在地图上添加一个叠加层，在google MAP API中拥有大量的实现类，如Marker，为我们上面的程序加多个Marker实现，楼盘的图标就可以显示出来

Google map api应用实例 2_职场_02

但是呢，这个图标并不是我们想要的，我们想要的是在此楼盘经纬度处放入自己的图片，设置是一段html的显示代码来组成自定义的叠加层，并且这个叠加层可以监听各种事件，可以对拖动地图的DOM元素中指定的地理位置像素坐标进行计算

<!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=GBK"/>
<title></title>
<style type="text/css">
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
      var map;
      var lat = 23.1257424;
      var lng = 113.37404225;
      function initialize() {
        var mapDiv = document.getElementById('map-canvas');
          map = new google.maps.Map(mapDiv, {
            center: new google.maps.LatLng(lat,lng),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        new CustomMarker(map.getCenter(), map);
      }

    function CustomMarker(latlng,map) {
         this.latlng_ = latlng;
         this.setMap(map);
      }
    //扩展自OverlayView；OverlayView扩展自MVCObject，实际上也扩展自MVCObject
    CustomMarker.prototype = new google.maps.OverlayView();

    CustomMarker.prototype.draw = function() {
    var me = this;
    var div = this.div_;
    if (!div) {
        div = this.div_ = document.createElement('DIV');
        div.style.position = "absolute";
        div.innerHTML = "<span><img src='http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/examples/p_w_picpaths/house.png'/></span>";
        //这个div的对象需要Listener事件，必须先用trigger（me）先进行侦听
        google.maps.event.addDomListener(div, "click", function(event) {
            google.maps.event.trigger(me, "click");
        });
        var panes = this.getPanes();
        panes.overlayImage.appendChild(div);
    }
    CustomMarker.prototype.remove = function() {
        if (this.div_) {
            this.div_.parentNode.removeChild(this.div_);
            this.div_ = null;
        }
    };
    //获取Position
    CustomMarker.prototype.getPosition = function() {
        return this.latlng_;
    };

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body style="">
<div id="map-canvas" style="width: 500px; height: 400px"></div>
</body>
</html>

实现效果如下

Google map api应用实例 2_职场_03

我们创建一个CustomMarker类，扩展自OverlayView；OverlayView扩展自MVCObject，实际上也扩展自MVCObject
这里需要详细说说OverlayView，我们继承了此类，方法是将叠加层的 prototype 设置为 new OverlayView.prototype。必须实现三个方法，即 onAdd()、draw() 和 onRemove()。在 add() 方法中，您应当创建 DOM 对象，并将其作为窗格的子对象附加。在 draw() 方法中，应放置这些元素。在 onRemove() 方法中，应将对象从 DOM 中删除。您必须调用包含有效地图对象的 setMap()，以触发对 onAdd() 方法和 setMap(null) 的调用，这样才能触发 onRemove() 方法。可以在构建叠加层时调用 setMap() 方法，也可以在需要重新显示已删除叠加层的任何时候调用该方法。每当地图属性更改时都会调用 draw() 方法，该方法可以更改元素的位置，如缩放、中心或地图类型。

把叠加层的绘图放在draw()方法中，我们再此方法中创建了一个DIV，并且使用innerHTML属性将要显示的html代码写回div中，并且如果需要对此属性加添加Listener事件时，则必须先使用trigger（me）先进行侦听，这样才能对外部的event事件进行反应，在构建完div后还需要获得panes窗口，panes包含渲染叠加层的 DOM 元素，作为显示此 OverlayView 的窗格，记住它是必须在draw 方法调用后才能实用。
onRemove() 实现此方法可将您的元素从 DOM 删除。调用 setMap(null) 之后立即调用此方法。
getProjection() 返回与相应 OverlayView 相关联的 MapCanvasProjection 对象。仅在调用 draw 函数后才可用