如何倾听对象的属性更改？

-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

如何倾听对象的属性更改？

回答

相关问题