网上找了好久都是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();
}
}
}
分享到:
相关推荐
Marker 是谷歌地图 Google Map API V3 中的一个重要组件,用于在地图上标记一个特定的位置。开发者可以使用 Marker 对象来创建一个新的标记,该对象提供了多种方法和属性,以便开发者可以自定义标记的样式和行为。 ...
V3地图搜索功能允许开发者集成地图服务,使用户能够在地图上搜索特定的位置或获取附近的兴趣点。这主要通过`google.maps.places`命名空间中的服务来实现。首先,我们需要加载 Places Service,然后使用`Autocomplete...
开发者可以使用`<script>`标签引入API,并通过回调函数在地图加载完成后执行自定义代码。 ```html <script async defer src="https://maps.googleapis....
Google Map V3是Google Maps API的一个重要版本,主要针对Web开发,提供了一整套用于在网页中集成地图、定位、路线规划等功能的工具。这个中文教程可以帮助开发者理解和运用V3版本的API,即便在无法访问互联网的情况...
- `google.maps.Marker`用于在地图上添加图标或文本。你可以自定义标记的位置、图标、是否可拖动等属性。 5. **信息窗口(InfoWindows)**: - `google.maps.InfoWindow`用于在地图上显示弹出信息。它可以包含...
4. **信息窗口(InfoWindow)**: 信息窗口可以在地图上的标记或其他位置显示详细信息。 ```javascript var infowindow = new google.maps.InfoWindow({ content: 'Hello World!' }); marker.addListener('click',...
3. **标记(Markers)**:通过`google.maps.Marker`类,可以在地图上添加表示特定位置的图标。你可以自定义标记的图标,设置点击事件监听器,以及动态改变标记的位置。 4. **信息窗口(InfoWindows)**:与标记关联...
谷歌地图API V3是Google提供的一套用于在网页上嵌入地图、进行地理位置处理的JavaScript接口。这个API允许开发者在自己的网站上创建交互式地图,包括但不限于定位、标记、信息窗口、路线规划等功能。本教程将对谷歌...
**覆盖物** 是放置在地图上的图形元素,如标记、多边形等。 - **Marker**: 标记是地图上显示的一个点。 - **MarkerOptions**: 包括位置、图标等配置。 - **Icon**: 自定义图标。 - **MarkerShape**: 图标的形状...
在本文中,我们将深入探讨如何使用Leaflet.js库来接入不同的地图服务,包括高德地图、OpenStreetMap和Google地图。Leaflet是一个轻量级且功能强大的JavaScript库,专为Web地图开发设计,广泛应用于创建交互式的地图...
该组件使您可以使用叠加层在地图上显示自定义HTML内容。 该组件是与一些伟大的想法在谷歌地图V3覆盖代码示例改编从这个。 /!\ 重要的提示 该项目最初是的插件。 现在,该项目似乎不再受维护,并且已开始维护已维护...
5. **标记(Marker)与信息窗口(InfoWindow)**:可以在地图上添加标记表示特定位置,并且可以设置信息窗口显示详细信息。 ```javascript var marker = new google.maps.Marker({ position: {lat: -34.397, lng: ...
Google Map API最新版本(V3)代码示例源码和教程,包括了添加地图、在地图上添加和自定义marker的内容、添加曲线和曲线的点击事件等最常用功能。详细教程请见:...
- **自定义控件和按钮**:Google Maps API V3允许在地图上添加自定义控件,如按钮、滑块或下拉菜单,以增强用户界面。这些控件可以响应用户的操作,如更改地图视图或执行特定功能。 3. **成果** - 通过学习和实践...
2. **功能与性能**:v3版本在功能上进行了扩展,并优化了性能,支持更多的自定义选项以及更高级的地图渲染技术。 3. **文档和支持**:随着版本更新,官方对v3的支持更加全面,文档也更为完善,这有助于开发者更快地...
3. **标记(Marker)**:要在地图上添加点标记,可以使用`new google.maps.Marker()`创建一个标记对象,设置其位置、图标、信息窗口等内容。标记可以通过事件监听器实现交互,如点击弹出信息窗口。 4. **信息窗口...
总之,谷歌地图API V3中的`ExtDraggableObject`类提供了丰富的交互性,使用户能够直接在地图上操作对象。通过理解和利用这个类,开发者可以创建出更具吸引力和实用性的地图应用。在实践中,不断探索和优化拖放体验,...
叠加层允许你在地图上添加自定义图层,如卫星图像、地形图或自定义图层。例如,你可以使用`google.maps.KmlLayer`来加载KML文件作为图层: ```javascript var kmlLayer = new google.maps.KmlLayer({ url: '...
使用`google.maps.Marker`类可以在地图上添加标记。你可以设置标记的位置、图标、信息窗口等内容。例如: ```javascript var marker = new google.maps.Marker({ position: myLatLng, map: map, title: 'Hello...
Google API V3,全称Google Maps JavaScript API V3,是Google提供的一套用于在网页上嵌入地图并进行交互操作的JavaScript库。这个API允许开发者通过JavaScript编程来控制Google地图的功能,实现地图显示、标记定位...