xiaoboss
- 浏览: 648171 次
- 性别:
- 来自: 广州
-
文章分类
- 全部博客 (144)
- grails (2)
- jboss (2)
- html5 (2)
- maven (9)
- mysql (9)
- android (13)
- java (39)
- javascript (16)
- flex (3)
- oracle (7)
- ubuntu (5)
- tomcat (1)
- ssh (1)
- iphone (0)
- eclipse (5)
- jquery (4)
- web (7)
- ibatis (7)
- dwr (5)
- hibernate (1)
- ws (0)
- freemarker (4)
- css (2)
- webservice (1)
- html (2)
- jsp (4)
- os (5)
- xp (4)
- cpu (2)
- sql (5)
- db (2)
- 数据库 (5)
- log4j.properties (1)
- date (1)
- map (1)
- log4j (1)
- java spring dwr (1)
- (2)
- xml (4)
- ajax (3)
- servlet (1)
- xmlhttp (1)
- linux (2)
- socket (2)
- java，多线程 (1)
- android，java，os (1)
- Android，java (2)
- spring (1)
- java，dwr (1)
- js (2)
- 回调 (1)
- java，event (1)
- java ，注解， (1)
- avd (1)
- sdk (1)
- maven，java，xml，nexus (1)
- java，maven，nexus (1)
- Maven，Android，i-jetty，java (1)
- web js 参数 (1)
- java mac os (1)
- mac os (2)
- mac (1)
- 环境 (1)
- 搭建 (1)
- adt (1)
- adb (1)
- iOS (1)
最新评论
-
lhs472194266：
可以 X-Forwarded-For 可以轻易的被伪造
Java获取IP地址:request.getRemoteAddr()警惕 -
Nabulio：
图片全部加载不出来
maven 建立本地仓库 -
wahaha603：
...
Properties的相对路径以及文件的读取操作 -
一别梦心：
图片没了，楼主补充一下吧
maven 建立本地仓库 -
a_jie1981：
a_jie1981 写道试试http://www.findma ...
maven 建立本地仓库
需要引入script标签
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=cn ">
一段加入地图的代码
<body>
<div id="cc" style="width: 400px; height: 400px"></div>
<mce:script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=cn" mce_src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=cn"></mce:script>
<mce:script type = "text/javascript"><!--
(function(win,doc,undefined){
var gMap = google.maps,
myLatlng = new gMap.LatLng(22.53821,113.9198),
myOptions = {
zoom : 13,
center : myLatlng,
mapTypeId : gMap.MapTypeId.ROADMAP
};
map = new gMap.Map(document.getElementById('cc'), myOptions);
})(window,document);
// --></mce:script>
</body>
new google. maps . LatLng (myLatitude , myLongitude ) 是设置地图精度纬度的
构建一个 LatLng
对象，以 {纬度, 经度} 的顺序传递其参数：
myOptions 配置项 zoom 大小级别 center 中心的位置 就是前面创造出的对象
mapTypeId 支持4个类型
new google.maps.Map (document.getElementById('cc'), myOptions)
创建地图类 第一个参数是容器元素 第二个参数是配置
地图事件
用户事件 (其实就是鼠标操作时候的事件)
'click'
'dblclick'
'mouseup'
'mousedown'
'mouseover'
'mouseout'
地图事件
zoom_changed
center_changed
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ready</title>
<style type="text/css">
.cc{height:20px; width:250px; background-color:#993300}
</style>
</head>
<body>
<div id="cc" style="width: 400px; height: 400px"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=cn"></script>
<script type = "text/javascript">
(function(win,doc,undefined){
var gMap = google.maps,
uuuid = 1,
myLatlng = new gMap.LatLng(22.53821,113.9198),
myOptions = {
zoom : 13,
center : myLatlng,
mapTypeId : gMap.MapTypeId.ROADMAP
},
map = new gMap.Map(document.getElementById('cc'), myOptions);
//marker 是标记
var marker = new gMap.Marker({
position : myLatlng,
map : map,
title : "hello BeiJu!"
});
gMap.event.addListener(marker,'click',function(){
map.setZoom(8);
});
gMap.event.addListener(map,'click',function(event){
new gMap.Marker({
position : event.latLng,
map : map,
title : '新增加标注!'
});
map.setCenter(event.latLng);
});
var zoomLevel,
infoWindow = new gMap.InfoWindow({
content : 'Zoom Level Test',
size : new gMap.Size(50,50),
position : myLatlng
});
infoWindow.open(map);
gMap.event.addListener(map,'zoom_changed',function(){
zoomLevel = map.getZoom();
infoWindow.setContent("当前Zoom:"+zoomLevel);
if(zoomLevel===6){
alert('6le')
map.setZoom(13);
}
});
})(window,document);
</script>
</body>
</html>
控件
导航控件
可显示为以下 style
选项之一：
-
google.maps.NavigationControlStyle.SMALL，用于显示迷你缩放控件，其中仅限 ＋ 和 － 按钮。此样式适用于移动设备。 -
google.maps.NavigationControlStyle.ZOOM_PAN，用于显示如 Google Maps 中所示带有平移控件的标准缩放滑块控件。 -
google.maps.NavigationControlStyle.ANDROID，用于显示 Android 设备上的本地 Google Maps 应用程序中所使用的小型缩放控件。 -
google.maps.NavigationControlStyle.DEFAULT，会根据地图的尺寸和运行地图的设备挑选合适的导航控件。
MapType 控件
可显示为以下 style
选项之一：
-
google.maps.MapTypeControlStyle.HORIZONTAL_BAR，用于在水平栏中将一组控件显示为如 Google Maps 中所示按钮。 -
google.maps.MapTypeControlStyle.DROPDOWN_MENU，用于显示单个按钮控件，以便您从下拉菜单中选择地图类型。 -
google.maps.MapTypeControlStyle.DEFAULT，用于显示“默认”的行为，该行为取决于屏幕尺寸，并且可能会在 API 以后的版本中有所变化。
请注意，如果您确实想要修改任何控件选项，您还是应当通过将 MapOptions
值设置为 true
以显式地启用相应的控件。
修改控件
您可以在创建地图时通过地图的 MapOptions
对象中的字段指定控件的显示。下面对这些字段进行了说明：
-
mapTypeControl可启用/停用“地图类型”控件，该控件允许用户在地图类型（如“地图”和“卫星”）之间切换。默认情况下，此控件将显示在地图右上角。mapTypeControlOptions字段可进一步指定要用于此控件的MapTypeControlOptions。 -
navigationControl可启用/停用“导航”控件，该控件可提供一个平移/缩放控件。默认情况下，此控件将显示在地图左上角。navigationControlOptions字段可进一步指定要用于此控件的NavigationControlOptions。 -
scaleControl可启用/停用“比例”控件，该控件可提供一个简单的地图比例尺。默认情况下，不会显示此控件。启用后，它将显示在地图的左下角。scaleControlOptions可进一步指定用于此控件的ScaleControlOptions。
请注意，您可以为您最初停用的控件指定选项。
控件定位
每个控件选项都包含一个 position
属性（类型为 ControlPosition
），它指明要在地图上放置该控件的位置。控件的定位并不是绝对的；相反，API 会在给定的约束条件（如地图大小）下，通过围绕现有地图元素或其他控件“流动”控件以智能方式布局控件。注意：
虽然 API 会尝试以智能方式排列控件，但这并不能保证控件不会叠加指定的复杂布局。
系统支持以下控件位置：
-
TOP表示控件应沿着地图顶部中心放置。 -
TOP_LEFT表示控件应沿着地图顶部左侧放置，控件的任何子元素“流”向顶部中心。 -
TOP_RIGHT表示控件应沿着地图顶部右侧放置，控件的任何子元素“流”向顶部中心。 -
BOTTOM表示控件应沿着地图底部中心放置。 -
BOTTOM_LEFT表示控件应沿着地图底部左侧放置，控件的任何子元素“流”向底部中心。 -
BOTTOM_RIGHT表示控件应沿着地图底部右侧放置，控件的任何子元素“流”向底部中心。 -
LEFT表示控件应沿着地图左侧放置，位于使用TOP_LEFT定位方法放置的任何元素之下，控件的任何子元素“流”向底部。 -
RIGHT表示控件应沿着地图右侧放置，位于使用TOP_RIGHT定位方法放置的任何元素之下，控件的任何子元素“流”向底部。
bounds_changed
ROADMAP
，用于显示 Google Maps 默认的普通二维图块。SATELLITE
，用于显示拍摄的图块。HYBRID
，用于同时显示拍摄的图块和突出特征（道路、城市名）图块层。TERRAIN
，用于显示自然地形图块，自然地形图块中会显示高度和水体特征（山脉、河流等）。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ready</title>
<style type="text/css">
.cc{height:20px; width:250px; background-color:#993300}
</style>
</head>
<body>
<div id="cc" style="width: 400px; height: 400px"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=cn"></script>
<script type = "text/javascript">
(function(win,doc,undefined){
var gMap = google.maps,
uuuid = 1,
myLatlng = new gMap.LatLng(22.53821,113.9198),
myOptions = {
zoom : 13,
center : myLatlng,
//取消默认控件设置
//disableDefaultUI : true,
//导航控件的初始启用/停用状态
//navigationControl : true,
//缩放控件的初始启用/停用状态。
//scaleControl : false,
navigationControl : true,
//小缩放按钮
navigationControlOptions: {
style : google.maps.NavigationControlStyle.SMALL,
position : google.maps.ControlPosition.TOP_RIGHT
},
mapTypeControl : true,
//地图类型可选形式
mapTypeControlOptions: {
style : google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position : google.maps.ControlPosition.BOTTOM
},
mapTypeId : gMap.MapTypeId.ROADMAP
},
map = new gMap.Map(document.getElementById('cc'), myOptions);
})(window,document);
</script>
</body>
</html>
自定义控件
除了修改现有 API 控件的样式和位置外，您还可以创建自己的控件以处理与用户的交互操作。控件是固定的窗口小部件，浮动在地图之上的绝对位置处；这与“叠加”不同，后者会随下面的地图一起移动。
从本质上讲，控件只是一个在地图上具有绝对位置的 <div>
元素，它会向用户显示某个用户界面，并处理与用户或地图的交互（通常通过某个事件处理程序）。
要创建您自己的自定义控件，没有什么需要遵循的“规则”。不过，您可以将以下指导原则视为最佳实践的参考：
- 为要显示的控件元素定义适当 CSS。
- 针对地图属性更改或用户事件（如
'click'事件），通过事件处理程序处理与用户或地图的交互。 - 创建一个
<div>元素以承载控件并将此元素添加到Map的controls属性中。
处理自定义控件的事件
要使控件有用，它必须能够实际完成某些任务。控件的用途由您确定。控件可以响应用户输入，也可以响应 Map
的状态变化。
对于响应用户输入，Google Maps API 提供了一个跨浏览器的事件处理方法 addDomListener()
，它可以处理浏览器的多数支持的 DOM 事件
。
定位自定义控件
要在地图上定位自定义控件，您可以在 Map
对象的 controls
属性中将其放在适当位置。此属性包含一个 google.maps.ControlPosition
数组。您可以通过将 Node
（通常是 <div>
）添加至适当 ControlPosition
向地图中添加自定义控件。（有关这些位置的信息，请参见上面的控件定位
。）
每个 ControlPosition
会存储一个显示在该位置的控件的 MVCArray
。因此，当您向该位置添加或从中删除控件时，API 将相应更新控件。
API 按照 index
属性的顺序将控件放在每个位置，并会首先放置索引值较低的控件。例如，位置 BOTTOM_RIGHT
处的两个自定义控件将按照此索引顺序进行排列，并优先放置索引值较低的控件。默认情况下，所有自定义控件将在放置完任何 API 默认控件之后进行放置。
您可以通过将控件的 index
属性设置为一个负值覆盖此行为。请注意，如果希望在放置相同位置的默认 API 控件“之前”放置您的控件，通常只需设置一个索引值。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ready</title>
<style type="text/css">
.cc{height:20px; width:250px; background-color:#993300}
</style>
</head>
<body>
<div id="cc" style="width: 400px; height: 400px"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=cn"></script>
<script type = "text/javascript">
(function(win,doc,undefined){
var gMap = google.maps,
uuuid = 1,
myLatlng = new gMap.LatLng(22.53821,113.9198),
myOptions = {
zoom : 13,
center : myLatlng,
//小缩放按钮
navigationControlOptions: {
style : google.maps.NavigationControlStyle.SMALL,
position : google.maps.ControlPosition.TOP_RIGHT
},
mapTypeControl : true,
//地图类型可选形式
mapTypeControlOptions: {
style : google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position : google.maps.ControlPosition.BOTTOM
},
mapTypeId : gMap.MapTypeId.ROADMAP
},
map = new gMap.Map(document.getElementById('cc'), myOptions);
var div = document.createElement('div');
div.className = 'cc';
div.innerHTML = 'beijubeiju..';
gMap.event.addDomListener(div,'click',function(){
map.setZoom(15);
});
div.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(div);
})(window,document);
</script>
</body>
</html>
OverlayView
自定义叠加层
Google Maps API 第 3 版提供了用于创建自定义叠加层的 OverlayView
类。OverlayView
是一个基类，提供了您在创建叠加层时必须实现的若干方法。该类还提供了一些方法，用于实现屏幕坐标和地图位置之间的转换。
要创建自定义叠加层，请执行以下操作：
- 将自定义对象的
prototype设置为google.maps.OverlayView()的新实例。这可以有效地实现叠加层类的“子类化”。 - 为自定义叠加层创建构造函数，并将该构造函数中的所有初始化参数都设置为自定义属性。
- 在原型中实现
onAdd()方法，以将叠加层附加到地图上。当地图准备好附加叠加层后，系统将会调用OverlayView.onAdd()。 - 在原型中实现
draw()方法，以处理对象的视觉显示。同样，在对象首次显示后，系统将会调用OverlayView.draw()。 - 您还应当实现
onRemove()方法，以清理在叠加层中添加的所有元素。
一个简单的例子.................
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ready</title>
<style type="text/css">
.cv{height:250px; width:250px; background-color: #CCFFCC}
</style>
</head>
<body>
<div id="cc" style="width: 680px; height: 680px"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=cn"></script>
<script type = "text/javascript">
function custom(map,text,latLng){
this.map = map;
this.text = '<div class="cv">' + text + '</div>';
this.latLng = latLng;
this.div = null;
// Explicitly call setMap() on this overlay
this.setMap(map);
};
custom.prototype = new google.maps.OverlayView();
custom.prototype.onAdd = function(){
this.div = document.createElement('div');
this.div.style.position = 'absolute';
this.div.innerHTML = this.text;
this.getPanes().overlayLayer.appendChild(this.div);
};
custom.prototype.draw = function(){
var latLng = this.getProjection().fromLatLngToDivPixel(this.latLng),
size = new google.maps.Size(0,0);
this.div.style.left = latLng.x + size.width + 'px';
this.div.style.top = latLng.y + size.height + 'px';
};
custom.prototype.onRemove = function(){
this.div.parentNode.removeChild(this.div)
this.div = null;
};
window.onload = function(){
var myLatlng = new google.maps.LatLng(22.56821,113.9198),
myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
},
map = new google.maps.Map(document.getElementById("cc"), myOptions);
new google.maps.Marker({
position : myLatlng,
map : map,
title : "Hello World!"
});
new custom(map,'<div class="cv">我擦....</div>',myLatlng);
};
</script>
</body>
</html>
划线
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>google map</title>
<style type="text/css">
.cc{height:100px; width:100px; border:1px solid #666666; background-color:#FFFF66;}
.tip{width:350px;height:196px;background-image:url(tip.png); color:#FFF; padding:20px 0 0 20px;}
body{font-size:12px;}
</style>
</head>
<body>
<div id="ff" style="width: 400px; height: 350px"></div>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=cn"></script>
<script type = "text/javascript">
(function(doc,undefined){
var win = this,
gMap = win.google.maps,
map = new gMap.Map(doc.getElementById('ff'),{
zoom : 13,
center : new gMap.LatLng(22.53821,113.9198),
mapTypeId : gMap.MapTypeId.ROADMAP
});
new gMap.Polyline({
path : [
new gMap.LatLng(22.56821,113.9198),
new gMap.LatLng(22.54821,113.9298),
new gMap.LatLng(22.52821,113.9158),
new gMap.LatLng(22.50821,113.9258)
],
strokeColor : '#000000',
strokeOpacity : 1.0,
strokeWeight : 2
}).setMap(map);
})(document);
</script>
</body>
</html>
当前地图 整个容器经纬度操作
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div id="ff" style="width: 400px; height: 400px"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=cn"></script>
<script type = "text/javascript">
window.onload = function(){
var gMap = google.maps,
myLatlng = new gMap.LatLng(22.53821,113.9198),
myOptions = {
zoom : 13,
center : myLatlng,
mapTypeId : gMap.MapTypeId.ROADMAP
},
map = new gMap.Map(document.getElementById('ff'), myOptions),
getBounds;
setTimeout(function(){
getBounds = map.getBounds();
//右上角经纬度
var dot1 = getBounds.getNorthEast(),
//左下角经纬度
dot2 = getBounds.getSouthWest(),
stepX = ((dot1.ra*1000- dot2.ra*1000)/5)/1000,
stepY = ((dot1.sa*1000- dot2.sa*1000)/5)/1000,
i = 0;
//随机添加5个点
while(i++<5){
new gMap.Marker({
position : new gMap.LatLng(dot2.ra+stepX*i,dot2.sa+stepY*i),
map : map,
title : '生活中充满了悲剧！！'
});
}
},200);
//如果客户不喜欢google map 自带的弹出框 想自己制作
//但是自己制作弹出层 是不会自适应当前地图全部显示的 只是根据弹出层的大小 和 当前地图的 整个的位置 来计算了
};
</script>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>google map</title>
<style type="text/css">
.cc{height:100px; width:100px; border:1px solid #666666; background-color:#FFFF66;}
.tip{width:350px;height:196px;background-image:url(tip.png); color:#FFF; padding:20px 0 0 20px;}
body{font-size:12px;}
</style>
</head>
<body>
<div id="ff" style="width: 400px; height: 350px"></div>
<input type="button" value='aaaaaa' id='aa'>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=cn"></script>
<script type = "text/javascript">
(function(doc,undefined){
var win = this,
gMap = win.google.maps;
function customLayer(map,latLng){
this.map = map;
this.latLng = latLng;
this.div = null;
this.setMap(map);
};
customLayer.prototype = new gMap.OverlayView();
$.extend(customLayer.prototype,{
onAdd : function(){
this.div = doc.createElement('div');
this.div.style.position = 'absolute';
this.div.style.display = "none";
this.getPanes().overlayLayer.appendChild(this.div);
},
draw : function(latLng,html,size){
latLng = this.getProjection().fromLatLngToDivPixel(latLng||this.latLng);
size = size || [0,0];
size = new gMap.Size(size[0],size[1]);
this.div.style.left = latLng.x + size.width + 'px';
this.div.style.top = latLng.y + size.height + 'px';
if(!html||html.replace(/\s+/g,'')==='')
return;
this.div.innerHTML = html;
},
onRemove : function(){
if(!this.div)
return;
this.div.parentNode.removeChild(this.div)
this.div = null;
},
show : function(){
this.div.style.display = "";
this.div.parentNode
&&(this.div.parentNode.style.zIndex = "1000");
},
hide : function(){
this.div.style.display = "none";
}
});
win.vv = function(){
this.init.apply(this,arguments);
};
vv.prototype = {
init : function(container,LatLng,mapOptions){
container = typeof container === 'string'
? $('#'+container)[0]
: container;
LatLng = LatLng || [22.53821,113.9198];
mapOptions = $.extend({
zoom : 13,
center : new gMap.LatLng(LatLng[0],LatLng[1]),
navigationControl : true,
navigationControlOptions : {
style : google.maps.NavigationControlStyle.DROPDOWN_MENU
},
mapTypeId : gMap.MapTypeId.ROADMAP
},mapOptions || {});
//地图类
this.map = new gMap.Map(container,mapOptions);
//自定义层
this.tip = new customLayer(this.map,new gMap.LatLng(LatLng[0],LatLng[1]));
//点击的弹出信息
this.popup = new customLayer(this.map,new gMap.LatLng(LatLng[0],LatLng[1]));
// onAdd方法会延迟执行的 所有这里也做一个延迟
var self = this;
setTimeout(function(){
self.popup.div.className ='tip';
},300);
//定时器
this.timer = null;
//当前经纬度
this.currLatLng = null;
},
//弹出的提示信息.........
popupShow : function(html,latLng){
this.popup.draw(latLng,html,[-185,-216]);
this.popup.show();
},
tipShow : function(html,latLng){
//alert(latLng);
//如果当前经纬度存在
if(this.currLatLng !== null){
//当前经纬度等于现在的经纬度 则不进行操作
//如果不等于 关闭层
clearTimeout(this.timer);
this.timer = null;
if(this.currLatLng.ra !== latLng.ra||this.currLatLng.sa !== latLng.sa){
this.tip.hide();
this.currLatLng = latLng;
this.tip.draw(latLng,html);
this.tip.show();
}
}else{
this.currLatLng = latLng;
this.tip.draw(latLng,html);
this.tip.show();
}
},
tipHide : function(){
this.timer = setTimeout((function(oThis){
return function(){
oThis.tip.hide();
oThis.currLatLng = null;
};
})(this),500);
},
setMarker : function(options){
if(!options.latLng)
return;
var marker = new gMap.Marker({
position : new gMap.LatLng(options.latLng[0],options.latLng[1]),
map : this.map,
icon : options.imgSrc || 'm.gif'
}),
self = this;
options.events&&options.events.length>0
&&$.each(options.events,function(i,o){
gMap.event.addListener(marker,o.event,function(){
o.handle.apply(self,[marker]);
});
});
},
bind : function(type,handle){
if(!type || !handle)
return;
var self = this;
gMap.event.addListener(this.map,type,function(){
handle.apply(self);
});
},
panTo : function(pos){
var latLng = this.map.getCenter();
this.map.setCenter(new gMap.LatLng(latLng.ra + pos.left,latLng.sa + pos.top));
}
}
})(document);
$(document).ready(function($){
var map = new vv('ff');
$('#aa').bind('click',function(){
map.panTo({left:0.001,top:0.001})
});
map.bind('click',function(event){
this.popup.hide();
});
var data = [
{
latLng : [22.56821,113.9198],
title : '卖羊肉串......',
info : '很多很多羊肉串啊，超级多........'
},
{
latLng : [22.54821,113.9298],
title : '卖猪肉串......',
info : '很多很多猪肉串啊，超级多........'
},
{
latLng : [22.52821,113.9158],
title : '卖烧烤的......',
info : '很多很卖烧烤串啊，超级多........'
},
{
latLng : [22.50821,113.9258],
title : '卖冷饮的',
info : '冰棒,雪糕,娃哈哈。。。。。。。。。。'
}
];
$.each(data,function(i,o){
var latLng = new window.google.maps.LatLng(o.latLng[0],o.latLng[1]);
map.setMarker({
latLng : o.latLng,
title : o.title,
events :[
{
event : 'mouseover',
handle : function(marker){
this.tipShow('<div class="cc">' + o.title + '</div>',latLng);
}
},
{
event : 'mouseout',
handle : function(marker){
this.tipHide();
}
},
{
event : 'click',
handle : function(){
this.popupShow(o.info,latLng);
}
}
]
})
});
});
</script>
</body>
</html>
分享到：
发表评论
-
操作cookies
2012-02-06 23:08 1006一直不是很明白有关客户端cookies的相关内容，只是觉得它可 ... -
JavaScript跨域问题分析与总结
2012-02-06 22:59 1678一、为什么需要JS跨域 ... -
dwr同步问题
2012-02-06 22:58 849想要异步的时候，想要同步的时候同步，在不同的情况下我们有不同的 ... -
ie下的js调试工具
2011-09-26 14:13 1304js程序的调试是相当郁闷的，因为首先这种语言语法比较灵活，它是 ... -
JavaScript出现“不能执行已释放的Script代码”错误的原因及解决办法
2011-08-29 16:15 1018很多web开发者或许都遇到过这样的问题，程序莫名奇怪出现“不能 ... -
超链接中的 javascript:void(0);
2011-08-22 02:38 1099写在前面: 因为有了 IE6 所以有了下面的文字. 如果你对 ... -
ie6中href设为javascript:void(0)页面无法提交
2011-08-22 02:34 1630< a class = & ... -
子窗口向父窗口变量传值
2011-07-18 01:39 1206父窗口： <script> var aaa ... -
js中回车事件的捕捉
2011-07-14 15:55 3601下面给一个例子，回车触发按钮的onclick事件。 < ... -
延迟异步加载 JavaScript
2011-06-27 15:12 1482为了增强网站的交互效 ... -
FCKEditor插件的开发指南
2011-06-09 11:57 1010FCKEditor已经提供了强大功能.但有时根据业务要求,需要 ... -
FCKEdior'自动保存'的解决方案
2011-06-09 11:44 1195FCKEditor没有自动保存功 ... -
Javascript中匿名函数的调用方式
2011-06-04 21:23 1008在使用javascript时我们经常会遇到一种在定义时不带名称 ... -
【JavaScript】使用定时器实现Js的延期执行或重复执行setTimeout,setInterval
2011-05-30 19:49 1044使用定时器实现JavaScript ... -
世界上最短的IE判定代码
2011-05-22 20:48 936javascript:if(-[1,]) alert(&quo ...
相关推荐
谷歌地图 Google Map API V3 中文开发文档 谷歌地图 Google Map API V3 中文开发文档是 Google 公司提供的一种基于 Web 的地图应用程序接口，允许开发者在自己的网站或应用程序中嵌入谷歌地图，以提供地图检索、...
由于这个压缩包名为"WebMap"，里面可能包含了一个简单的web应用，展示如何使用谷歌地图API V3来创建一个网页地图。开发者可以通过分析和学习这个源码，了解上述知识点的实际应用，并进一步扩展自己的地图应用开发...
Google Map API V3（3.9.12）是谷歌提供的一个用于在网页上嵌入交互式地图的服务，它是Google Maps JavaScript API的第三个主要版本。这个离线开发包允许开发者在没有网络连接的情况下进行地图应用的开发和测试，这...
JavaScript调用Google Map API V3是一项常见的Web开发任务，它允许开发者在网页中嵌入交互式地图，并根据需求进行自定义。以下是对这个经典教程的详细解析： 1. **目标** - 整个教程旨在教会读者如何利用...
### 谷歌地图API V3 - 详细知识点解析 #### 概述 谷歌地图API V3（Google Maps API V3）是谷歌提供的一套强大的工具和服务集合，旨在帮助开发者在网页上集成交互式地图。它支持多种功能，如自定义地图样式、添加...
通过这个"google Map api v3学习例子"，你可以逐步掌握如何利用Google Maps API V3构建交互式地图应用，包括添加标记、处理事件、展示叠加层等功能。实践中不断探索，你会发现Google Maps API V3的强大和灵活性，能...
谷歌地图API V3是Google为开发者提供的一种强大的工具，用于在网页上集成和操作地图。在API中，`ExtDraggableObject`是一个自定义扩展类，它允许用户将地图上的对象（如标记、覆盖物等）进行拖放操作，极大地增强了...
最新版的Google Map API是V3，它是一个基于JavaScript的API，具有高度可定制性和灵活性。 在Google Map API V3中，开发者可以实现以下主要功能： 1. **地图嵌入**：通过简单的HTML和JavaScript代码，可以在网页上...
在 Google Maps API V3 中，Map 是地图的核心组件，提供了多种配置选项和事件监听器。开发者可以使用 MapOptions 对象来配置地图的基本属性，如中心点、缩放级别、地图类型等。同时，MapTypeId 对象提供了多种地图...
谷歌地图API V3是Google提供的一套用于在网页上嵌入地图、进行地理位置处理的JavaScript接口。这个API允许开发者在自己的网站上创建交互式地图，包括但不限于定位、标记、信息窗口、路线规划等功能。本教程将对谷歌...
Google Maps API V3 是谷歌为开发者提供的一个强大工具，用于在网站或应用程序中集成交互式地图功能。这个API允许开发人员自定义地图显示的内容、样式以及交互方式，从而构建出各种基于地理位置的应用。在Google ...
Google Map V3是Google Maps API的一个重要版本，主要针对Web开发，提供了一整套用于在网页中集成地图、定位、路线规划等功能的工具。这个中文教程可以帮助开发者理解和运用V3版本的API，即便在无法访问互联网的情况...
**Google Map V3 API**是谷歌提供的一种用于在网页中集成地图功能的接口，它允许开发者利用JavaScript语言创建交互式的地图应用。这个API是Google Maps API的第三个主要版本，提供了更多的功能、更好的性能以及更...
Google Map API V3是Google提供的一个JavaScript库，用于在网页上嵌入交互式地图。这个API提供了丰富的功能，如定位、路线规划、地图缩放和平移等。在这个压缩包中，包含了使用Google Map API V3来实现离线地图的...
谷歌地图JavaScript API V3是谷歌提供的用于在网页中嵌入交互式地图的服务。这个API允许开发者通过JavaScript编程语言创建各种地图应用，包括自定义标记、信息窗口、路线规划、地理编码、以及各种地图样式和控件。V3...
### Google Maps API V3 开发必备知识点 #### 一、概览 Google Maps API V3 是一个强大的工具，允许开发者将交互式的谷歌地图嵌入到网页应用中。它提供了丰富的功能，包括自定义地图样式、添加标记、路线规划等。...
### 谷歌Maps API V3 知识点解析 #### 一、概述 Google Maps JavaScript API V3 是一个强大的工具包，允许开发者在网页上嵌入交互式地图。此版本相比之前的版本提供了更多的功能和更好的性能。通过API，用户能够...
Google Map API最新版本(V3)代码示例源码和教程，包括了添加地图、在地图上添加和自定义marker的内容、添加曲线和曲线的点击事件等最常用功能。详细教程请见：...
Google Map API分为多个版本，目前最常用的是V3版本，该版本提供了更灵活、更强大的API接口。 ### 二、网站资源概述 #### 1. Kuqin.com关于Google Map API的文章 - **网址**: ...