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

最新推荐文章于 2023-01-09 14:04:15 发布
最新推荐文章于 2023-01-09 14:04:15 发布
阅读量1k 收藏
点赞数
分类专栏： Gmap 文章标签： marker gmap
在做项目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]
iteye_11676
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
GMap 定位点到Marker中心
11-03
在GMap上点击地图生成Marker，使点击的点处于Marke图标的中心
vue2-gmap-custom-marker:Vue Google Map自定义标记组件
05-05
vue2-gmap-custom-marker 该组件使您可以使用叠加层在地图上显示自定义HTML内容。 该组件是与一些伟大的想法在谷歌地图V3覆盖代码示例改编从这个。 /！\ 重要的提示 该项目最初是的插件。 现在，该项目似乎不再受...
GMap 自定义Marker以及规则图形的绘制
草香农的博客
08-12 9439
自定义marker以及GMap地图上规则图形的绘制
GMap.net 自定义Marker
金左手的博客
12-21 855
说明 自定义Marker部分内容来源于互联网，具体来源不记得了，若有人发现此处没注明出处，请海涵！ nuget包 GMapMarkerArrow using GMap.NET.WindowsForms; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Runtim...
基于GMap.NET库实现的Windows桌面地图工具软件分享
loutengyuan的专栏
09-03 3420
由于工作中经常和地图、GPS坐标转换、GPS轨迹查看等内容相关，经常要借助一些在线网站和工具来查看地图和位置等，在一次偶然的机会中了解到一个[GMap.NET](https://github.com/radioman/greatmaps)开源的桌面地图库和基于GMap.NET实现的[MapDownloader](https://github.com/luxiaoxun/MapDownloader)地图下载工具，于是也想实现一个自己的地图相关工具.
WPF在Gmap.net中将Marker动起来
qq_39110534的博客
04-24 808
出处来源于博客园 作者张子浩 原文地址https://www.cnblogs.com/ZaraNet/p/12766143.html，如有转载，请联系我，如无经过作者同意，作者有权申请法律保护。 　　前一段时间说过一篇绘制极坐标的，这段时间对它进行了改造已经今非昔比了，功能实现了很多，我目的是让Marker动起来，然后还会绘制Route，上篇也就是简单的绘制了Route,没有关于...
GMap.Net开发之自定义Marker使用方法
10-26
主要介绍了GMap中Marker的使用方法，有需要的朋友可以参考一下
C#GMap地图开发--轨迹回放功能
07-25
总的来说，C# GMap地图开发提供了一套全面的工具，可以实现复杂的地图应用，包括轨迹回放、自定义图标和线路颜色等功能。开发者需要掌握文件解析、数据结构转换、地图服务接口调用以及UI交互设计等多方面技能，以...
Function_marker_GMAP_GMAP.NET_
09-28
在本文中，我们将深入探讨如何在C#中利用GMap.NET库添加标记（marker）功能，这主要是在用户鼠标左键点击地图时实现。GMap.NET是一个强大的、免费且开源的地图控件，支持多种在线地图服务，如谷歌地图、必应地图等。...
复制 GMap 资 料 a.添加marker和polygon
weixin_34292287的博客
09-18 198
GMap.NET学习（一）添加marker和polygon GMap.NETis great and Powerful, Free, cross platform, open source .NET control. Enable userouting,geocoding,directionsandmapsfrom Coogle, Yahoo!, Bing, OpenSt...
c#GMap标注marker移动.zip
07-31
c#Gmap marker移动标注 亲测有效 marker随鼠标移动
使用GMap定位，并可以做标记、连线、多边形计算距离和面积
01-07
用GMap定位，并可以做标记、连线、多边形，可以计算任意标记点的距离和标定的多边形的面积，有问题或看不懂可以给我发邮件swu_lp@126.com
Gmap鼠标拖拽Marker
11-01
1. 我们在使用鼠标拖拽地图时，拖拽完成后，抬起鼠标GMap控件会触发鼠标点击事件, 如果我们在地图上点击鼠标添加Marker，如何利用鼠标移动已有的Maker.
GMap地图控件GMarkerOverlay使用例程
08-01
使用GMap控件进行开发时,在地图层上的GMarkerOverlay的使用例程
高德地图Web端JavaScript API开发(二)---在地图上绘制(点标注)
Tiger_shl的博客
10-09 7603
使用高德地图在很多时候需要在地图上标记位置，并且很多时候需要用到自定义的图标去完成这种位置的标记。 当然，这些功能高德地图都为我们准备了，比如常用的地图覆盖物Marker和信息窗体等。这里就先说一下点标记的Marker。 Marker是一个用来往地图上添加点标记的类。使用它将任何你希望用户看到的兴趣点标注在地图上，你可以为标注指定任意的Icon或者内容，以及文字Label。下面向大家介
高德地图api多地点自定义显示名字+文字标识
最新发布
fzxyxf1314的博客
01-09 4130
高德地图api自定义显示地区+文字标识
（转）GMap.Net开发之自定义Marker使用方法
weixin_34064653的博客
10-12 277
自定义Marker，可以理解为在地图上自定义图标（Custom Marker），先看看GMap的地图和图标的显示方式： Map控件上可以添加Overlay（图层），可以添加多个图层，先添加的图层在下面显示。 图层上可以添加GMapMarker，当然也可以添加GMapPolygon和GMapRoute，后续介绍。 在地图的使用中常要求的功能就是添加自定义图标，可以点击图标、删除图标...
c# gmap 小车（marker）和按照轨迹方向前进，并纠正小车与轨迹的位置偏移
buaazx1992的博客
03-05 5092
当小车图片最为marker时，显示在gmap地图上会和轨迹有些偏移，marker中心没有在轨迹点上如图所示：纠正偏移的代码如下（有些是我自定义的，根据自己的需求进行改正GMarkerGoogle marker; Bitmap bitmap; PointLatLng newendLatLng; //获得旋转之后的marker Bitmap bitmap = RotateImage(initia...
【ASP.NET编程】GMap.Net自定义Marker使用方法.docx
《GMap.Net开发之自定义Marker使用方法》 本文介绍了在ASP.NET编程中使用GMap.Net进行自定义Marker的方法。自定义Marker是指在地图上自定义图标，可以实现点击、删除、拖动、高亮等功能。首先介绍了GMap地图和图标...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值