`
osacar
  • 浏览: 211566 次
  • 性别: 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 v3 (3.16.2) 离线开发包

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

    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 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