谷歌地图

谷歌地图最新版本不仅要收费，而且还要翻墙，及其不稳定。因此我们使用了在中国地区的老版本谷歌地图。api与新版的基本一样，而且是免费试用。

api引入地址：

http://ditu.google.cn/maps/api/js?v=3&sensor=false&language=en&callback=initializegooglemap

谷歌地图初始化时，纬度在前，经度在后，百度地图相反。

如果是要中文地图，language=zh-CN

典型用法

//初始化
var mapOptions = {
  center: new google.maps.LatLng(42.882688, -90.579412),
  zoom: 3,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var googleMap = new google.maps.Map($('.map-content')[0], mapOptions);

//设置中心点
var myLatlng = new google.maps.LatLng(point.lat, point.lng);
this.map.setCenter(myLatlng);

//设置级别
this.map.setZoom(15);

//显示infoWindow
google.maps.event.addListener(marker, 'click', (function(){
    var currentMarker = marker;
    return function(e){
        _this._showInfoWindow(e, currentMarker);
    }
})());
_showInfoWindow: function(e, marker){
    if(marker.infoWindowOpend){
        return;
    }

    var infowindow = new google.maps.InfoWindow({
        content: pageManager.getMarkerInfo(marker.IOTMARKERINDEX)
    });

    google.maps.event.addListener(infowindow, 'closeclick', function(event) {
        marker.infoWindowOpend = false;
    });

    infowindow.open(this.map, marker);
    marker.infoWindowOpend = true;
}


//fitBounds
google.maps.event.addListener(googleMap, 'bounds_changed', function(){
    if(_this.boundsInited){
        return;
    }
    _this.boundsInited = true;

    var currentBounds;
    var markerPosition;
    var marker;
    var point;
    var icon;

    for(var i = 0; i < points.length; i++){
        point = points[i];
        icon = _this.getIconByType(point.type);
        //加入marker
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(point.lat, point.lng),
            map: googleMap,
            icon: icon //icon传图片地址即可
        });
        _this.markers.push(marker);
        currentBounds = googleMap.getBounds();
        markerPosition = marker.getPosition();
        if(!currentBounds.contains(markerPosition)){
            currentBounds = currentBounds.extend(markerPosition);
        }
    }
    googleMap.fitBounds(currentBounds);
});

//Marker跳动
marker.setAnimation(google.maps.Animation.BOUNCE);
setTimeout(function(){
    marker.setAnimation(null);
}, 1000);

绘制一个区域

首先需要加入控件：http://ditu.google.cn/maps/api/js?v=3&sensor=false&language=en&libraries=drawing&callback=initializegooglemap

this.editRectangle && this.editRectangle.setMap(null); //删除以前的区域

var leftBottom = {
  lat: 29.5549126,
  lng: 106.5485537
}; //左下点

var rightTop = {
    lat: 27.5549126,
    lng: 105.5485537
}; //右上点

var rectangle = new google.maps.Rectangle({
    strokeColor: '#1a92cc',
    strokeOpacity: 0.5,
    strokeWeight: 4,
    fillColor: '#6ed0ff',
    fillOpacity: 0.5,
    map: _this.map,
    bounds: new google.maps.LatLngBounds(new google.maps.LatLng(leftBottom.lat, leftBottom.lng), new google.maps.LatLng(rightTop.lat, rightTop.lng))
});
this.map.fitBounds(rectangle.getBounds());

添加绘制控件

首先需要加入控件：http://ditu.google.cn/maps/api/js?v=3&sensor=false&language=en&libraries=drawing&callback=initializegooglemap

var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: false,
    circleOptions: {
        fillColor: '#ffff00',
        fillOpacity: 1,
        strokeWeight: 5,
        clickable: false,
        editable: true,
        zIndex: 1
    }
});
drawingManager.setMap(googleMap);

drawingManager.addListener('rectanglecomplete', function(rectangle){
    rectangle.setEditable(true);
    rectangle.setDraggable(true);
    drawingManager.setDrawingMode(null);
    _this.rectangle = rectangle;
    _this.isDrawed = true;
});

drawingManager.setDrawingMode(google.maps.drawing.OverlayType.RECTANGLE);

//获取区域的GPS坐标
var rectangle = this.rectangle;
var gpsString = rectangle.getBounds().toString().replace(/\(|\)|\s/g, '').split(',');
if(gpsString.length < 4){
    return null;
}
var finallyResults = [];
//google返回的两个点是左下|右上，而且点是纬度在前，精度在后。要转为精度在前，纬度在后，四个点顺序为左上|左下|右下|右上
finallyResults.push(gpsString[1] + ',' + gpsString[2]);
finallyResults.push(gpsString[1] + ',' + gpsString[0]);
finallyResults.push(gpsString[3] + ',' + gpsString[0]);
finallyResults.push(gpsString[3] + ',' + gpsString[2]);
return (finallyResults);