`
cx1899
  • 浏览: 23128 次
社区版块
存档分类
最新评论

google map 多 Marker 多个InfoWindow event

阅读更多

参考http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/events.html#EventArguments

Using Closures in Event Listeners
在事件侦听器中使用闭包

When executing an event listener, it is often advantageous to have both private and persistent data attached to an object. JavaScript does not support "private" instance data, but it does support closures which allows inner functions to access outer variables. Closures are useful within event listeners to access variables not normally attached to the objects on which events occur.

在执行事件侦听器时,通常可取的做法是将私有数据和持久性数据附加到对象中。JavaScript 不支持“私有”实例数据,但它支持允许内部函数访问外部变量的闭包。在事件侦听器访问通常不附加到发生事件的对象的变量时,闭包非常有用。

The following example uses a function closure in the event listener to assign a secret message to a set of markers. Clicking on each marker will review a portion of the secret message, which is not contained within the marker itself.

下例在事件侦听器中使用函数闭包将加密消息分配给一组标记。点击每个标记都可以看到加密消息的一部分,该消息并未包含在标记自身内。

var map; //全局变量
function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementByIdx_x_x("map_canvas"), myOptions);

  // Add 5 markers to the map at random locations
  var southWest = new google.maps.LatLng(-31.203405,125.244141);
  var northEast = new google.maps.LatLng(-25.363882,131.044922);
  var bounds = new google.maps.LatLngBounds(southWest,northEast);
  map.fitBounds(bounds);
  var lngSpan = northEast.lng() - southWest.lng();
  var latSpan = northEast.lat() - southWest.lat();
  for (var i = 0; i < 5; i++) {
    var location = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
        southWest.lng() + lngSpan * Math.random());
    var marker = new google.maps.Marker({
        position: location,
        map: map
    });
    var j = i + 1;
    marker.setTitle(j.toString());
    attachSecretMessage(marker, i);//所以这里传值就不用传map值了
  }
}

// The five markers show a secret message when clicked
// but that message is not within the marker's instance data

function attachSecretMessage(marker, number) {
  var message = ["This","is","the","secret","message"];
  var infowindow = new google.maps.InfoWindow(
      { content: message[number],
        size: new google.maps.Size(50,50)
      });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}
View example (event-closure.html)

刚开始写的时候写到一块去了,没有用函数功能,不过目前也不太明白为什么?
而且没有传map的值,后来才发现原来例子里map是全局变量,而我是局部变量。
为什么不能在一起写的原因是,marker它会认为是一个图标,所以总是显示最后一个的,而不是对应的每一个。
原文地址:http://blog.csdn.net/linxinyuluo/article/details/6754679
分享到:
评论

相关推荐

    高德地图自定义infowindow

    `Infowindow`是地图上的一个浮动视图,通常在点击地图上的标记(Marker)或者覆盖物时显示,用于显示更详细的相关信息。下面我们将深入探讨如何实现高德地图的自定义`Infowindow`功能。 首先,了解`Infowindow`的...

    Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码

    在使用Google Maps V3 API开发地图应用时,有时我们需要在地图上的标记(Marker)上添加信息窗口(Infowindow),并在这个窗口内嵌入自定义的HTML内容,可能包括按钮或其他交互元素。然而,直接在Infowindow内的元素上...

    Google Map api V3 (3.9.12)的离线开发包

    Google Map API V3(3.9.12)是谷歌提供的一个用于在网页上嵌入交互式地图的服务,它是Google Maps JavaScript API的第三个主要版本。这个离线开发包允许开发者在没有网络连接的情况下进行地图应用的开发和测试,这...

    google map api v3源码

    由于这个压缩包名为"WebMap",里面可能包含了一个简单的web应用,展示如何使用谷歌地图API V3来创建一个网页地图。开发者可以通过分析和学习这个源码,了解上述知识点的实际应用,并进一步扩展自己的地图应用开发...

    高德地图-标记点点击弹出气泡

    在实际项目中,你可能需要根据需求调整气泡的内容、样式,或者处理多个marker的交互逻辑。高德地图API提供了许多高级功能,如自定义标记图标、拖动事件、热力图等,可以根据项目需要进行深入探索和应用。 在...

    GoogleMap 中文API + 示例

    GoogleMap API还提供了很多其他服务,如地址解析(Geocoding)将地址转换为经纬度,路线规划(Directions)计算两点间的最优路径,海拔查询(Elevation)获取指定位置的海拔信息等。 **示例资源** - `googlelinli....

    Google map 谷歌地图 Google地图 V3 第三版

    google.maps.event.addListener(map, 'zoom_changed', function() { console.log('Zoom level changed to: ' + map.getZoom()); }); ``` **服务(Services)** 除了上述功能,Google Maps API V3还提供了路线规划...

    GoogleMap点击地图可以显示城市市区街道门牌号,经纬度等信息。

    import { GoogleMap, Marker, InfoWindow } from 'react-google-maps'; const MapComponent = () =&gt; { const apiKey = 'YOUR_API_KEY'; const defaultCenter = { lat: 35.678, lng: 139.767 }; // 日本经纬度 ...

    googlemap实例工程

    Google Map API 是 Google 提供的一个强大工具,允许开发者在自己的网站或应用中集成地图功能。本实例工程是专为初学者设计的,旨在通过实际操作来帮助学习者快速掌握 Google Map API 的基本用法。在深入探讨之前,...

    google map实例

    这个"google map实例"是一个使用JavaScript编程语言,结合Google Maps API创建的应用示例。下面将详细介绍这个实例涉及的关键知识点。 首先,JavaScript是Web开发中的主要脚本语言,它允许在浏览器端动态地更新内容...

    Google_Map_Api_谷歌地图接口整理.rar

    这个压缩包“Google_Map_Api_谷歌地图接口整理.rar”包含了一个详细的文档“Google_Map_Api_谷歌地图接口整理.doc”,很可能是关于如何使用谷歌地图API的教程或参考指南。下面,我们将深入探讨谷歌地图API的关键知识...

    VS2008 WinForm类型的GoogleMap二次开发

    Google Maps API提供了一个`google.maps.Marker`对象用于此目的。在C#中,我们可以通过与WebBrowser控件的`Document`对象交互,执行JavaScript代码来创建和定位标记。 ```csharp private void AddMarker(double lat...

    google map jsv3 示例

    3. **标记(Marker)**:要在地图上添加点标记,可以使用`new google.maps.Marker()`创建一个标记对象,设置其位置、图标、信息窗口等内容。标记可以通过事件监听器实现交互,如点击弹出信息窗口。 4. **信息窗口...

    android传感器的应用 Google_Map个人反向识别

    你可以通过改变Marker的图标或者InfoWindow的位置来实现这一效果。 ```java LatLng currentLocation = ...; // 获取当前地图位置 LatLng directionToFace = new LatLng(currentLocation.latitude, currentLocation....

    google map api v3 ExtDraggableObject

    google.maps.event.addListener(marker, 'dragstart', function() { console.log('开始拖动'); }); google.maps.event.addListener(marker, 'drag', function() { console.log('正在拖动'); }); google.maps....

    Google_map_JavaScript_API_V3

    google.maps.event.addListener(map, 'zoom_changed', function() { console.log('Zoom level changed to: ' + map.getZoom()); }); ``` 8. **地图类型(Map Types)** API支持多种地图类型,包括卫星图、地形...

    GoogleMap V3 中文 教程

    Google Map V3是Google Maps API的一个重要版本,主要针对Web开发,提供了一整套用于在网页中集成地图、定位、路线规划等功能的工具。这个中文教程可以帮助开发者理解和运用V3版本的API,即便在无法访问互联网的情况...

    google-Map-API.rar_javascript

    在"google Map API入门"这个压缩包中,很可能是包含了一系列的示例代码和教程,帮助初学者逐步理解和掌握如何使用JavaScript调用Google Maps API。通过实践这些示例,开发者可以快速上手,为自己的项目增添丰富的...

    googleMap V3 中文API

    - 使用`google.maps.event.addDomListener`或`google.maps.event.addListener`来响应地图、标记或其他元素上的用户交互,如点击、鼠标移动等。 8. **路径规划**: - `google.maps.DirectionsService`和`google....

    基于Google Map的API网页实例

    【基于Google Map的API网页实例】是一个利用Google Maps API创建的互动地图应用。这个实例展示了如何将谷歌地图集成到网页中,为用户提供直观的地理位置展示和丰富的交互功能。Google Maps API是Google提供的一套...

Global site tag (gtag.js) - Google Analytics