`
wyf
  • 浏览: 435648 次
  • 性别: Icon_minigender_1
  • 来自: 唐山
社区版块
存档分类
最新评论

googlemap多Marker 多infowindow

    博客分类:
  • JS
 
阅读更多

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);
  });
}
http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/examples/event-closure.html
 
分享到:
评论

相关推荐

    Google Map API 使用示例

    infowindow.open(map, marker); }); ``` 在实际开发中,可能还需要考虑性能优化,例如使用分块加载地图(Clustering)处理大量数据点,以及根据用户行为动态加载或隐藏地图元素。 通过学习和实践这些示例,你可以...

    google map api开发源代码

    2. **标记(Marker)与信息窗口(InfoWindow)**:通过创建Marker对象可以在地图上添加图标,表示特定的位置。InfoWindow则用于展示与标记相关的详细信息,如地点名称、地址等,用户点击标记时可以弹出。 3. **路径...

    android GoogleMap定位(四)

    总之,Android中的GoogleMap定位涉及多个步骤,包括引入依赖、配置权限、初始化地图、开启定位服务、获取和处理位置信息,以及可能的自定义功能扩展。开发者可以根据需求灵活运用这些知识点,构建丰富的地图应用功能...

    谷歌地图Google Map API V3中文开发文档

    Marker 是谷歌地图 Google Map API V3 中的一个重要组件,用于在地图上标记一个特定的位置。开发者可以使用 Marker 对象来创建一个新的标记,该对象提供了多种方法和属性,以便开发者可以自定义标记的样式和行为。 ...

    google map api学习

    infowindow.open(map, marker); }); ``` 路径(Polylines)和多边形(Polygons)则用于绘制线和区域。例如,你可以使用它们来绘制行驶路线或者地理区域。 地理编码(Geocoding)服务是谷歌地图API的一个强大功能,...

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

    infowindow.open(map, marker); }); ``` 6. **路径(Polyline)与多边形(Polygon)**:可以绘制线段和多边形,常用于表示路线或区域。 ```javascript var path = [ {lat: -37.805, lng: 144.963}, {lat: -37.813...

    google map实例

    infowindow.open(map, marker); }); ``` 以上就是关于“google map实例”的JavaScript实现。通过这些基础知识,你可以开始创建自己的地图应用,并根据需求进行扩展和定制。Google Maps API的强大之处在于其灵活性和...

    基于Google Map的公共气象服务信息显示平台研究.pdf

    Google Map API的主要对象包括Map、Marker、LatLng、InfoWindow等,开发者可以通过这些对象来实现地理信息的获取、显示和交互。 二、公共气象服务信息显示平台架构 基于Google Map的公共气象服务信息显示平台架构...

    GoogleMap Api二次开发+Asp.Net+数据库+GPS

    在GoogleMap API中,我们可能创建了特殊的标记(Marker)或信息窗口(InfoWindow),以显示特定的内容,如GPS点的详细信息。 总结起来,这个项目展示了如何将GoogleMap API与Asp.Net、数据库和GPS技术相结合,构建...

    GoogleMap 中文API + 示例

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

    googlemap 地图功能

    infowindow.open(map, marker); }); ``` 点击标记时,会弹出显示“欢迎来到悉尼!”的信息窗口。 除此之外,API还支持路径规划、地理编码(将地址转换为坐标)、反向地理编码(将坐标转换为地址)、交通状况显示、...

    vue2googlemap基于Vue2x和google地图组件

    Vue2googlemap是一个专门为Vue 2.x框架设计的插件,它允许开发者在Vue应用中无缝集成Google Maps API。这个插件将Google Maps的强大功能与Vue的声明式渲染相结合,为开发者提供了更方便的方式来创建交互式的地图应用...

    google map api v3源码

    infowindow.open(map, marker); }); ``` 5. **地理编码服务**: 能够将地址转换为坐标,反之亦然,这对于定位和导航功能至关重要。 ```javascript var geocoder = new google.maps.Geocoder(); geocoder.geocode({...

    GoogleMap-InfoWindow-android

    在文件列表中的`GoogleMap-InfoWindow-android-master`可能包含了完整的示例代码,包括如何创建Marker、设置InfoWindow内容以及自定义样式。这个项目可能涵盖了上述所有步骤,你可以参考它的实现来学习和理解如何在...

    googlemap实例工程

    同时,还可以为标记添加信息窗口(InfoWindow),展示更多的信息。 4. **添加地图事件监听器** 为了增加交互性,我们可以添加事件监听器,比如点击地图时添加新的标记,或者当用户拖动地图时更新相关信息。这通常...

    Android_Google_Map.rar_Google api_android_android google map_and

    googleMap.setMapType(GoogleMap.MAP_TYPE_NORMAL); LatLng sydney = new LatLng(-34, 151); MarkerOptions markerOptions = new MarkerOptions().position(sydney).title("悉尼"); googleMap.addMarker...

    C#-googlemap

    总的来说,"C#-googlemap"项目涵盖了C#与Google Maps API的集成,涉及网络请求、JSON解析、地图展示、地理编码等多个方面。通过学习这个实例,开发者可以掌握如何在C#环境中构建功能丰富的地图应用。

    Google map 开发实例

    infowindow.open(map, marker); }); ``` 六、路径与地理编码 你可以使用`google.maps.Polyline`类绘制路径,`google.maps.Geocoder`服务进行地址到坐标(地理编码)或坐标到地址(反向地理编码)的转换。 七、...

    Google MAP 学习例程

    1. **创建标记**: 使用`google.maps.Marker()`创建标记对象,可以指定标记的位置、图标、信息窗口等。 2. **事件监听**: 可以为标记添加点击事件监听器,当用户点击标记时触发特定的操作,如弹出信息窗口。 3. **...

    Google Map API基本源码

    Google Map API是一个强大的工具,它允许开发者在网页或应用程序中集成地图功能,提供导航、定位、地理编码等服务。这个“Google Map API基本源码”很可能是为了帮助初学者理解和应用这一API而准备的示例代码集合。...

Global site tag (gtag.js) - Google Analytics