Javascript 在选择选项AngularJS上居中显示谷歌地图

我正在尝试根据下拉选择选项框中的选择将地图居中。我已经尝试了几个例子，但我还没有让地图以新的纬度和经度坐标为中心

我希望使用现有的代码而不必从另一个示例开始

下面是我正在尝试的最新示例，其中包含了使用centerMap函数的代码

请帮忙。 谢谢

变量站点=[{ 姓名：ABC， 五位数：0.72， 气体：0， AccPerOpp:20.09， 自动转帐：0.44， WTR:100， 伊瑟：伯特·宾厄姆， 拉脱维亚：29.9792183， 液化天然气：-90.2226899999 }, { 名称：AJAX， 五位数：0.81， 气体：0， ACCPEROP:18.7， 自动转帐：0.13， WTR:100， 伊瑟：伯特·宾厄姆， lat:30.0032515， 液化天然气：-90.2206011999999 }, { 姓名:哥伦比亚广播公司， 五位数：0.8， 气体：0， ACCPEROP:16.99， 自动转帐：0.23， WTR:100， 伊瑟：宾·宾格尔， 拉脱维亚：43.9703011， 液化天然气：-90.082907999999 }, { 姓名：特纳， 五位数：0.78， 气体：0， ACCPEROP:17.68， 自动转帐：0.23， WTR:100， 伊瑟：宾·宾格尔， 拉脱维亚：43.004759， 液化天然气：-90.170532999999 }, ]; //角度应用程序模块和控制器

角度。模块'mapsApp'，[] .controller'MapCtrl'，函数$scope{ 变量映射选项={ 缩放：7， 中心：新google.maps.LatLng32.340803，-89.4855946， mapTypeId:google.maps.mapTypeId.ROADMAP } 变量映射选项1={ 缩放：9， 中心：新google.maps.LatLng31.3186154，-85.8286258， mapTypeId:google.maps.mapTypeId.ROADMAP } $scope.map=new google.maps.Mapdocument.getElementById'map'，mapOptions； 功能中心图{ 如果document.getElementByIdISEs.value=='Bert Bingle'{ $scope.map=new google.maps.Mapdocument.getElementById'map'，MapOptions 1； } } $scope.markers=[]； var infoWindow=new google.maps.infoWindow； /*变量图标={ url:image/store.svg，//url scaledSize:new google.maps.Size25,25，//缩放大小 origin:new google.maps.Point0,0，//origin 锚点：新的google.maps.Point0，0//anchor }; */ var createMarker=functioninfo{ var marker=new google.maps.marker{ map:$scope.map， 位置：新google.maps.LatLnginfo.lat，info.lng， 标题：info.name， 图标：{ 网址：http://maps.google.com/mapfiles/ms/icons/green-dot.png } }; marker.content=+info.ISE++ +气体：+info.GAs++ +自动支付：+info.AutoPay++ +accprop:$+info.accprop++ +五十加：+info.FiftyPlus++ +WTR:+info.WTR++ “”+info.address+”

” google.maps.event.addListenermarker“单击”功能{ infoWindow.setContent+marker.title++marker.content； 打开$scope.map，标记； }; $scope.markers.pushmarker； } 对于i=0；i您的代码中存在一些问题：

当您调用控制器的函数时，需要在控制器的作用域上定义它。因此，与其只声明函数

function centerMap() {

在控制器上声明它

$scope.centerMap = function () {

正如@georgeawg所说，您在select标记上有两个ng change指令，您可以这样组合它们：

ng-change="centerMap();filterMarkers();"

您正在检查if，它的值是Bert Bingle，但它从来不是这个值，因为选项Bert Bingle的属性值是Bing Bingl。此外，您应该检查范围而不是DOM，因此正确的检查是

if ($scope.data.singleSelect === 'Bing Bingle') {

最后，你不需要创建一个新的地图来改变地图的设置，这里有一个api

所以，与其打电话

$scope.map = new google.maps.Map(document.getElementById('map'),mapOptions1);

这边叫

$scope.map.setOptions(mapOptions1);

工作示例

---

不管怎样，为什么要检查DOM document.getElementByIdISEs.value==='Bert Bingle'，而不是检查模型数据。singleSelect？元素有两个ng更改方向

---

侦探。这不适用于HTML解析器。在chrome上，第二个ng更改被忽略。感谢您的帮助。我做了建议的更改，但仍然不起作用。当我选中工作示例时，当我选择下拉列表时，地图不会平移到新位置？jsbin有时会出现问题，但并不是所有的更改都已保存：|现在代码段应该可以工作了。但不管怎样，如果你遵循我所有的改变，它应该是有效的。尝试创建最小的工作代码段，您可以复制我的jsbin，从而重现问题。很抱歉，我让它在我的代码中工作。非常感谢。这真是太棒了！我的荣幸是：祝你好运！