欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Gmap开发-默认marker和自定义marker

程序员文章站 2024-03-03 18:24:40
...
在做项目demo中使用到了Gmap,但默认的marker不能满足需求,所以需要自定义的marker:
1、默认的marker:js代码

// 名称转换为经纬度的工具类
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);
}
}

显示效果

[img]http://dl.iteye.com/upload/attachment/0062/2122/5b4d699b-91cd-3f4d-a6de-b388be3b509f.jpg[/img]

2、自定义的markermarker:

// 名称转换为经纬度的工具类
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);
}
}

显示效果

[img]http://dl.iteye.com/upload/attachment/0062/2124/20feccd8-7e52-3b0b-82c7-1458617ccdde.jpg[/img]
相关标签: marker gmap