如何在javascript中更改数组对象的值属性（关于谷歌地图）？

Question

您好，我在Google Maps v 3.20 中有一个标记：

var markers= [];

    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        icon: image,
        info: '<span>Data: <b>'+orario+'</b><br>',
        zIndex: milliseconds //is a time stamp
    }); 
    markers.push(marker);

我必须更改info 的值并将变量orario 替换为其他...

我不知道喜欢这样做...

console.log(markers) 我的标记是这样的：

__e3_: Object { click: {…} }
__gm: Object { set: {…}, Jd: {…}, Nb: {…} }
anchorPoint: Object { x: -3, y: -6, b: true }
changed: function HU/this.m()
clickable: true
closure_uid_131918504: 4
gm_accessors_: Object { position: null, map: null, icon: null, … }
gm_bindings_: Object { position: {}, map: {}, icon: {}, … }
icon: Object { url: "file:///C:/Users/amministratore/Desktop/terr/1.png", size: {…}, origin: {…}, … }
info: "<span>Data: <b>2017-12-15  12:54:22  UTC</b><br>"
internalPosition: Object { lat: _.F/this.lat(), lng: _.F/this.lng() }
map: {…}
W: undefined
__e3_: Object { resize: {…}, center_changed: {}, zoom_changed: {…}, … }
__gm: Object { R: div#map_canvas, b: {…}, B: {…}, … }
center: Object { lat: _.F/this.lat(), lng: _.F/this.lng() }
controls: Array [ <1 empty slot>, {…}, {…}, … ]
data: Object { gm_accessors_: {…}, map: {…}, j: false, … }
features: Object {  }
gm_accessors_: Object { zoom: null, center: null, mapTypeId: null, … }
gm_bindings_: Object { reportErrorControl: […], zoom: {…}, center: {…}, … }
mapDataProviders: "Map data ©2017 Google, INEGI"
mapTypeControl: true
mapTypeId: "roadmap"
mapTypes: Object { gm_accessors_: {…}, roadmap: {…}, gm_bindings_: {…}, … }
mapUrl: "https://maps.google.com/maps?ll=0,0&z=3&t=m&hl=en-US&gl=USapclient=apiv3"
overlayMapTypes: Object { b: [], gm_accessors_: {…}, length: 0, … }
streetView: Object { j: false, m: false, standAlone: false, … }
styles: Array [ {…}, {…}, {…} ]
tilt: 0
tosUrl: "https://www.google.com/intl/en-US_US/help/terms_maps.html"
zoom: 3
zoomControl: true
__proto__: Object { constructor: tg(),  streetView_changed:_.k.streetView_changed(), getDiv: _.k.getDiv(), … }
position: Object { lat: _.F/this.lat(), lng: _.F/this.lng() }
visible: true
zIndex: 1513342462000
__proto__: Object { constructor: _.Le(), map_changed:   _.Le.prototype.map_changed(), getMap: _.od/<(), … }

但我不知道info 的索引（及其值）。

所以console.log(Object.getOwnPropertyDescriptor(markers[0],'info') 返回该信息元素是这样的：

configurable: true
enumerable: true
value: "<span>Data: <b>2017-12-15  12:54:22  UTC</b><br>"
writable: true
__proto__: Object { … }

如果我打印markers[9][2]return 未定义

Answer 1

由于每个新的 Google Maps Javascript API Marker 都被推入 'markers array'，因此您需要使用循环遍历每个数组值，然后设置其 'info property' 到一个新值 (orario)。

为了更好的理解，你可以看看下面的示例代码：

  function loopThruMarkers() {

    var orario = 'sample data-'; 
    for ( var i = 0; i < markers.length; i++ ) {
      markers[i].info = '<span>'+ orario+i +'</span>';
      console.log(markers[i].info);
    }
  }

下面的示例演示。您可以查看日志以查看新值 ma​​rker.info。

      // This example requires the Places library. Include the libraries=places
      // parameter when you first load the API. For example:
      // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

      var map;
      var infowindow;
      var markers = [];

      function initMap() {
        var pyrmont = {lat: -33.867, lng: 151.195};

        map = new google.maps.Map(document.getElementById('map'), {
          center: pyrmont,
          zoom: 15
        });

        infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map);
        service.nearbySearch({
          location: pyrmont,
          radius: 500,
          type: ['store']
        }, callback);
      }

      function callback(results, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
          for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
          }
          loopThruMarkers();
        }
      }
      
      function loopThruMarkers() {
        
        var orario = 'sample data-';
        
        for ( var i = 0; i < markers.length; i++ ) {
          markers[i].info = '<span>'+ orario+i +'</span>';
          console.log(markers[i].info);
        }
      }

      function createMarker(place) {
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker({
          map: map,
          position: place.geometry.location,
          info: 'sample info'
        });
        markers.push(marker);
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent(place.name);
          infowindow.open(map, this);
        });
      }

      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzjs-bUR6iIl8yGLr60p6-zbdFtRpuXTQ&libraries=places&callback=initMap" async defer></script>

希望它可以帮助并快乐编码！