2017-07-03 65 views
0

我有問題在m谷歌地圖動態地圖內的標記上實施地址可視化。添加有關谷歌地圖地址的信息

我的代碼如下:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Marker Clustering</title> 
    <style> 
     /* Always set the map height explicitly to define the size of the div 
     * element that contains the map. */ 
     #map { 
     height: 100%; 
     } 
     /* Optional: Makes the sample page fill the window. */ 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="map"></div> 
    <script> 

     function initMap() { 

     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 5, 
      center: {lat: 44.0, lng: 12.0} 
     }); 

     // Create an array of alphabetical characters used to label the markers. 
     var labels = ''; 

     // Add some markers to the map. 
     // Note: The code uses the JavaScript Array.prototype.map() method to 
     // create an array of markers based on a given "locations" array. 
     // The map() method here has nothing to do with the Google Maps API. 
     var markers = locations.map(function(location, i) { 
      return new google.maps.Marker({ 
      position: location, 
      label: labels[i % labels.length] 
      }); 
     }); 
     // Add a marker clusterer to manage the markers. 
     var markerCluster = new MarkerClusterer(map, markers, 
      {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
     } 

     var locations = [ 
     {lat: 44.5153, lng: 11.3428}, 
{lat: 44.4926, lng: 11.3657}, 
{lat: 44.4948, lng: 11.3158} 
//input geocode continue 
     ] 
    </script> 
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"> 
    </script> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=initMap"> 
    </script> 
    </body> 
</html> 

我想對每個標記點擊彈出信息添加,但我不能設法做到這一點,我已經搜查了很多,但I'ven't找到任何工作方案。

有人可以幫助我嗎?

+0

我需要的信息主要是這樣的: 地址公民號碼,城市 – RevivedPicard

+0

嘗試使用信息窗口和谷歌地方的API。 – KingCoder11

+0

我已經嘗試建議在這裏的其他職位上,但無法設法得到它的工作...提供我的代碼的功能示例請 – RevivedPicard

回答

-2

我已經編輯你的代碼,讓它與信息窗口工作

之前,初始化標記添加此行代碼

var infoWin = new google.maps.InfoWindow(); 

這將初始化信息窗口,現在修改標記初始化這個

var markers = locations.map(function(location, i) { 
      var marker = new google.maps.Marker({ 
       position: location, 
       label: labels[i % labels.length] 
      }); 

      //// here we are adding the event listner for the markers to open the info window on click 
      google.maps.event.addListener(marker, 'click', function(evt) { 
       infoWin.setContent(location.info); 
       infoWin.open(map, marker); 
      }) 
      return marker; 
     }); 

通知我們正在閱讀從位置陣列的信息,從而改變你的位置陣列包括第三參數「信息」這樣

var locations = [{ 
      lat: 44.5153, 
      lng: 11.3428, 
      info: 'place 1' 
     }, { 
      lat: 44.4926, 
      lng: 11.3657, 
      info: 'place2' 
     }, { 
      lat: 44.4948, 
      lng: 11.3158, 
      info: 'place 3' 
     } 
     //input geocode continue 
    ] 

希望這會有所幫助,它的工作將與我,請刪除下投票,因爲我已經編輯我的答案

+0

您的答案無法描述_why_。簡單地給某人編碼,並說「你走到這裏」並不能幫助那個人清楚他們做錯了什麼,它不會教他們任何東西,也很可能不會幫助未來的讀者。 – GrumpyCrouton

+0

謝謝,但它並沒有幫助...它修改了我的初始代碼太多,我需要在我發佈的代碼上實現信息窗口 – RevivedPicard

+0

我;我編輯了我的上面的代碼,請檢查它 –