Question

我试图修改initMap() google-maps回调之外的折线。

JavaScript：

var map;
var height = window.innerHeight / 3;
var workOrders = {
    "1":[
        {
        "lat":57.77153,
        "lng":14.15588,
        "id":"7861ac93-42e9-45fb-bc2c-a4cd8319fe80"
        }
    ]
};   
var latestCoordinates = {
    "lat":57.77153,
    "lng":14.15588,
}

// Global Polyline Object
var coordinateObject = null;

$('#map').css('height', height);
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: latestCoordinates, // last added coordinates
        zoom: 13,
        disableDefaultUI: true
    });
    $.each(workOrders, function (key, data) {
        coordinateObject = new google.maps.Polyline({
            path: data,
            geodesic: true,
            strokeColor: '#324D5E',
            strokeOpacity: 1,
            strokeWeight: 8
        });

        google.maps.event.addListener(coordinateObject, 'mouseover', function(e) {
            // var test = workOrders[key][0]['name ']);
            var workOrderId = workOrders[key][0]['id'];
            coordinateObject.setOptions({strokeOpacity: 0.5});
            $('#' + workOrderId + ' .list-headers, #' + workOrderId + ' .list-content').css('background', '#CCCCCC');
        });

        google.maps.event.addListener(coordinateObject, 'mouseout', function(e) {
            var workOrderId = workOrders[key][0]['id'];
            coordinateObject.setOptions({strokeOpacity: 1});
            $('#' + workOrderId + ' .list-headers, #' + workOrderId + ' .list-content').css('background', '#FFFFFF');
        });

        coordinateObject.setMap(map);
    });
}

$(document).on('mouseover', '.list-column', function(e) {
    google.maps.event.trigger(coordinateObject, 'mouseover');
});

HTML：

    <div id="7861ac93-42e9-45fb-bc2c-a4cd8319fe80" class="col-sm-12 list-column">
        <div class="list-headers">
            ...
        </div>
        <div class="list-content">
            ...
        </div>
    </div>

我正在初始化Map（），循环遍历workOrder json数组并将侦听器添加到 mouseover 和 mouseout 。

这就像一个魅力。当我将折线悬停在地图上时，带有相应#uuid的div会获得背景颜色。

但是..当我试图扭转这个过程时，问题就出现了，我无法访问地图或 google.maps.event 对象。

更新

我已经通过在页面底部加入google.maps脚本解决了这个问题。它正在工作，但当悬停我想摆脱时，我仍然会收到错误。

解决方案

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: latestCoordinates, // last added coordinates
        zoom: 13,
        disableDefaultUI: true
    });
    $.each(workOrders, function (key, data) {
        coordinateObject = new google.maps.Polyline({
            path: data,
            geodesic: true,
            strokeColor: '#324D5E',
            strokeOpacity: 1,
            strokeWeight: 8
        });

        addDomListener(google.maps.event, coordinateObject, 'mouseover', workOrders[key][0]['id'], '#CCCCCC', 0.5)
        addDomListener(google.maps.event, coordinateObject, 'mouseout', workOrders[key][0]['id'], '#FFFFFF', 1)

        coordinateObject.setMap(map);
    });
}

function addDomListener(mapEvent, coordinateObject, eventTrigger, workOrderId, onHoverBackground, opacity)
{
    mapEvent.addDomListener(coordinateObject, eventTrigger, function(e) {
        coordinateObject.setOptions({strokeOpacity: opacity});
        $('#' + workOrderId + ' .list-headers, #' + workOrderId + ' .list-content').css('background', onHoverBackground);
    });

    $('#'+workOrderId+'.list-column').each(function() {
        var col = document.getElementById($(this).attr('id'));
        mapEvent.addDomListener(col, eventTrigger, function(event) {
            mapEvent.trigger(coordinateObject, eventTrigger, {

            });
        });
    });
}

错误

未捕获的TypeError：无法读取属性＆＃39; defaultPrevented＆＃39;未定义的commonjs.3

_.qi @ common.js：3
（匿名函数）@ poly.js：22
_。H.trigger @ js？key = XXXXXX＆amp; callback = initMap：88
（匿名函数）@ a7184edc-46e9-4080-b4f3-3e6676d08d07：155 *

触发google-maps事件onHover来自外部地图

更新

0 个答案: