2017-06-23 72 views
0

我怎樣才能設置文本,當我點擊從谷歌地圖圖標標記?谷歌地圖API文本onclick文本

的要求是:當我在一個圖標,點擊文本應顯示和我在其他點擊圖標只有被選中的圖標應該有文字

這裏是我的代碼:

<!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: 7, 
     center: {lat: 45.9356343, lng: 25.9017273} 
    }); 

    var markers = locations.map(function(location, i) { 
     return new google.maps.Marker({ 
     position: location, 
     icon: "/resources/service-points.png", 

     }); 
    }); 

    // 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.426049, lng: 26.047637}, 
    {lat: 44.428430, lng: 26.140104}, 
    {lat: 44.487002, lng: 26.078824}, 
    {lat: 44.431288, lng: 26.110165} 
    ] 
    </script> 
    <script 



src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"> 
</script> 
</body> 
</html> 

回答

0

你應該使用信息窗口對象從谷歌: * https://developers.google.com/maps/documentation/javascript/infowindows?hl=fr

的代碼看起來像這樣,創建對象,然後添加一個偵聽到您的標記,以便它可以啓動你的窗口的顯示:)

var infowindow = new google.maps.InfoWindow({ 
    content: contentString 
    }); 

    var marker = new google.maps.Marker({ 
    position: uluru, 
    map: map, 
    title: 'Uluru (Ayers Rock)' 
    }); 
    marker.addListener('click', function() { 
    infowindow.open(map, marker); 
    }); 
0

你可以使用一個信息窗口

var contentString = 'my text for this marker' 
var infowindow = new google.maps.InfoWindow({ 
     content: contentString 
    }); 

    var markers = locations.map(function(location, i) { 
     return new google.maps.Marker({ 
     position: location, 
     icon: "/resources/service-points.png", 
     title: 'my marker' 

     }); 
    }); 

    marker.addListener('click', function() { 
     infowindow.open(map, marker); 
    }); 

在這裏你可以找到一個谷歌的樣品https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

+0

如何集成這些代碼到我的位置嗎? – razvai

+0

標記的代碼與您擁有的代碼相同(只添加了標題,但可以刪除)..所以代碼應該放在回答標記和監聽器之前的內容strng和inforwindow之前。 – scaisEdge