News Contents
信息中心

谷歌地图开发-默认marker和自定义marker,GMarkerOptions运用

发表日期:2018/3/21      浏览次数:

在做项目demo中使用到了Gmap,但默认的marker不能满足需求,所以需要自定义的marker: 
1、默认的marker:js代码 
Java代码  收藏代码
// 名称转换为经纬度的工具类  
var geocoder = null;  
// 地图对象  
var map = null;  
  
function getDtcAndGps() {  
  
    $.Ajax( {  
            url : $.webPath + 'obd/monitor/getMonitorRtDtc.do',  
            success : function(data) {  
  
                if (data.errMsg) {  
                      
                    $.alert(data.errMsg);  
                } else {  
                      
                    // 成功的话清空原来的定位点  
            map.clearOverlays();  
              
            if ($.isNull(data.dtcMap)) {  
                  
                // 为空,则重新设置地图中心  
            map.setCenter(new GLatLng(22.5373, 113.9392), 14);  
        } else {  
              
            $("#carContentDiv").empty();  
            var html = "";  
            var index = 0;  
            var markers = [];  
            $.each(data.dtcMap, function(key, value) {  
  
                html += "<div id='" + key + "' class='carImg br'><img src='" + $.webPath  
                        + "resources/images/demo/car1.jpg' class='carIcon'/>" + key  
                        + "<span id='titleTip'>" + value.dtcMsg + "</span></div>";  
                // html += value;  
                    // html += key;  
                      
                    // // 创建地图点  
                    // if (index == 0) {  
                    //                        
                    // // 设置了放大级别为5  
                    // map.setCenter(new GLatLng(parseFloat(value.latitude),  
                    // parseFloat(value.longitude)), 5);  
                    //                        
                    // // 如果不设置放大级别,则默认为当前地图的放大级别  
                    // map.setCenter(new GLatLng(parseFloat(value.latitude),  
                    //                              parseFloat(value.longitude)));  
                    //                  }  
                    var marker = createMarker(new GLatLng(parseFloat(value.latitude),  
                            parseFloat(value.longitude)), index, key);  
  
                    index += 1;  
                });  
              
            $(html).appendTo("#carContentDiv");  
            $.each(markers, function(i, marker) {  
  
                map.addOverlay(marker);  
            });  
            // $.alert(data.dtcMap);  
        }  
    }  
}  
    });  
}  
   
// 创建信息窗口显示对应给定索引的字母的标记  
function createMarker(point, index, msg) {  
  
    // Create a lettered icon for this point using our icon class  
    var letter = String.fromCharCode("A".charCodeAt(0) + index);  
    // 为所有标记创建指定阴影、图标尺寸灯的基础图标  
    var baseIcon = new GIcon();  
    baseIcon.shadow = "http://www.google.cn/mapfiles/shadow50.png";  
    baseIcon.iconSize = new GSize(20, 34);  
    baseIcon.shadowSize = new GSize(37, 34);  
    baseIcon.iconAnchor = new GPoint(9, 34);  
    baseIcon.infoWindowAnchor = new GPoint(9, 2);  
    baseIcon.infoShadowAnchor = new GPoint(18, 25);  
    var letteredIcon = new GIcon(baseIcon);  
    letteredIcon.image = "http://www.google.cn/mapfiles/marker" + letter + ".png";  
      
    // 设置 GMarkerOptions 对象  
    markerOptions = {  
        icon : letteredIcon  
    };  
    var marker = new GMarker(point, markerOptions);  
      
    GEvent.addListener(marker, "click", function() {  
  
        marker.openInfoWindowHtml(msg);  
    });  
      
    return marker;  
}  
  
/** 
 * 页面初始化的时地图的状态,设置为公司的坐标为地图中心 
 */  
function init() {  
  
    // 默认地图中心,公司地址  
    var point = new GLatLng(22.5973, 114.0592);  
    if (GBrowserIsCompatible()) {  
          
        map = new GMap2(document.getElementById("map"));  
        // 加入地图缩放工具  
        map.addControl(new GLargeMapControl());  
        // 加入地图缩放工具  
        // map.addControl(new GSmallMapControl());  
        // 加入地图切换工具  
        map.addControl(new GMapTypeControl());  
        // 该地图类型显示带有自然特征(如地形和植被)的地图  
        map.addMapType(G_PHYSICAL_MAP);  
        // 卫星地图模式  
        // map.addMapType(G_SATELLITE_MAP);  
        map.setCenter(point, 11);  
        geocoder = new GClientGeocoder();  
          
        // 定时询问有故障的车辆  
        window.setInterval(getDtcAndGps, 20 * 1000);  
    }  
}  

显示效果 

 

2、自定义的markermarker: 
Java代码  收藏代码
// 名称转换为经纬度的工具类  
var geocoder = null;  
// 地图对象  
var map = null;  
  
function getDtcAndGps() {  
  
    $.Ajax( {  
            url : $.webPath + 'obd/monitor/getMonitorRtDtc.do',  
            success : function(data) {  
  
                if (data.errMsg) {  
                      
                    $.alert(data.errMsg);  
                } else {  
                      
                    // 成功的话清空原来的定位点  
            map.clearOverlays();  
              
            if ($.isNull(data.dtcMap)) {  
                  
                // 为空,则重新设置地图中心  
            map.setCenter(new GLatLng(22.5373, 113.9392), 14);  
        } else {  
              
            $("#carContentDiv").empty();  
            var html = "";  
            var index = 0;  
            var markers = [];  
            $.each(data.dtcMap, function(key, value) {  
  
                html += "<div id='" + key + "' class='carImg br'><img src='" + $.webPath  
                        + "resources/images/demo/car1.jpg' class='carIcon'/>" + key  
                        + "<span id='titleTip'>" + value.dtcMsg + "</span></div>";  
                // html += value;  
                    // html += key;  
                      
                    // // 创建地图点  
                    // if (index == 0) {  
                    //                        
                    // // 设置了放大级别为5  
                    // map.setCenter(new GLatLng(parseFloat(value.latitude),  
                    // parseFloat(value.longitude)), 5);  
                    //                        
                    // // 如果不设置放大级别,则默认为当前地图的放大级别  
                    // map.setCenter(new GLatLng(parseFloat(value.latitude),  
                    //                              parseFloat(value.longitude)));  
                    //                  }  
//                  var marker = createMarker(new GLatLng(parseFloat(value.latitude),  
//                          parseFloat(value.longitude)), index, key);  
                      
                    var marker = new google.maps.LabelMarker(new GLatLng(parseFloat(value.latitude),  
                            parseFloat(value.longitude)), {labelText:key});  
                    markers.push(marker);  
                    index += 1;  
                });  
              
            $(html).appendTo("#carContentDiv");  
            $.each(markers, function(i, marker) {  
  
                map.addOverlay(marker);  
            });  
            // $.alert(data.dtcMap);  
        }  
    }  
}  
    });  
}  
  
// 自定义marker,继承google的marker对象  
google.maps.LabelMarker = function(latlng, options){  
     this.latlng = latlng;  
     this.labelText = "<b>"+options.labelText + "</b>" || '';  
     this.labelClass = options.labelClass || 'writeb';  
     this.labelOffset = options.labelOffset || new google.maps.Size(8, -33);  
     options.icon = options.icon || getTextIcon();  
     google.maps.Marker.apply(this, arguments);  
 }  
  
 google.maps.LabelMarker.prototype = new google.maps.Marker(new google.maps.LatLng(0, 0));  
  
 google.maps.LabelMarker.prototype.initialize = function(map){  
     google.maps.Marker.prototype.initialize.call(this, map);  
       
     var label = document.createElement('div');  
     label.className = this.labelClass;  
     label.innerHTML = this.labelText;  
     label.style.position = 'absolute';  
     label.style.width = '48px';  
     map.getPane(G_MAP_MARKER_PANE).appendChild(label);  
  
     this.map = map;  
     this.label = label;  
 }  
  
 google.maps.LabelMarker.prototype.redraw = function(force){  
     google.maps.Marker.prototype.redraw.call(this, map);  
  
     if(!force) {  
         return;  
     }  
  
     var point = this.map.fromLatLngToDivPixel(this.latlng);  
     var z = google.maps.Overlay.getZIndex(this.latlng.lat());  
       
     this.label.style.left = (point.x + this.labelOffset.width) + 'px';  
     this.label.style.top = (point.y + this.labelOffset.height) + 'px';  
     this.label.style.zIndex = z + 1;  
 }  
  
 google.maps.LabelMarker.prototype.remove = function(){  
     this.label.parentNode.removeChild(this.label);  
     this.label = null;  
     google.maps.Marker.prototype.remove.call(this);  
 }  
   
 function getTextIcon() {  
     var icon = new google.maps.Icon();  
     icon.image = $.webPath + "resources/images/demo/carIcon.jpg";  
     icon.iconSize = new GSize(20, 18);  
     icon.shadowSize = new GSize(100, 100);  
     // 文字信息区坐标,-10表示距离与图片像个10个像素  
     icon.iconAnchor = new GPoint(-10, 50);  
     icon.infoWindowAnchor = new GPoint(5, 1);  
       
     return icon;  
 }  
  
/** 
 * 页面初始化的时地图的状态,设置为公司的坐标为地图中心 
 */  
function init() {  
  
    // 默认地图中心,公司地址  
    var point = new GLatLng(22.5973, 114.0592);  
    if (GBrowserIsCompatible()) {  
          
        map = new GMap2(document.getElementById("map"));  
        // 加入地图缩放工具  
        map.addControl(new GLargeMapControl());  
        // 加入地图缩放工具  
        // map.addControl(new GSmallMapControl());  
        // 加入地图切换工具  
        map.addControl(new GMapTypeControl());  
        // 该地图类型显示带有自然特征(如地形和植被)的地图  
        map.addMapType(G_PHYSICAL_MAP);  
        // 卫星地图模式  
        // map.addMapType(G_SATELLITE_MAP);  
        map.setCenter(point, 11);  
        geocoder = new GClientGeocoder();  
          
        // 定时询问有故障的车辆  
        window.setInterval(getDtcAndGps, 20 * 1000);  
    }  
}  

显示效果 

 
 

盛大建站承接个人、公司、企业的网站建设、网页设计、网店制作、独立商城制作、外贸网站制作,也承接同行介绍的业务,欢迎联系!
本站承接主要业务如下:
1、提供免备案虚拟主机(网站空间),有独立国内服务器、高速美国服务器、香港服务器、韩国服务器、日本服务器,>> http://www.fuanxx.com
2、网站建设:个人网店制作、企业建站、公司网站、新闻、下载等;论坛、博客网站搭建,承接外贸英文站制作
3、承接阿里巴巴、京东、淘宝、天猫等的商品数据采集
4、网站防钓鱼,可以过360、QQ、搜狗、金山、微信拦截
5、要就发IP网站限制访问系统,防止同行抄袭并保障海外客户访问不受影响,>> http://www.198ip.com
十年如一日,我们专注于提供高品质 定制网站建设服务!
您的信任,我们的责任,期待与您的合作!