0

我想将谷歌地图v3元素加载到我的网站,用户可以在其中动态选择某些过滤器来显示某些标记。然后将结果序列化为映射对象用于设置指定标记的JSON文件。谷歌地图v3 - 缩放到标记时出错

我试图做一个测试页面,如下所示:

@section headerScripts { 
    <script src="~/Scripts/jquery-1.9.1.js"></script> 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 

    <script type="text/javascript"> 
     var map; 
     var latlng = new google.maps.LatLng(56.29216, 10.34912); 
     var markerList = []; 

     function initialize() { 
      var mapOptions = { 
       zoom: 7, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 
      map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
     } 

     function addMarkers(stores) { 
      for (var i = 0; i < stores.length; i++) { 
       var marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(stores[i].Latitude, stores[i].Longitude), 
        map: map, 
        title: stores[i].Name 
       }); 
       markerList.push(marker); 
      } 
      zoomToMarkers(); 
     } 

     function zoomToMarkers() { 
      var latlngbounds = new google.maps.LatLngBounds(); 
      markerList.forEach(function (n) { 
       latlngbounds.extend(n); 
      }); 
      map.setCenter(latlngbounds.getCenter()); 
      map.fitBounds(latlngbounds); 
     } 

     $(document).ready(function() { 
      initialize(); 
      $.getJSON("/Product/GetStore/", addMarkers); 
     }); 

    </script> 
} 

<div id="map-canvas" style="width: 500px; height: 500px;"></div> 

它集标记好了,那工作,但我想一个函数来放大,因此,只有在标志物地图显示在“缩放”中。但是,当我打电话zoomToMarkers(基于函数我在网上找到) - 我从谷歌地图的js文件得到一个错误:

https://maps.gstatic.com/intl/da_dk/mapfiles/api-3/12/9/main.js 16行,列353 未处理的异常 0x800a01b6 - 微软JScript运行时错误:对象不支持属性或方法“拉特”

我不知道为什么会发生这种情况,因为它似乎很多其他人已经得到它的工作。你们能帮忙吗?

+0

请看看我的类似问题 - http://stackoverflow.com/questions/19447723/google-map-zoom-error-when-reload – 2013-10-18 10:50:02

回答

0

我自己发现了这个错误。问题是在这一行

latlngbounds.extend(n); 

我被添加到latlngbounds而不是坐标的标记对象。所以我把它校正为该:

function addMarkers(stores) { 
    for (var i = 0; i < stores.length; i++) { 
     var marker_latlng = new google.maps.LatLng(stores[i].Latitude, stores[i].Longitude); 
     var marker = new google.maps.Marker({ 
      position: marker_latlng, 
      map: map, 
      title: stores[i].Name 
     }); 
     latlngbounds.extend(marker_latlng); 
    } 
    zoomToMarkers(); 
} 

function zoomToMarkers() { 
    map.setCenter(latlngbounds.getCenter()); 
    map.fitBounds(latlngbounds); 
} 

这完美的作品!