`
919555185
  • 浏览: 19752 次
  • 性别: Icon_minigender_1
  • 来自: 南昌
社区版块
存档分类
最新评论
  • 050110021: 不能生成class的问题,可以到Problems中查看,其中的 ...
    Eclipse

google map v3 使用自定义Marker在地图上添加文字标签

 
阅读更多

        网上找了好久都是v2版本,没办法看看api吧。上面只有自定义叠加层,没有发现重写marker的功能。
    没办法,就用api的自定义叠加层吧。虽然可以实现带字的标记了,但是它没有marker那么多
的功能,如果

   你javascript可以继续填充功能。
    使用的时候就调用这句话

overlay = new MyMarker(map,{latlng:new google.maps.LatLng(0, -180),image:"googlemap/images/alarm.gif",clickFun:zoomOut});   
/***************自定义叠加层,可作为站点显示在地图上******************/
    function MyMarker(map, options) {   
      // Now initialize all properties.   
      this.latlng = options.latlng; //设置图标的位置
      this.image_ = options.image;  //设置图标的图片
      this.labelText = options.labelText || '标记';
      this.labelClass = options.labelClass || 'shadow';//设置文字的样式
      this.clickFun = options.clickFun ;//注册点击事件
  //    this.labelOffset = options.labelOffset || new google.maps.Size(8, -33);
      this.map_ = map;    

      this.div_ = null;   
      // Explicitly call setMap() on this overlay   
      this.setMap(map); 
    } 
    MyMarker.prototype = new google.maps.OverlayView();
    //初始化图标
    MyMarker.prototype.onAdd = function() {    
		// Note: an overlay's receipt of onAdd() indicates that  
		// the map's panes are now available for attaching   
		// the overlay to the map via the DOM.    
		// Create the DIV and set some basic attributes.  
		var div = document.createElement('DIV'); //创建存放图片和文字的div
		div.style.border = "none";   
		div.style.borderWidth = "0px";   
		div.style.position = "absolute";
		div.style.cursor = "hand";
		div.onclick = this.clickFun ||function(){};//注册click事件,没有定义就为空函数
		// Create an IMG element and attach it to the DIV.  
		var img = document.createElement("img"); //创建图片元素
		img.src = this.image_;  
		img.style.width = "100%";   
		img.style.height = "100%";  
		//初始化文字标签
		var label = document.createElement('div');//创建文字标签
			label.className = this.labelClass;
			label.innerHTML = this.labelText;
			label.style.position = 'absolute';
		    label.style.width = '200px';
		//	label.style.fontWeight = "bold";
			label.style.textAlign = 'left';
			label.style.padding = "2px";
			label.style.fontSize = "10px";
		//	label.style.fontFamily = "Courier New";

		div.appendChild(img);   
		div.appendChild(label);   
		
		this.div_ = div;   
		// We add an overlay to a map via one of the map's panes.  
		// We'll add this overlay to the overlayImage pane.  
		var panes = this.getPanes();  
		panes.overlayLayer.appendChild(div); 
	  }
      //绘制图标,主要用于控制图标的位置
    MyMarker.prototype.draw = function() {    
		  // Size and position the overlay. We use a southwest and northeast   
		  // position of the overlay to peg it to the correct position and size.  
		  // We need to retrieve the projection from this overlay to do this.  
		  var overlayProjection = this.getProjection();   
		  // Retrieve the southwest and northeast coordinates of this overlay  
		  // in latlngs and convert them to pixels coordinates.  
		  // We'll use these coordinates to resize the DIV.  
		  var position = overlayProjection.fromLatLngToDivPixel(this.latlng);   //将地理坐标转换成屏幕坐标
		//  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());    
		  // Resize the image's DIV to fit the indicated dimensions.   
		  var div = this.div_;  
		  div.style.left =position.x-5 + 'px';  
		  div.style.top  =position.y-5 + 'px';  
		//控制图标的大小
		  div.style.width = '10px';  
		  div.style.height ='10px';
	  }
    MyMarker.prototype.onRemove = function() {   
		  this.div_.parentNode.removeChild(this.div_);   
		  this.div_ = null; 
	  }

	  //Note that the visibility property must be a string enclosed in quotes 
    MyMarker.prototype.hide = function() {   
		  if (this.div_) {     
  			this.div_.style.visibility = "hidden";   
	  	  } 
  	  }  
    MyMarker.prototype.show = function() {   
		  if (this.div_) {     
		  this.div_.style.visibility = "visible";   
		  } 
	  } 
	  //显示或隐藏图标
    MyMarker.prototype.toggle = function() {   
		if (this.div_) {     
			if (this.div_.style.visibility == "hidden") {       
			this.show();     
			} else {       
			this.hide();     
			}   
		}
	  }  

 

分享到:
评论

相关推荐

    谷歌地图Google Map API V3中文开发文档

    Marker 是谷歌地图 Google Map API V3 中的一个重要组件,用于在地图上标记一个特定的位置。开发者可以使用 Marker 对象来创建一个新的标记,该对象提供了多种方法和属性,以便开发者可以自定义标记的样式和行为。 ...

    google map v3,V3地图搜素,V3地图标注

    V3地图搜索功能允许开发者集成地图服务,使用户能够在地图上搜索特定的位置或获取附近的兴趣点。这主要通过`google.maps.places`命名空间中的服务来实现。首先,我们需要加载 Places Service,然后使用`Autocomplete...

    Google map 谷歌地图 Google地图 V3 第三版

    开发者可以使用`<script>`标签引入API,并通过回调函数在地图加载完成后执行自定义代码。 ```html <script async defer src="https://maps.googleapis....

    GoogleMap V3 中文 教程

    Google Map V3是Google Maps API的一个重要版本,主要针对Web开发,提供了一整套用于在网页中集成地图、定位、路线规划等功能的工具。这个中文教程可以帮助开发者理解和运用V3版本的API,即便在无法访问互联网的情况...

    googleMap V3 中文API

    - `google.maps.Marker`用于在地图上添加图标或文本。你可以自定义标记的位置、图标、是否可拖动等属性。 5. **信息窗口(InfoWindows)**: - `google.maps.InfoWindow`用于在地图上显示弹出信息。它可以包含...

    google map api v3源码

    4. **信息窗口(InfoWindow)**: 信息窗口可以在地图上的标记或其他位置显示详细信息。 ```javascript var infowindow = new google.maps.InfoWindow({ content: 'Hello World!' }); marker.addListener('click',...

    Google Map v3 官方实例

    3. **标记(Markers)**:通过`google.maps.Marker`类,可以在地图上添加表示特定位置的图标。你可以自定义标记的图标,设置点击事件监听器,以及动态改变标记的位置。 4. **信息窗口(InfoWindows)**:与标记关联...

    谷歌MAP_V3中文详解以及一个简单例子

    谷歌地图API V3是Google提供的一套用于在网页上嵌入地图、进行地理位置处理的JavaScript接口。这个API允许开发者在自己的网站上创建交互式地图,包括但不限于定位、标记、信息窗口、路线规划等功能。本教程将对谷歌...

    谷歌地图API-google map api v3

    **覆盖物** 是放置在地图上的图形元素,如标记、多边形等。 - **Marker**: 标记是地图上显示的一个点。 - **MarkerOptions**: 包括位置、图标等配置。 - **Icon**: 自定义图标。 - **MarkerShape**: 图标的形状...

    3.(leaflet篇)leaflet接入高德、openstreetmap、google地图.zip

    在本文中,我们将深入探讨如何使用Leaflet.js库来接入不同的地图服务,包括高德地图、OpenStreetMap和Google地图。Leaflet是一个轻量级且功能强大的JavaScript库,专为Web地图开发设计,广泛应用于创建交互式的地图...

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

    该组件使您可以使用叠加层在地图上显示自定义HTML内容。 该组件是与一些伟大的想法在谷歌地图V3覆盖代码示例改编从这个。 /!\ 重要的提示 该项目最初是的插件。 现在,该项目似乎不再受维护,并且已开始维护已维护...

    Google Map api V3 (3.9.12)的离线开发包

    5. **标记(Marker)与信息窗口(InfoWindow)**:可以在地图上添加标记表示特定位置,并且可以设置信息窗口显示详细信息。 ```javascript var marker = new google.maps.Marker({ position: {lat: -34.397, lng: ...

    Google Map API最新版本(V3)代码示例源码和教程

    Google Map API最新版本(V3)代码示例源码和教程,包括了添加地图、在地图上添加和自定义marker的内容、添加曲线和曲线的点击事件等最常用功能。详细教程请见:...

    经典教程:JavaScript调用Google Map API V3

    - **自定义控件和按钮**:Google Maps API V3允许在地图上添加自定义控件,如按钮、滑块或下拉菜单,以增强用户界面。这些控件可以响应用户的操作,如更改地图视图或执行特定功能。 3. **成果** - 通过学习和实践...

    谷歌地图v3案例

    2. **功能与性能**:v3版本在功能上进行了扩展,并优化了性能,支持更多的自定义选项以及更高级的地图渲染技术。 3. **文档和支持**:随着版本更新,官方对v3的支持更加全面,文档也更为完善,这有助于开发者更快地...

    google map jsv3 示例

    3. **标记(Marker)**:要在地图上添加点标记,可以使用`new google.maps.Marker()`创建一个标记对象,设置其位置、图标、信息窗口等内容。标记可以通过事件监听器实现交互,如点击弹出信息窗口。 4. **信息窗口...

    google map api v3 ExtDraggableObject

    总之,谷歌地图API V3中的`ExtDraggableObject`类提供了丰富的交互性,使用户能够直接在地图上操作对象。通过理解和利用这个类,开发者可以创建出更具吸引力和实用性的地图应用。在实践中,不断探索和优化拖放体验,...

    google Map api v3学习例子

    叠加层允许你在地图上添加自定义图层,如卫星图像、地形图或自定义图层。例如,你可以使用`google.maps.KmlLayer`来加载KML文件作为图层: ```javascript var kmlLayer = new google.maps.KmlLayer({ url: '...

    Google_map_JavaScript_API_V3

    使用`google.maps.Marker`类可以在地图上添加标记。你可以设置标记的位置、图标、信息窗口等内容。例如: ```javascript var marker = new google.maps.Marker({ position: myLatLng, map: map, title: 'Hello...

    google api v3 实例

    Google API V3,全称Google Maps JavaScript API V3,是Google提供的一套用于在网页上嵌入地图并进行交互操作的JavaScript库。这个API允许开发者通过JavaScript编程来控制Google地图的功能,实现地图显示、标记定位...

Global site tag (gtag.js) - Google Analytics