`
zhuojb
  • 浏览: 91212 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

google map 弹出信息框

阅读更多

google map v3 弹出信息框

   当鼠标移到(mouseover)标注点时会自动信息弹出对话框

  代码:

var coordInfoWindow = new google.maps.InfoWindow();

var content = ['<div style="text-align: center; font-size:14px;"><center><b>Diamantino, Brazil</b></center><img width="240" height="180" src="http://mw2.google.com/mw-panoramio/photos/small/7253919.jpg"/><div style="margin: auto; text-align: right; width: 240px;" class="linkbutton"><a href="http://www.panoramio.com/user/279908">Edson Walter Cavalari</a></div><div class="linkbutton"><a href="http://www.panoramio.com/photo/7253919" target="_blank">See more photos at Panoramio.com</a></div><br/><div class="linkbutton"><a href="" target="_blank">Read more about this location</a></div><div class="linkbutton"><a href="javascript:void(0)" id="zoomLink">Zoom in to this location</a></div></div>'].join('<br>');

google.maps.event.addListener(marker, 'mouseover', function () {
        coordInfoWindow.setContent(content);
        coordInfoWindow.setPosition(new google.maps.LatLng(location.lat, location.lng));
        coordInfoWindow.open(map);
 });

     如图:

分享到:
评论

相关推荐

    Ext Google Map 简易开发框架

    Ext Google Map简易开发框架是一种将流行的JavaScript库ExtJs与Google Maps API相结合的开发方式,用于构建功能丰富的地理信息系统。这个框架允许开发者轻松地在网页上展示地图,管理地图图层,控制图层的可见性,...

    Google Map 中国 省市边界框选源代码

    5. **交互处理**:可以添加更多的交互功能,比如点击多边形弹出信息,或者进行数据查询等。 在"GoogleMap"这个压缩包文件中,可能包含了实现这一功能的JavaScript源代码、样式文件以及可能的示例数据。源代码可能...

    GoogleMap控件下载

    4. **信息窗口**:点击标记或地图上的特定位置时弹出的浮动框,用于显示详细信息。 5. **事件处理**:监听地图的点击、拖动等事件,实现交互逻辑。 6. **地理编码**:将地址转换为经纬度坐标,反之亦然。 7. **地图...

    GoogleMap API + ASP.NET(C#)

    5. **自定义标记和信息窗口**:开发者可以创建自定义的标记图标,点击标记时弹出信息窗口显示相关信息。 6. **路径规划**:提供计算两点或多点之间的最佳路径服务,包括驾车、步行和骑行等多种模式。 **ASP.NET(C#)...

    google map api开发源代码

    InfoWindow则用于展示与标记相关的详细信息,如地点名称、地址等,用户点击标记时可以弹出。 3. **路径绘制**:Google Map API支持绘制线条和多边形,常用于展示路线、区域等。开发者可以指定路径的点坐标,并调整...

    GoogleMap地图控件应用源码_googlemapcontrol.zip

    3. 标记与信息窗口:了解如何在地图上添加标记,以及点击标记时弹出信息窗口显示详细信息。 4. 路线规划:如何实现从A点到B点的驾车、步行或骑行路线规划。 5. 事件处理:掌握监听用户交互,如点击地图、拖动标记等...

    googlemap 地图功能

    点击标记时,会弹出显示“欢迎来到悉尼!”的信息窗口。 除此之外,API还支持路径规划、地理编码(将地址转换为坐标)、反向地理编码(将坐标转换为地址)、交通状况显示、卫星视图切换等功能。例如,可以使用`...

    Google+Map+MarkerCluster++使用簡介

    4. **交互事件**:你可以监听MarkerClusterer的事件,如点击集群,然后显示详细信息或者弹出信息窗口。 ** 示例代码片段 ** ```javascript // 初始化地图 var map = new google.maps.Map(document.getElementById...

    googleMap地图

    在实际开发过程中,开发者可能还利用了事件监听器来响应用户的交互,比如点击地图或标注,触发查询或弹出信息窗口。同时,为了提高用户体验,可能会使用动画效果来平滑地移动地图或改变标注状态。 总结来说,...

    谷歌地图开发包GoogleMap

    2. **标记与信息窗口**:通过在地图上添加标记(Markers),开发者可以标注特定的位置,并可以通过点击标记弹出信息窗口(InfoWindows)展示详细信息。 3. **路径绘制**:使用Google Maps API,开发者可以绘制路线...

    C#-googlemap

    Google Maps API提供了丰富的JavaScript对象和方法,如`google.maps.Map`用于创建地图实例,`google.maps.Marker`表示地图上的点,`google.maps.InfoWindow`用来显示弹出信息。 此外,地理编码和反向地理编码可以...

    google map jsv3 示例

    标记可以通过事件监听器实现交互,如点击弹出信息窗口。 4. **信息窗口(InfoWindow)**:信息窗口通常与标记关联,用于展示更详细的信息。使用`new google.maps.InfoWindow()`创建信息窗口对象,设置内容和触发...

    Map谷歌地图下载器

    第二步 建立下载任务 框选后点击【下载视图】(很多用户忽略这一步,再强调一次,先框选,再点击下面的下载视图)切换到下载界面并弹出新建任务框,输入任务名称、下载类别、地图级别及存储路径。 任务名称:可以...

    google-map.rar_google map

    3. **信息窗口(Info Windows)**:当用户点击标注时显示的弹出框,可以包含额外的信息。 4. **路径规划**(Directions Service):计算两点或多点之间的最佳路线,包括交通情况和步行、驾车等多种模式。 5. **覆盖...

    Google map

    例如,一个旅游应用可以使用标记展示各个景点,点击标记后弹出详细介绍。 使用Google地图API进行标记操作,你需要进行以下步骤: 1. 获取API密钥:首先,你需要在Google Cloud Console中创建一个项目,并启用Google...

    google map 定位搜索

    5. **信息框弹出**:当用户点击搜索结果在地图上产生的“气泡”(即标记)时,通常会出现一个信息框,显示更详细的信息。开发者需要配置事件监听器,捕捉到点击事件,并调用API显示相关信息。 6. **集成过程**:...

    Google MAP 学习例程

    2. **事件监听**: 可以为标记添加点击事件监听器,当用户点击标记时触发特定的操作,如弹出信息窗口。 3. **动态更新**: 标记的位置、图标和标题都可以动态更新,以反映实时数据。 **三、路径和线路(Polylines & ...

    Google Map API基本源码

    通过`google.maps.InfoWindow`,可以在标记上显示弹出式信息,包括文字、图片等。 7. **地图类型**: API支持多种地图类型,如道路图、卫星图、地形图等,可以通过设置`mapTypeId`属性切换。 8. **事件监听**: ...

    flex实现googelMap

    通过监听这些事件,开发者可以实现更复杂的交互功能,如点击标记弹出信息窗口,或者响应用户拖动地图时更新其他UI元素。 博客链接中提到的内容可能会详细解释如何配置项目、获取API密钥、以及如何使用Google Maps...

Global site tag (gtag.js) - Google Analytics