2017-05-09 46 views
0

我已經在角度2中添加了Google地圖API的JavaScript。 根據從API中提取的位置在地圖上添加了自定義標記。 我已經在UI上顯示了職位列表。點擊位置後,我想要替換該位置的相應標記圖標並重置所有其他圖標。 以下代碼未按預期工作。在谷歌地圖上更改標記Javascript

我加入這個功能放置在地圖上的標記:

placeMarkers(markers: any, infoWindowContent: any) { 
    // Display multiple markers on a map 
    let infoWindow = new google.maps.InfoWindow(); 
    let bounds = new google.maps.LatLngBounds(); 
    let marker; 

    // Loop through our array of markers & place each one on the map 
    for(let i = 0; i < markers.length; i++) { 
     let position = new google.maps.LatLng(<number>markers[i].lat, <number>markers[i].lang); 
     bounds.extend(position); 
     marker = new google.maps.Marker(<google.maps.MarkerOptions>{ 
     position, 
     map: this.map, 
     title: markers[i].name, 
     icon: this.iconUrl, 
     }); 

     // Allow each marker to have an info window 
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infoWindow.setContent(infoWindowContent[i]); 
      infoWindow.open(this.map, marker); 
     } 
     })(marker, i)); 

     // Automatically center the map fitting all markers on the screen 
     this.map.fitBounds(bounds); 
    } 
    } 

而這種代碼替換選定位置的標記:

selectSite(site: any, index: any) { 
    this.placeMarkers(this.finalMarkers, this.finalInfoWindowContent); 

    let selection = this.finalMarkers.find(function(item) { 
      return item.name == site.Name 
    }); 

    let infowindow = new google.maps.InfoWindow(); 
    let position = new google.maps.LatLng(<number>selection.lat, <number>selection.lang); 

    let redMarker = new google.maps.Marker(<google.maps.MarkerOptions>{ 
     position: position, 
     map: this.map, 
     title: selection.name, 
     icon: {url: require('../../../assets/img/red-marker.png'), scaledSize: {height: 30, width: 20}} 
    }); 
     redMarker.addListener('click', function() { 
     infowindow.setContent(selection.name); 
     infowindow.open(this.map, redMarker); 
    }); 
    } 

上面的代碼是最初工作正常,但之後卡住了多個位置變化。 任何幫助非常感謝!

回答

0
**You can Set Following marker** 

var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/'; 
     var icons = { 
      parking: { 
      icon: iconBase + 'parking_lot_maps.png' 
      }, 
      library: { 
      icon: iconBase + 'library_maps.png' 
      }, 
      info: { 
      icon: iconBase + 'info-i_maps.png' 
      } 
     }; 
+0

選擇一個站點後,我想重置所有其他站點並只更改選定的站點。 –