如何在javascript中更改数组对象(关于谷歌地图)的值属性?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在javascript中更改数组对象(关于谷歌地图)的值属性?相关的知识,希望对你有一定的参考价值。
你好,我在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 undefined
答案
由于每个新的Google Maps Javascript API Marker都被推入'markers array',你需要使用循环遍历每个数组值,然后将其'info属性'设置为新值(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);
}
}
下面的示例演示。您可以检查日志以查看新值marker.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>
以上是关于如何在javascript中更改数组对象(关于谷歌地图)的值属性?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 JavaScript 或 jQuery 更改数组内的对象的值?
从 javascript 到 activex 对象的关联数组
如何使用 JavaScript spread... 语法更改对象的一个字段,该字段属于数组并通过名称-值对访问?