zoukankan      html  css  js  c++  java
  • google map 地图

    google map 地图

    if(typeof GoogleMap === 'undefined'){
    var GoogleMap
    = {};
    }
    (function(){
    if (!document.getElementById("fgmap")) {
    return false;
    }
    else {
    // 是否可创建Google地图控件
    var isCompatible = new GBrowserIsCompatible();
    if (isCompatible) {
    var mapContainer
    = document.getElementById("fgmap");
    // 创建GoogleMAP地图实例
    var map = new GMap2(mapContainer);
    // 地图默认的比例尺级别
    var perviewLevel = 14;
    // 大的地图缩放级别控件
    var largeMapControl = new GLargeMapControl();
    // 地图缩略图控件
    var overviewMapControl = new GOverviewMapControl();
    // 比例尺控件
    var scaleControl = new GScaleControl();
    // 地图类形选择控件
    var mapTypeControl = new GMapTypeControl();
    // 地址-坐标转换器
    var geocoder = new GClientGeocoder();
    // 上一次的查询地址
    var lastAddress = '';
    // 上一次的查询坐标
    var lastPoint = null;
    // 最后一个创建的标记控件
    var lastMarker = null;
    // 用户标记的最后一个坐标点
    var cusLastPoint = null;

    GoogleMap.mapMsg
    = [];

    // 创建地图
    GoogleMap.Map = function(lat, lng){
    var point
    = new GLatLng(lat, lng);
    map.addMapType(G_PHYSICAL_MAP);
    map.setCenter(point, perviewLevel);

    map.enableDoubleClickZoom();
    map.enableScrollWheelZoom();
    map.enableContinuousZoom();

    map.addControl(largeMapControl)
    map.addControl(overviewMapControl);
    map.addControl(mapTypeControl);
    map.addControl(scaleControl);
    };

    // 创建标记
    GoogleMap.createMarker = function(latlng, markerOptions){
    var marker
    = markerOptions ? new GMarker(latlng, markerOptions) : new GMarker(latlng);
    lastMarker
    = marker;
    return marker;
    };

    // 自定义标记选项
    /*
    =========================================================================================================================================================================================
    参数说明:
    常数:G_DEFAULT_ICON 标记使用的默认图标。
    image String 图标的前景图像 URL。
    shadow String 图标的阴影图像 URL。
    iconSize GSize 图标前景图像的像素大小。
    shadowSize GSize 阴影图像的像素大小。
    iconAnchor GPoint 此图标在地图上的锚定点相对于图标图像左上角的像素坐标。
    infoWindowAnchor GPoint 信息窗口在此图标上的锚定点相对于图标图像左上角的像素坐标。
    printImage String 打印地图所用的前景图标图像的 URL。其大小必须与 image 提供的主图标图像的大小相同。
    mozPrintImage String 用 Firefox/Mozilla 打印地图时所用的前景图标图像的 URL。其大小必须与 image 提供的主图标图像的大小相同。
    printShadow String 打印地图时所用的阴影图像的 URL。由于大多数浏览器都无法打印 PNG 图像,所以图像格式应该为 GIF。
    transparent String 在 Internet Explorer 中捕获点击事件时,所用的透明前景图标图像的 URL。此图像应是具有 1% 不透明性的 24 位 PNG 格式的主图标图像,但其大小和形状同主图标相同。
    imageMap Array of Number 表示图像地图 x/y 坐标的整数数组,用它指定浏览器(非 Internet Explorer)中图标图像的可点击部分。
    maxHeight Integer 指定拖动标记时视觉上垂直“上升”的距离(以像素表示)。(自 2.79 开始)
    dragCrossImage String 指定拖动图标时十字交叉图像的 URL。(自 2.79 开始)
    dragCrossSize GSize 指定拖动图标时十字交叉图像的像素大小。(自 2.79 开始)
    dragCrossAnchor GPoint 指定拖动图标时十字交叉图像的像素坐标偏移量(相对于 iconAnchor)。(自 2.79 开始)
    =========================================================================================================================================================================================
    */
    GoogleMap.setCustomIcon
    = function(IconOptions){
    var myIcon
    = new GIcon(G_DEFAULT_ICON), i;
    for (i in IconOptions) {
    switch (i) {
    case 'iconSize':
    case 'shadowSize':
    case 'dragCrossSize':
    myIcon[i]
    = new GSize(IconOptions[i][0], IconOptions[i][1]);
    break;
    case 'iconAnchor':
    case 'infoWindowAnchor':
    case 'infoShadowAnchor':
    case 'dragCrossAnchor':
    myIcon.iconAnchor
    = new GPoint(IconOptions[i][0], IconOptions[i][1]);
    break;
    default:
    myIcon[i]
    = IconOptions[i];
    break;
    }

    }
    return myIcon;
    };

    // 用户自定义标注
    GoogleMap.customMarkPoint = function(){
    var marker
    = null;
    var markPoint
    = cusLastPoint ? new GLatLng(cusLastPoint[0],cusLastPoint[1]) : new GLatLng(lastPoint[0],lastPoint[1]);
    var markOptions
    = {
    icon: GoogleMap.setCustomIcon({
    image:
    'http://www.yaohaixiao.com/effects/img/icon13.png'
    }),
    draggable:
    true
    };

    marker
    = GoogleMap.createMarker(markPoint, markOptions);
    GEvent.addListener(marker,
    "dragstart", function(){
    map.closeInfoWindow();
    });
    GEvent.addListener(marker,
    "dragend", function(){
    var custPoint
    = marker.getPoint();
    var markTip
    = '<div class="fgmap_markerMsg" id="cusMarkTip">';
    markTip
    += '<h4>用户地图标注</h4>';
    markTip
    += '<div id="mapTips"><p>当前经纬度:(' + custPoint.lat() + ',' + custPoint.lng() + ')<br />';
    markTip
    += '是否将新位置设置为此商户的默认位置?</p>';
    markTip
    += '<div class="MDB" style="text-align:center;"><button id="MapOK" ';
    marker.openInfoWindowHtml(markTip);
    });
    map.addOverlay(marker);
    };

    // 保存用户自定义坐标
    GoogleMap.MapOk = function(){
    var savedPoint
    = lastMarker.getPoint();
    var lat
    = savedPoint.lat(), lng = savedPoint.lng();
    var markTip
    = document.getElementById('cusMarkTip');
    markTip.innerHTML
    = '<h4>正在上传您所保存的坐标信息...</h4>';
    if (timer) {
    clearTimeout(timer);
    }
    var timer
    = setTimeout(function(){
    map.clearOverlays();
    var marker
    = GoogleMap.createMarker(savedPoint);
    if (GoogleMap.mapMsg) {
    GEvent.addListener(marker,
    "click", function(){
    var msg
    = '<span class="fgmap_markerMsg">', j;
    msg
    += '<h4>' + GoogleMap.mapMsg[1][0] + '</h4>';
    for (var j = 1; j < GoogleMap.mapMsg[1].length; j++) {
    msg
    += GoogleMap.mapMsg[1][j] + "<br />";
    }
    msg
    += "</span>";
    map.openInfoWindowHtml(savedPoint, msg);
    });
    }
    map.addOverlay(marker);
    map.setCenter(savedPoint);
    cusLastPoint
    = [lat,lng];
    },
    2000);
    };

    // 取消用户自定义坐标操作
    GoogleMap.MapCancel = function(){
    map.removeOverlay(lastMarker);
    map.closeInfoWindow();
    };

    // 通过地址获得坐标
    GoogleMap.getAddresslatlng = function(response){
    var place
    = response.Placemark[0];
    var point
    = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
    return [place.Point.coordinates[1], place.Point.coordinates[0], point, place];
    };

    // 标注坐标和相应的说明信息
    GoogleMap.MarkerMap = function(lat, lng){
    var marker
    = null;
    var point
    = new GLatLng(lat, lng);
    GoogleMap.Map(lat, lng);

    marker
    = this.createMarker(point);
    if (GoogleMap.mapMsg) {
    GEvent.addListener(marker,
    "click", function(){
    var msg
    = '<span class="fgmap_markerMsg">', j;
    msg
    += '<h4>' + GoogleMap.mapMsg[1][0] + '</h4>';
    for (var j = 1; j < GoogleMap.mapMsg[1].length; j++) {
    msg
    += GoogleMap.mapMsg[1][j] + "<br />";
    }
    msg
    += "</span>";
    map.openInfoWindowHtml(point, msg);
    });
    }
    map.addOverlay(marker);
    };

    // 将查询地址添加到地图
    GoogleMap.addAddressToMap = function(response){
    map.clearOverlays();
    if (!response || response.Status.code != 200) {
    alert(
    "对不起, 我们解析不到该地址的经纬度坐标!");
    }
    else {
    var marker
    = null, point = GoogleMap.getAddresslatlng(response);
    var address
    = point[3].address, lat = point[0], lng = point[1];
    GoogleMap.mapMsg
    = (GoogleMap.mapMsg !== '' && (lastAddress === GoogleMap.mapMsg[0])) ? GoogleMap.mapMsg : [address, [point[3].address, ('经度:' + point[1]), ('纬度:' + point[0])]];
    GoogleMap.MarkerMap(lat, lng);
    lastPoint
    = [lat,lng];
    }
    };

    // 将查询坐标添加到地图
    GoogleMap.addPointToMap = function(cPoint){
    map.clearOverlays();
    var marker
    = null, lat = cPoint[0], lng = cPoint[1];
    GoogleMap.MarkerMap(lat, lng);
    lastPoint
    = [lat,lng];
    };

    // 通过地址/坐标将Marker显示到地图上
    GoogleMap.showLocation = function(cPoint){
    if (typeof cPoint === 'string') {
    geocoder.getLocations(cPoint,
    this.addAddressToMap);
    lastAddress
    = cPoint;
    }
    else{
    GoogleMap.addPointToMap(cPoint);
    }
    };

    GEvent.addListener(window,
    'unload', GUnload);
    }
    else {
    alert(
    "对不起,您的浏览器不支持创建地图!");
    }
    }
    })();

  • 相关阅读:
    Maven依赖
    Maven坐标
    初识Maven POM
    Maven配置
    相似文本文档分析之SimHash算法
    Ubuntu14.10下JDK编译安装详细操作说明
    Ubuntu14.10下Tomcat编译安装 详细操作说明
    ubuntu 14.10 编译安装 Ruby
    ubuntu 14.10 编译安装 Python
    ubuntu 14.10 编译安装 Golang
  • 原文地址:https://www.cnblogs.com/wangkangluo1/p/2094725.html
Copyright © 2011-2022 走看看