彰化一整天的論壇

 找回密碼
 立即註冊
查看: 769|回復: 0

google map v3.0 顯示多個自訂地標

[複製鏈接]
發表於 2016-1-3 20:37:21 | 顯示全部樓層 |閱讀模式
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  5.     <meta charset="utf-8">
  6.     <title>Using closures in event listeners</title>
  7.     <style>
  8.       html, body {
  9.         height: 100%;
  10.         margin: 0;
  11.         padding: 0;
  12.       }
  13.       #map {
  14.         height: 100%;
  15.       }
  16.     </style>
  17.   </head>
  18.   <body>
  19.     <div id="map"></div>
  20.     <script>
  21. function initMap() {
  22.   var map = new google.maps.Map(document.getElementById('map'), {
  23.     zoom: 4,
  24.     center: {lat: -25.363882, lng: 131.044922 }
  25.   });

  26.   var bounds = {
  27.     north: -25.363882,
  28.     south: -31.203405,
  29.     east: 131.044922,
  30.     west: 125.244141
  31.   };

  32.   // Display the area between the location southWest and northEast.
  33.   map.fitBounds(bounds);

  34.   // Add 5 markers to map at random locations.
  35.   // For each of these markers, give them a title with their index, and when
  36.   // they are clicked they should open an infowindow with text from a secret
  37.   // message.
  38.   var secretMessages = ['This', 'is', 'the', 'secret', 'message'];
  39.   var lngSpan = bounds.east - bounds.west;
  40.   var latSpan = bounds.north - bounds.south;
  41.   for (var i = 0; i < secretMessages.length; ++i) {
  42.     var marker = new google.maps.Marker({
  43.       position: {
  44.         lat: bounds.south + latSpan * Math.random(),
  45.         lng: bounds.west + lngSpan * Math.random()
  46.       },
  47.       map: map
  48.     });
  49.     attachSecretMessage(marker, secretMessages[i]);
  50.   }
  51. }

  52. // Attaches an info window to a marker with the provided message. When the
  53. // marker is clicked, the info window will open with the secret message.
  54. function attachSecretMessage(marker, secretMessage) {
  55.   var infowindow = new google.maps.InfoWindow({
  56.     content: secretMessage
  57.   });

  58.   marker.addListener('click', function() {
  59.     infowindow.open(marker.get('map'), marker);
  60.   });
  61. }

  62.     </script>
  63.     <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&signed_in=true" async defer>
  64.     </script>
  65.   </body>
複製代碼
資料來源: https://developers.google.com/ma ... mples/event-closure
回復

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 立即註冊

本版積分規則

 ㄚ母滴雞湯
 員林香純滴雞精

Archiver|手機版|小黑屋|彰化一整天的論壇(Excel,Office)  |网站地图

GMT+8, 2019-8-24 14:54 , Processed in 0.129478 second(s), 21 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表