`
osacar
  • 浏览: 212524 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Google Maps API指南:添加多个随机标注

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

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

<!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: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="https://maps.google.com/maps/api/js?sensor=false">
</script>
<script>
var map;
function initialize() {
  var myLatlng = new google.maps.LatLng(22.279566,113.540955);
  var myOptions = {
    zoom: 14,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

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

  // Add 5 markers to the map at random locations
  var southWest = new google.maps.LatLng(20.279566,112.540955);
  var northEast = new google.maps.LatLng(22.279566,113.540955);
  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);
  }
}

// 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);
  });
}
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
分享到:
评论

相关推荐

    Google Maps API编程资源大全

    这个"Google Maps API编程资源大全"包含了丰富的资料,帮助开发者深入理解和使用这一技术。 首先,我们要理解什么是API(Application Programming Interface)。API是一组预定义的函数、类、对象和协议,用于构建...

    Google API开发详解:Google Maps部分

    本文将深入探讨Google Maps API的开发详解,帮助你掌握如何利用这个强大的工具创建丰富的地图应用。 Google Maps API允许开发者在自己的网站上嵌入交互式地图,提供定位、导航、路线规划等功能。它主要由JavaScript...

    图书Google Maps API开发大全的各章源码

    3. **控件**:API支持添加自定义或预定义的控件,如缩放控件、地图类型切换控件等,这些控件能提升用户体验,使用户更容易操作地图。 4. **叠加层**:叠加层允许开发者在地图上展示非标准的图层,如天气图层、交通...

    Google Maps API开发大全

    《Google Maps API开发...总结,Google Maps API开发涵盖了地图显示、定位服务、路径规划等多个方面,为开发者提供了丰富的功能和无限的创新可能。通过深入学习和实践,开发者可以构建出满足各种需求的地理位置应用。

    Google Maps API.pdf

    这段代码展示了如何随机生成多个标记并添加到地图上。 通过这些示例,我们可以看到 Google Maps API 如何帮助开发者快速构建功能丰富的地图应用。无论是对于初学者还是有经验的开发者来说,掌握这些基本和高级功能...

    Google Maps API开发大全code

    通过学习并实践这个“开发大全code”,你将能够创建出功能丰富的地图应用,无论是在旅游、导航、房地产、物流还是其他领域,Google Maps API都能成为强大的工具。记得在开发过程中遵循Google的开发指南,保持代码...

    获取Google Maps APIKey

    在 Android 开发中,获取 Google Maps API Key 是一个重要的步骤,特别是对于初学者来说。下面将详细介绍如何获取 Google Maps API Key。 获取证书指纹(SHA1) 在获取 Google Maps API Key 之前,需要获取证书...

    Google_Maps_API_V3.rar_Google Maps api v3_谷歌地图

    4. **路径规划(Directions Service)**:API提供了一种方法来计算两个或多点之间的最佳路线,包括驾车、步行和公共交通等模式。 5. **地理编码(Geocoding)**:将地址转换为经纬度坐标,反之亦然,这对于搜索和...

    Google API开发详解:Google Maps与Google Earth双剑合璧(第2版).part3

    本书从易到难、由浅入深、循序渐进地介绍了Google Maps API和Google Earth API的开发技术。本书知识讲解通俗易懂,并有大量的实例供读者更加深刻地巩固所学习的知识,帮助读者更好地进行开发实践。  本书共分为18...

    Google Maps API 开发大全

    《Google Maps API 开发大全》是一本全面深入探讨Google Maps API技术的专著,旨在帮助开发者充分利用这个强大的工具集来创建交互式地图应用。书中详细介绍了如何集成Google Maps API到各种项目中,从基础概念到高级...

    Google API开发详解:Google Maps与Google Earth双剑合璧(第2版).part1

    本书从易到难、由浅入深、循序渐进地介绍了Google Maps API和Google Earth API的开发技术。本书知识讲解通俗易懂,并有大量的实例供读者更加深刻地巩固所学习的知识,帮助读者更好地进行开发实践。  本书共分为18...

    Google Maps API V3 中文参考文档(JavaScript)

    Google Maps API V3 中文参考文档(JavaScript) Google Maps API V3 是 Google Maps 提供的一款强大的地图应用程序接口,允许开发者在网站或应用程序中轻松嵌入谷歌地图。该 API 的 JavaScript 版本提供了丰富的...

    Google Maps API v3 (3.16.2) 离线开发包

    6. **地理编码和标记**:API还提供了地理编码服务,将地址转换为坐标,以及添加标记和信息窗口的功能。开发者可以利用这些特性来定位用户位置、创建兴趣点或展示路线。 7. **事件监听和交互**:Google Maps API允许...

    Google Maps API Android and Javascript Demo

    Google Maps API android demo Eciplse project source code and javacript version Google Maps API and Place Search example html.

    Google+Maps+API开发大全

    这个API分为多个部分,包括JavaScript API、Static Maps API、Directions API、Geocoding API、Elevation API、Places API等。 1. JavaScript API:这是最常用的部分,它允许动态交互式地图的创建。开发者可以通过...

    《程序天下Google API开发详解:Google Maps与Google Earth双剑合璧》源代码

    《程序天下Google API开发详解:Google Maps与Google Earth双剑合璧》这本书深入探讨了如何利用Google提供的API来开发地图和地球应用。源代码部分主要关注Google Maps API,这是一个强大的工具,允许开发者在网页上...

    java实现google maps api

    Java 实现 Google Maps API 是一个将谷歌地图服务集成到Java应用程序中的过程,它允许开发者利用谷歌地图的强大功能,如定位、路线规划、地理编码、覆盖图层等。本篇文章将深入探讨如何通过Java来调用Google Maps ...

    Google+Maps+API编程资源大全

    在当今的互联网世界中,Google Maps API是一个极其重要的工具,它为开发者提供了在自己的应用程序中集成地图、导航、定位等地理信息服务的能力。本资源大全旨在帮助开发者深入理解和高效利用Google Maps API,打造...

    google maps api 开发大全

    1. **谷歌地图API基础**:谷歌地图API是Google提供的一个强大的工具,允许开发者在网页或移动应用中集成地图功能。它提供了JavaScript和RESTful两种接口,支持动态加载地图、定位、标记、信息窗口、路径绘制等多种...

Global site tag (gtag.js) - Google Analytics