如何傾聽對象的屬性更改？

-1

我是新來的谷歌地圖api和js一般。
我有一個具有2個圓形對象的項目，它們可以改變半徑和中心座標，每當其中一個屬性改變時，我想執行一個特定的功能。
圓的半徑隨着控制器按下（setradius方法）而變化，圓也是可拖動的。我不想在用戶拖動圓圈時每幀執行一次函數（如果屬性沒有改變，只在0.1秒後檢查，然後才執行）。
希望我沒有把它搞得太複雜。如何傾聽對象的屬性更改？

TL; DR：如何在每次圓形屬性發生變化時執行函數？

來源

2014-12-13 artembus

既然你提到「控制器」，你使用的是什麼框架的客戶端？而且，你可以向你的問題添加一些改變半徑的代碼的例子嗎？ – jfriend00 2014-12-13 19:09:18

對於控制器，我使用google地圖中的控制器選項構建，從這裏獲得了參考（https://developers.google.com/maps/documentation/javascript/examples/control-custom-state）。我用一個簡單的函數來改變半徑，如下所示：function（circle）{circle.setRadius（circle.getRadius（）* 1.1};這個函數使給定的圓大10％ – artembus 2014-12-13 20:34:53

如果你總是改變同一組函數，然後創建一個名爲'updateRadius（）'的新函數，並在改變半徑的函數中調用它。 – jfriend00 2014-12-13 20:55:57

Google Maps JavaScript API v3是基於事件的。 A google.maps.Circle的任何屬性發生更改時都會觸發事件。將一個事件偵聽器添加到您的圈子以偵聽radius_changed事件。

cityCircle = new google.maps.Circle(populationOptions); 
    google.maps.event.addListener(cityCircle, 'radius_changed', radiusChanged);

工作的代碼片段基礎上example in the documentation：

// This example creates circles on the map, representing 
 
// populations in North America. 
 

 
// First, create an object containing LatLng and population for each city. 
 
var citymap = {}; 
 
citymap['chicago'] = { 
 
    center: new google.maps.LatLng(41.878113, -87.629798), 
 
    population: 2714856 
 
}; 
 
citymap['newyork'] = { 
 
    center: new google.maps.LatLng(40.714352, -74.005973), 
 
    population: 8405837 
 
}; 
 
citymap['losangeles'] = { 
 
    center: new google.maps.LatLng(34.052234, -118.243684), 
 
    population: 3857799 
 
}; 
 
citymap['vancouver'] = { 
 
    center: new google.maps.LatLng(49.25, -123.1), 
 
    population: 603502 
 
}; 
 

 
var cityCircle; 
 

 
function radiusChanged() { 
 
    document.getElementById('info').innerHTML = "<b>" + this.title + "</b><br>radius=" + this.radius.toFixed(2) + " km"; 
 
}; 
 

 
function initialize() { 
 
    // Create the map. 
 
    var mapOptions = { 
 
    zoom: 4, 
 
    center: new google.maps.LatLng(37.09024, -95.712891), 
 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById('map-canvas'), 
 
    mapOptions); 
 

 
    // Construct the circle for each value in citymap. 
 
    // Note: We scale the area of the circle based on the population. 
 
    for (var city in citymap) { 
 
    var populationOptions = { 
 
     strokeColor: '#FF0000', 
 
     strokeOpacity: 0.8, 
 
     strokeWeight: 2, 
 
     fillColor: '#FF0000', 
 
     fillOpacity: 0.35, 
 
     editable: true, 
 
     draggable: true, 
 
     title: city, 
 
     map: map, 
 
     center: citymap[city].center, 
 
     radius: Math.sqrt(citymap[city].population) * 100 
 
    }; 
 
    // Add the circle for this city to the map. 
 
    cityCircle = new google.maps.Circle(populationOptions); 
 
    google.maps.event.addListener(cityCircle, 'radius_changed', radiusChanged); 
 
    } 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map-canvas { 
 
    height: 500px; 
 
    width: 500px; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="info"></div> 
 
<div id="map-canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>

來源

2014-12-13 21:18:37 geocodezip

如何傾聽對象的屬性更改？

回答

相關問題