<!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>
分享到：
相关推荐
在谷歌地图的开发中，免不了在地图上添加一些标注，用于增加对特殊地理位置的描述。标注一般由图符和标题组成。 用户在某个时候，可能对某一类地理点感兴趣，此时就需要把非兴趣点的标注隐藏掉，只显示用户感兴趣的...
支持谷歌在线（离线）混合卫星地图，普通地图，地形地图，微软电子地图，微软卫星地图，bing地图，在软件界面上可以选择地图类型切换； 2.支持1-20级的地图随意缩放，鼠标右键拖动漫游。 3.支持名称查询定位，可以...
谷歌月球5.0中文免费版是由谷歌官方发布的一款谷歌月球地图，可以提供清晰直观的月球表层图像，并支持在月球上搜索特定区域，如登月地点等。本软件不仅支持查看月球地图，还提供地球、星空、火星地图的查看功能。 ...
（对线要素进行标注时，如果标注在线上，标注和线会叠加显示，效果不理想，下面叫介绍一种可以在显示标注的地方把线断开的方法，这样效果会美观一些） 操作步骤： 1）．把标注转成注记，保存在GDB中 2）． 用...
12、提供公司Google地图设置接口，可在后台进行公司方位标注，在前台同步显示您所设置的公司方位地图； 13、多项为系统优化而设置的功能接口， 14、独有精心设计的前台产品展示模块，可方便地在后台进行开启、关闭子...
特色一：提出了地图接口的概念(其实当时的想法是将网络上的所谓企业标注移植到了这个系统上，只是这个功能免费提供给了学校的部门使用)。 特色二：部分搜索功能是通过搜索SQL输出XML来实现。 特色三：系统已经详细到...
12、提供公司Google地图设置接口，可在后台进行公司方位标注，在前台同步显示您所设置的公司方位地图； 13、多项为系统优化而设置的功能接口，如站内链接(站内链接的合理建造是搜索引擎优化的重要技术之一，它的...
12、提供公司Google地图设置接口，可在后台进行公司方位标注，在前台同步显示您所设置的公司方位地图； 13、多项为系统优化而设置的功能接口，如站内链接(站内链接的合理建造是搜索引擎优化的重要技术之一，它的...
12、提供公司Google地图设置接口，可在后台进行公司方位标注，在前台同步显示您所设置的公司方位地图； 13、多项为系统优化而设置的功能接口，如站内链接(站内链接的合理建造是搜索引擎优化的重要技术之一，它的...
12、提供公司Google地图设置接口，可在后台进行公司方位标注，在前台同步显示您所设置的公司方位地图； 13、多项为系统优化而设置的功能接口，如站内链接(站内链接的合理建造是搜索引擎优化的重要技术之一，它的...
12、提供公司Google地图设置接口，可在后台进行公司方位标注，在前台同步显示您所设置的公司方位地图； 13、多项为系统优化而设置的功能接口，如站内链接(站内链接的合理建造是搜索引擎优化的重要技术之一，它的...
12、提供公司Google地图设置接口，可在后台进行公司方位标注，在前台同步显示您所设置的公司方位地图； 13、多项为系统优化而设置的功能接口，如站内链接(站内链接的合理建造是搜索引擎优化的重要技术之一，它的...
12、提供公司Google地图设置接口，可在后台进行公司方位标注，在前台同步显示您所设置的公司方位地图； 13、多项为系统优化而设置的功能接口，如站内链接(站内链接的合理建造是搜索引擎优化的重要技术之一，它的...
12、提供公司Google地图设置接口，可在后台进行公司方位标注，在前台同步显示您所设置的公司方位地图； 13、多项为系统优化而设置的功能接口，如站内链接(站内链接的合理建造是搜索引擎优化的重要技术之一，它的...
12、提供公司Google地图设置接口，可在后台进行公司方位标注，在前台同步显示您所设置的公司方位地图； 13、多项为系统优化而设置的功能接口，如站内链接(站内链接的合理建造是搜索引擎优化的重要技术之一，它的...
12、提供公司Google地图设置接口，可在后台进行公司方位标注，在前台同步显示您所设置的公司方位地图； 13、多项为系统优化而设置的功能接口，如站内链接(站内链接的合理建造是搜索引擎优化的重要技术之一，它的...
12、提供公司Google地图设置接口，可在后台进行公司方位标注，在前台同步显示您所设置的公司方位地图； 13、多项为系统优化而设置的功能接口，如站内链接(站内链接的合理建造是搜索引擎优化的重要技术之一，它的...
可以选择设置图片水印或文字水印，并可设置水印嵌入图片的位置，设置水印可以有效防止图片盗链，同时不易被修改和使用，更能表现出一个网站的特色风格，设置好水印后，添加商品上传图片时，会自动在图片上嵌入水印...
可以选择设置图片水印或文字水印，并可设置水印嵌入图片的位置，设置水印可以有效防止图片盗链，同时不易被修改和使用，更能表现出一个网站的特色风格，设置好水印后，添加商品上传图片时，会自动在图片上嵌入水印...