`

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

    博客分类：
  • Gmap
markergmap 
阅读更多
在做项目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);
	}
}

显示效果



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);
	}
}

显示效果



  • 大小: 54.9 KB
  • 大小: 92.3 KB
0
顶
0
踩
分享到：
| firefox和IE下，title元素无法换行的替换 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    vue2-gmap-custom-marker:Vue Google Map自定义标记组件

    vue2-gmap-custom-marker 该组件使您可以使用叠加层在地图上显示自定义HTML内容。 该组件是与一些伟大的想法在谷歌地图V3覆盖代码示例改编从这个。 /！\ 重要的提示 该项目最初是的插件。 现在，该项目似乎不再受...

    GMap 自定义Marker以及规则图形的绘制

    默认情况下，GMap.NET提供了一些预定义的Marker样式，但为了满足特定需求，我们往往需要自定义Marker。自定义Marker可以通过以下步骤实现： 1. 创建自定义Marker类：继承自GMap.NET的基础Marker类，如`GMapMarker`...

    GMap 定位点到Marker中心

    // 使用默认蓝色图标，也可自定义图标 map.Markers.Add(newMarker); } ``` 然而，上述代码创建的Marker图标中心并不是真正点击的点，因为我们通常使用的Marker图标有固定大小，中心点可能不是图标本身的几何中心...

    【ASP.NET编程知识】GMap.Net开发之自定义Marker使用方法.docx

    本文主要探讨了如何在GMap.Net中实现自定义Marker，以满足地图应用中的个性化需求。 首先，Marker在GMap.Net中是表示地图上的特定位置的图形元素，通常用于标记地点或事件。默认的Marker通常是简单的形状，如点或...

    C#GMap地图开发--轨迹回放功能

    总的来说，C# GMap地图开发提供了一套全面的工具，可以实现复杂的地图应用，包括轨迹回放、自定义图标和线路颜色等功能。开发者需要掌握文件解析、数据结构转换、地图服务接口调用以及UI交互设计等多方面技能，以...

    Gmap鼠标拖拽Marker

    GMap.NET控件不直接提供内置的拖放功能，所以我们需要自定义鼠标事件处理。首先，我们需要在鼠标按下时记录当前的鼠标位置和标记的位置： ```csharp private void gMapControl_MouseDown(object sender, ...

    Function_marker_GMAP_GMAP.NET_

    在本文中，我们将深入探讨如何在C#中利用GMap.NET库添加标记（marker）功能，这主要是在用户鼠标左键点击地图时实现。GMap.NET是一个强大的、免费且开源的地图控件，支持多种在线地图服务，如谷歌地图、必应地图等。...

    一个基于C#实现的GMap.NET - Google Maps for Windows Forms程序例子

    除了基本的地图显示，GMap.NET还支持各种高级功能，如路线规划、标记（Marker）、多边形（Polygon）和热力图（HeatMap）。例如，你可以添加标记来表示特定地点： ```csharp GMarkerGoogle marker = new ...

    vue2制作自定义组件的教程

    在Vue2中，自定义组件是构建可复用和模块化应用的核心元素。自定义组件允许开发者将复杂的UI逻辑拆分成独立的、可重用的部分，从而提高代码的可维护性和可读性。本教程将深入讲解如何在Vue2中创建自定义组件，包括...

    GMap.Net开发之自定义Marker使用方法

    Marker的其他交互功能，如点击事件和删除功能，可以通过GMap控件提供的其他事件来实现，例如Marker的Click事件。当Marker被点击时，会触发该事件，开发者可以在这个事件中添加自己的处理逻辑，如弹出信息窗口、删除...

    引用Gmap API实例

    4. **绘制路径(Polygons, Polylines)**：可以使用`jquery-gmap3-4.1`绘制多边形（Polygons）和线（Polylines），这对于展示地理路线或者区域边界非常有用。 ```javascript $('#map-canvas').gmap3({ polygon: { ...

    google-maps-es6

    js结构如下： -js |- GMap |- GoogleMapsApi.js - google maps api class |- marker.tmpl.js - custom marker template |- stylers.js - JSON styles and custom icon |- index.js - functions to render map, ...

    C#gmap开发资料

    本文旨在详细介绍如何使用 GMap.NET 进行基本的地图功能开发，包括添加标记(marker)、多边形(polygon)等。 #### 二、GMap.NET 概览 GMap.NET 是一款强大的开源 .NET 控件，支持跨平台，并且完全免费。它提供了多种...

    c#GMap标注marker移动.zip

    在C#编程环境中，GMap.NET是一个强大的库，它允许开发者在Windows Forms、WPF、ASP.NET等平台中集成Google Maps、Bing Maps以及...GMap.NET提供了丰富的API和自定义选项，让开发者能够创建出满足需求的复杂地图应用。

    wpf (C#) 的关于Gmap.net地图的开发

    通过以上的步骤，你已经掌握了在WPF应用中使用GMap.NET开发地图功能的基本技巧，包括添加自定义标注和集成Google Maps及Bing Maps。继续探索GMap.NET的高级特性，如路线规划、图层管理和离线地图，将使你的地图应用...

    C# Winform开发使用离线地图 GMap 例程

    本例程将带你深入理解如何在C# Winform项目中集成和利用GMap进行离线地图的开发。 1. **GMap.NET介绍** GMap.NET是由Great Maps提供的一个.NET框架，用于在应用程序中显示在线和离线地图。它支持多种地图服务提供...

    用Flex和GMap API制作自己的地图

    5. 定制地图：使用GMap API的各种方法和类，如Marker、InfoWindow、Polygon等，自定义地图上的元素。这些元素可以通过Flex组件进行控制和交互。 6. 交互处理：监听Flex组件的事件，如按钮点击，然后通过...

    C#-GaoDe-GMap

    4. **添加标记点**：通过`GMap.NET.WindowsForms.GMapOverlay`和`GMap.NET.WindowsForms.GMapMarker`类，可以在地图上添加自定义标记。例如： ```csharp GMapOverlay markersOverlay = new GMapOverlay("markers")...

    GMap地图控件GMarkerOverlay使用例程

    GMap地图控件是开发地图应用时常用的一种工具，它提供了丰富的功能，使得开发者能够方便地在Web页面上集成地图展示、定位、路径规划等。在这个"GMap地图控件GMarkerOverlay使用例程"中，我们将深入探讨...

Magicbox
Global site tag (gtag.js) - Google Analytics