从外部函数突出显示 Google maps V3 Polyline答案

【问题标题】：Highlight Google maps V3 Polyline from external function从外部函数突出显示 Google maps V3 Polyline
【发布时间】：2014-08-06 06:19:27
【问题描述】：

当我将鼠标悬停在锚标记上时，我想突出显示折线。这是我的代码，折线是从 gps 文件中绘制的，一切正常，但我似乎无法从外部函数“setOptions”

<script>

    $.ajax({
      type: "GET",
      url: "myTrack.gpx",
      dataType: "xml",
      success: function(xml) {
        var points = [];
        var bounds = new google.maps.LatLngBounds ();
        $(xml).find("trkpt").each(function() {
          var lat = $(this).attr("lat");
          var lon = $(this).attr("lon");
          var p = new google.maps.LatLng(lat, lon);
          points.push(p);
          bounds.extend(p);
        });

        var polyTrack = new google.maps.Polyline({
          // use your own style here
          path: points,                 
          strokeOpacity: 0.5,
          strokeWeight: 5
        });

        polyTrack.setMap(map);              

      }
    }); 

    // WHEN I HOVER THE DIV
    function hoverTrack(){

         polyTrack.setOptions({
             strokeOpacity: 1,
             strokeWeight: 10
         });    

     }  


</script>

<a onmouseover="hoverTrack()">HIGHLIGHT</a>

【问题讨论】：

标签： jquery google-maps google-maps-api-3 polyline

【解决方案1】：

您在 ajax 函数的回调部分中将 polyTrack 声明为局部变量。

有几种方法可以解决这个问题。一个简单的方法是在 ajax 调用之前声明折线，然后更新它的路径并将其显示在 ajax 回调中。这样，该变量将可用于 ajax 部分和 hoverTrack 函数。

    var polyTrack = new google.maps.Polyline({
          strokeOpacity: 0.5,
          strokeWeight: 5
        });

    $.ajax({
      type: "GET",
      url: "myTrack.gpx",
      dataType: "xml",
      success: function(xml) {
        var points = [];
        var bounds = new google.maps.LatLngBounds ();
        $(xml).find("trkpt").each(function() {
          var lat = $(this).attr("lat");
          var lon = $(this).attr("lon");
          var p = new google.maps.LatLng(lat, lon);
          points.push(p);
          bounds.extend(p);
        });

        polyTrack.setPath(points);
        polyTrack.setMap(map);              

      }
    }); 

    // WHEN I HOVER THE DIV
    function hoverTrack(){
         polyTrack.setOptions({
             strokeOpacity: 1,
             strokeWeight: 10
         });    
     }

@Dr.Molle 的回答也应该有效。注意 map 变量的可用性。大多数谷歌地图示例将地图范围包装在初始化函数中。

【讨论】：

【解决方案2】：

删除 var-keyword

var polyTrack =

否则变量将无法全局访问

【讨论】：