<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=你的key&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(31.397, 117.644),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var overlay = new MyMarker(map,{latlng:new google.maps.LatLng(31.397, 117.644),clickFun:zoomOut});
}
function zoomOut(){
alert(3333);
}
/***************自定义叠加层，可作为站点显示在地图上******************/
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 = '<a onclick="zoomOut()" href="#">'+this.labelText+'</a>';
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.overlayMouseTarget.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();
}
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
分享到：
相关推荐
在进行谷歌地图开发时，为了增强地图的信息性和交互性，开发者经常会向地图上添加各种标注。这些标注不仅能够帮助用户更直观地理解特定地理位置的相关信息，还能根据用户的兴趣或需求动态地显示或隐藏。然而，在实现...
地图标注是指在地图上添加自定义图标或文字，以标识特定的地点、事件或其他信息。开发者可以通过地图API来创建、编辑和删除标注。标注可以包含信息如名称、地址、电话等，并且可以设置点击事件，展示详细信息或者...
在这个特定的项目中，"asp电子地图标注"指的是利用ASP技术构建的一个在线地图应用，它允许用户在网页上进行地图标注，从而为自己的网站添加地图导航功能。这种功能在很多领域都有应用，如商业网站、旅游平台、房地产...
2. **标注功能**：在下载的地图上，用户可以进行个性化标注，添加点、线、面标记，以及自定义文字说明，这对于地理信息分析、路线规划或者项目管理等应用场景非常实用。标注功能使得地图更加生动、直观，提高了信息...
以下是一些关于如何在Android图片上添加文字的关键知识点： 1. **画布与Bitmap**: 在Android中，我们可以使用`Bitmap`对象来代表图像。`Canvas`是用于在`Bitmap`上绘制图形、文字等元素的工具。通过调用`Canvas`的`...
支持谷歌在线（离线）混合卫星地图，普通地图，地形地图，微软电子地图，微软卫星地图，bing地图，在软件界面上可以选择地图类型切换； 2.支持1-20级的地图随意缩放，鼠标右键拖动漫游。 3.支持名称查询定位，可以...
这个应用可能整合了第三方地图API，如Google Maps API或高德地图API，来绘制和管理地图本身，同时通过API提供的接口添加自定义标注点。 9. **Web Accessibility**： 对于一个优秀的Web应用，无障碍性（Web ...
在地图服务中，覆盖物通常指的是在地图图像之上显示的任何自定义元素，如图标、标注、图形或动态数据。它们可以用来表示地点、事件、路线或其他具有地理位置信息的数据。Map覆盖物的添加使得开发者能够个性化地图，...
Overlay代表覆盖物，是谷歌地图API中用于在地图上添加自定义图形元素的类。通过创建Overlay子类的实例，开发者可以创建自定义标签、信息窗口、多边形、折线等，将它们附加到地图上，使得地图更加生动且富有信息。 ...
Google地图API是一套由Google提供的用于在网页上集成和展示地图的工具集合。通过使用这些API，开发者可以轻松地在自己的网站或应用中嵌入交互式地图、搜索地点等功能。 **注册与获取API密钥：** 为了使用Google地图...
4. **标注**：在地图上添加自定义的图标或文字以标记特定地点是地图应用常见的功能。Android地图SDK支持创建自定义的Marker对象，可以设置图标、标题和描述，点击事件等。Demo中，开发者可能演示了如何添加、删除和...
在线标注通常涉及到在网页版或移动应用版的谷歌地图上直接添加标记，用户可以输入地址、添加注释、设置自定义图标，甚至分享这些标注。离线标注则可能是指在没有网络连接的情况下，预先下载地图数据并在本地进行标注...
1. **GMarker添加文字**：可以在标记上附加文本标签。 2. **添加滑动门效果**：创建一个可以打开和关闭的标记效果，通常用于显示隐藏信息。 3. **自定义图片无效果**：可以替换默认的标记图标，使用自定义的图片。 ...
首先，需要引入谷歌地图API，这通常通过在HTML文件中添加一个`<script>`标签来完成。接着，我们使用JavaScript初始化地图对象，设置中心点坐标、初始缩放级别等参数。 在JavaScript中，我们可以使用谷歌地图API提供...
地图标注是指在地图上添加自定义图标或者文字，用于标记特定位置。高德地图API提供了多种方式实现标注，如Marker、InfoWindow等。创建一个Marker实例，设置其位置、图标和点击事件： ```java LatLng latLng = new ...
开发者可以通过调用SDK提供的API来实现各种地图相关的功能，如添加自定义标注、设置地图样式、获取当前位置等。 2. **百度定位SDK**： 百度定位SDK提供了强大的定位服务，支持GPS、WiFi、基站等多种定位方式，可以...
6. **地图标注**：在地图上添加个性化标记，可以是图标、文字或者信息窗口。 7. **路径规划API**：如Google Maps Directions API，用于计算两点之间的最优路径。 通过深入学习和理解这套源码，开发者不仅可以掌握...
4. **自定义标注**：VIP用户可能能创建更多或更复杂的自定义标注，比如添加图片、文字说明等。 5. **历史轨迹记录**：VIP1可能有更长的历史轨迹保存期限，方便用户回溯和分析自己的行动路径。 6. **云同步**：数据...
奥维互动地图允许用户在地图上进行标注、测量距离、规划路线等操作，并且支持导入和导出地图数据，包括卫星地图的配置文件。 【压缩包子文件的文件名称列表】 "Google卫星混合图（配置文件3月24日更新）.ovmap"是...
5. **地图API集成**：如果使用第三方地图服务（如Google Maps、高德地图或百度地图），需要熟悉对应的API接口，获取地图图层、添加标注、监听点击事件等。 6. **数据处理**：城市数据通常以JSON或其他格式存储，...