Question

function disp_initialize() 
{

  var bike=<?php echo $_GET['bike_id']; ?>;  
  $.ajax({
          "dataType": "json",
          "type": "POST",
          "url": "home.php?bike_id="+bike,
            success: function(data) { 
            if(data.sMsg==0)
            {
               $("#map-canvas").hide();
            }
            else if(data.sBlankMsg==0){
               $("#map-canvas").hide();
            }
            else
            {
                initialize(data);
            }
        }
  });    
}     

function initialize(flightPlanCoordinates_arr) 
    {
        var flightPlanCoordinates_arr = flightPlanCoordinates_arr.mapData;

        var flightPlanCoordinates_arr_p = new Array();
        var j = 0;var k = 0;
        var store = new Array();
        for(var i in flightPlanCoordinates_arr)
        {
            if(j==0)
            {
                flightPlanCoordinates_arr_p[j] = flightPlanCoordinates_arr[i];
                j++;
            }
            else if(flightPlanCoordinates_arr_p[j-1]['state']==1 && flightPlanCoordinates_arr[i]['state']==0)
            {
                flightPlanCoordinates_arr_p[j] = flightPlanCoordinates_arr[i];
                j++;
            }
            else if(flightPlanCoordinates_arr_p[j-1]['state']==0 && flightPlanCoordinates_arr[i]['state']==1)
            {
                store[k]=j;
                flightPlanCoordinates_arr_p[j] = flightPlanCoordinates_arr[i];
                j++;k++;
            }
        }

        //console.log(store);
        var flightPlanCoordinates = new Array();
        for(var i in flightPlanCoordinates_arr_p)
        {
            flightPlanCoordinates[i] = new google.maps.LatLng(flightPlanCoordinates_arr_p[i]["latitude"],flightPlanCoordinates_arr_p[i]["longitude"]);
        }

        if(flightPlanCoordinates_arr != '')
        {
            var mapOptions = {
                zoom: 10,
                center: new google.maps.LatLng(flightPlanCoordinates_arr[0]["latitude"],flightPlanCoordinates_arr[0]["longitude"]),
                mapTypeId: google.maps.MapTypeId.TERRAIN
            };
        }
        var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
            var Colors = ["#FF0000", "#00FF00", "#0000FF", "#FFFFFF", "#000000", "#FFFF00", "#00FFFF", "#FF00FF"];

            for (var i = 0; i < flightPlanCoordinates.length; i++) 
            {   
                if(jQuery.inArray(i+1,store)===-1)
                {
                    var colour = Colors[i];
                    var flightPath = new google.maps.Polyline({
                        path: [flightPlanCoordinates[i], flightPlanCoordinates[i+1]],
                        geodesic: true,
                        strokeColor: '#FFFF00',
                        strokeOpacity: 2.0,
                        strokeWeight: 10,
                        map: map
                    });
                }

            }        
            flightPath.setMap(map);
        var location = "";
        var location_details = "";
            var speed="";

            for(var i in flightPlanCoordinates_arr)
            {

                location = flightPlanCoordinates_arr[i]["location"];
                location_details = flightPlanCoordinates_arr[i]["location_details"];
                speed = flightPlanCoordinates_arr[i]["speed"]; 

                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(flightPlanCoordinates_arr[i]["latitude"],flightPlanCoordinates_arr[i]["longitude"]),
                    map: map
                });
                marker.setIcon('images/bike.png');
                }

        new google.maps.event.addListener(flightPath, 'mouseover', function(event) {
                var populationOptions = {
                strokeColor: '#11C111',
                strokeOpacity: 0.8,
                strokeWeight: 4,
                fillColor: 'transparent',
                fillOpacity: 4,
                map: map,
                center: event.latLng,
                position: event.latLng,
                radius: 40
            };
            // Add the circle for this city to the map.
            cityCircle = new google.maps.Circle(populationOptions);
            attachSecretMessage(marker, contentHtml,map);
        });

        new google.maps.event.addListener(flightPath, 'mouseout', function(event) {
            var marker = new google.maps.Marker({
                position: event.latLng,
            });
            // Add the circle for this city to the map.
            cityCircle.setMap(null);
        });
    }
    function attachSecretMessage(marker, contentHtml, map) {

            var infowindow = new google.maps.InfoWindow({
            position: marker.position,
            content: contentHtml
        });
        google.maps.event.addListener(marker, 'mouseover', function() {
          infowindow.open(map);
        });
        google.maps.event.addListener(marker, 'mouseout', function() {
          infowindow.close();
        });
    }

mapData是一个JSON响应，带来“纬度”，“经度”，“速度”，“状态”，“位置”值。

我已经为Lats和Longs绘制了折线，但是没有显示标记。并且收到此错误 TypeError：f未定义

Answer 1

我的设计并不完全清楚。

如果您希望在mouseout事件侦听器中显示标记，则必须提供地图值。例如：

    var marker = new google.maps.Marker({
        position: event.latLng,
        map: map
    });

在这种情况下，你必须使map全局。目前，它在函数initialize()中进行了本地定义。所以：

var map;

function initialize(flightPlanCoordinates_arr) {
...
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
...
}

此外，似乎这个for循环

for (var i = 0; i < flightPlanCoordinates.length; i++) {

应初始化为：

for (var i = 0; i < flightPlanCoordinates.length - 1; i++) {

更新：请参阅example at jsbin。我能得到的最好，因为我不理解某些变量检查的整体逻辑。如果设置了探测器图标标记将被设置。注意：我无法执行该ajax调用，因此我不得不对数据进行建模。

多个折线上未显示标记

1 个答案: