ハンバーガーメニューからリストアイテムをクリックすると、Googleマップにマーカーを表示するには

-2

Googleマップで作業しています。メニューのアイテムにマーカーをリンクしたい名前をクリックすると、それぞれのマーカーのみが表示されます。しかし、私のコードはマップ内の最後のマーカだけを指しています。ハンバーガーメニューからリストアイテムをクリックすると、Googleマップにマーカーを表示するには

すべてのリンクが最後のマーカーを指しています。この問題を解決するのを手伝ってください。

<div class="menu"> 
    <div data-bind="foreach: visible"> 
     <p class="clicked" data-bind="text: location, click"></p> 
    </div> 
</div>

はJavaScript：

var bounds = new google.maps.LatLngBounds(); 

for (var i = 0; i < markersData.length; i++) { 

    var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng); 
    var loc = markersData[i].locationId; 
    var name = markersData[i].location; 

    $('.clicked').on('click', function() { 

     if ($('.clicked').location = name) { 
      console.log(location); 
      createMarker(latlng, loc); 

     } 
    });

私は、コードを変更したが、この1は、単一のリンクをクリックする上で一度にすべてのマーカーが表示されています。

function displayMarkers() { 

    var bounds = new google.maps.LatLngBounds(); 

    for (var i = 0; i < markersData.length; i++) { 

    var latlng = new google.maps.LatLng(markersData[i].lat,markersData[i].lng); 
     var loc = markersData[i].locationId; 
     var name = markersData[i].location; 

     checkLinkClicked(latlng, loc, name); 
     createMarker(latlng, loc); 

     bounds.extend(latlng); 
    } 

    map.fitBounds(bounds); 
} 

function checkLinkClicked(latlng, loc, name) { 

    $(’.clicked’).on(‘click’, function() { 

     if ((’.clicked’).location = name) { 
      createMarker(latlng, loc); 

     } 
    }); 
}

助けてください。

出典

2017-12-02 Venkata Rajesh Chunduri

こんにちはAaqib ...フォーマットしてくれてありがとう：

ここでは、同様のコードスニペットです。 –

可能な複製https://stackoverflow.com/questions/30439915/google-map-click-marker-by-external-link – MrUpsidown

https://stackoverflow.com/questions/32351008/open-infowindows-fromの可能な複製 - 外部リンク - 外部Googleマップの – MrUpsidown

この作業サンプルを確認してください。 http://jsbin.com/tayope/edit?html,js,output

これは、必要な機能をデモンストレーションする単なるデモです。レイアウト/デザインを無視します。

ここではサンプル項目はonClickイベントでメニューにあります：

<li><a href="#" onClick="showMarker(1)">Marker 1</a></li>

ユーザーがメニュー内の項目をクリックすると、それは基本的にマップ内の特定のマーカーが表示されます。

function showMarker(index) { 
    hideAllMarkers(); 
    markers[index - 1].setMap(map); 
}

インデックスを渡すことも、メニュー項目のデータ属性として追加することもできます。（フルスクリーンでそれを開こう）

var map; 
 
var coordinates = [ 
 
    { 
 
    lat: 14.534472, 
 
    lng: 121.052367 
 
    }, 
 
    { 
 
    lat: 14.532709, 
 
    lng: 121.05333 
 
    }, 
 
    { 
 
    lat: 14.533593, 
 
    lng: 121.053128 
 
    } 
 
] 
 
var markers = [] 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    center: {lat: 14.533593, lng: 121.053128}, 
 
    zoom: 15, 
 
    }); 
 
    
 
    for(var i = 0; i < coordinates.length; i++) { 
 
     var marker = new google.maps.Marker({ 
 
     position: coordinates[i], 
 
     map: map 
 
     }); 
 
     marker.setMap(null); 
 
     markers.push(marker); 
 
    } 
 
} 
 

 
function showMarker(index) { 
 
    hideAllMarkers(); 
 
    markers[index - 1].setMap(map); 
 
} 
 

 
function hideAllMarkers() { 
 
    for(var i = 0; i < markers.length; i++) { 
 
     markers[i].setMap(null); 
 
    } 
 
}

#map { 
 
    height: 500px !important; 
 
\t \t margin: auto; 
 
    background: gray; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>Markers</title> 
 
    </head> 
 
    <body> 
 
    <div> 
 
     <h3>Menu</h3> 
 
     <ul> 
 
     <li><a href="#" onClick="showMarker(1)">Marker 1</a></li> 
 
     <li><a href="#" onClick="showMarker(2)">Marker 2</a></li> 
 
     <li><a href="#" onClick="showMarker(3)">Marker 3</a></li> 
 
     </ul> 
 
    </div> 
 
    <div id="map"></div> 
 
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCKQX3cyZ7pVKmBwE8wiowivW9qH62AVk8" async defer></script> 
 
    </body> 
 
</html>

出典

2017-12-05 03:44:36

ハンバーガーメニューからリストアイテムをクリックすると、Googleマップにマーカーを表示するには

答えて

関連する問題