Google Map API - 错误位置的多个图标

时间：2014-03-05 15:51:48

标签： javascript google-maps google-maps-api-3

我有一个非常奇怪的问题，似乎最近才出现过。我在一段时间内没有对项目进行任何重大代码更改，也没有对相关功能进行过一段时间的更改。

问题是，当我使用API​​向Google地图添加多个图标时，图标会相互叠加。

Google Screen Capture from project web site

奇怪的是标签都已正确定位，但这些标签使用与图标相同的坐标。

这是传递给函数

的字符串 
1344, 52.65665917, -2.49004717, '../Images/Icons/Direction/container_blueN.ico', 'Galahad', '2014 Mar 05 Wednesday, 14:00', 'Wellington Road, Horsehay, Hollybank', 'RESERVED', '0 KPH', 0

功能是

function AddClusterLocation(FID, latitude, longitude, Icon, ID, DateStamp, Location, Event, Speed, IgnitionStatus) {
if (objMap) {

    var cssName = 'MarkerIgnitionOff';

    switch (IgnitionStatus) {
        case '1':
            cssName = 'MarkerIgnitionOn';
            break;
        default:
            cssName = 'MarkerIgnitionOff';
    }

    var adjustedIcon = new google.maps.MarkerImage(
        Icon,
        new google.maps.Size(32, 32),
        new google.maps.Point(0, 0),
        new google.maps.Point(16, 16)
        );

    var objMarker = new MarkerWithLabel({
        position: new google.maps.LatLng(latitude, longitude),
        draggable: false,
        raiseOnDrag: false,
        icon: adjustedIcon,
        map: objMap,
        labelContent: '  ' + ID + '  ',
        labelAnchor: new google.maps.Point(-8, -8),
        labelClass: cssName, // the CSS class for the label
        labelStyle: { opacity: 1.0 }
    });


    // Add Maker to array
    objMakersArray.push(objMarker);

    // Wrap the event listener inside an anonymous function
    // then we immediately invoke and passes the variables to
    (function (ID, DateStamp, Location, Event, Speed, Icon) {
        google.maps.event.addListener(objMarker, 'click', function () {
            if (!objInfoWindows) {
                objInfoWindows = new google.maps.InfoWindow();
            }

            // Create Paragraph
            var para1 = document.createElement('p');
            var adiv = document.createElement('div');
            adiv.style.cssText = 'width: 300px; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 10pt; color: #000000;';

            // var htmlstring = '<div style="width: 300px; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 6pt; color: #FF0000;">'
            var htmlstring = '<table>' // style="width: 300px; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 6pt; color: #FF0000;">'
            htmlstring = htmlstring + '<tr><td style="width: 100px;"><strong>ID</strong></td><td style="width: 200px;">' + ID + '</td></tr>';
            htmlstring = htmlstring + '<tr><td><strong>Date/Time</strong></td><td>' + DateStamp + '</td></tr>';
            htmlstring = htmlstring + '<tr><td><strong>Location</strong></td><td>' + Location + '</td></tr>';
            htmlstring = htmlstring + '<tr><td><strong>Event</strong></td><td>' + Event + '</td></tr>';
            htmlstring = htmlstring + '<tr><td><strong>Speed</strong></td><td>' + Speed + '</td></tr></table>'
            // htmlstring = htmlstring + '</div>';

            adiv.innerHTML = htmlstring;

            // para1.innerHTML = htmlstring;
            para1.appendChild(adiv);

            // Zoom In DIV
            var aDiv = document.createElement('div');
            aDiv.style.width = "100px";
            aDiv.style.float = 'left';

            // Zoom In
            var alink = document.createElement('a');
            alink.innerHTML = 'Zoom In';
            alink.href = '#';
            alink.onclick = function () {
                objMap.setCenter(objMarker.getPosition());
                zoomLevel = objMap.getZoom();
                if (zoomLevel != 21) {
                    objMap.setZoom(zoomLevel + 1);
                }
                return false;
            };

            aDiv.appendChild(alink);

            // Zoom OUT DIV
            var bDiv = document.createElement('div');
            bDiv.style.width = '100px';
            bDiv.style.float = 'left';

            // Zoom In
            var blink = document.createElement('a');
            blink.innerHTML = 'Zoom Out';
            blink.href = '#';
            blink.onclick = function () {
                objMap.setCenter(objMarker.getPosition());
                zoomLevel = objMap.getZoom();
                if (zoomLevel != 0) {
                    objMap.setZoom(zoomLevel - 1);
                }
                return false;
            };

            bDiv.appendChild(blink);

            // Add Favourite Div
            var cDiv = document.createElement('div');
            cDiv.style.float = 'right';
            cDiv.style.width = '150px';

            // Add Favourite
            var clink = document.createElement('a');
            clink.innerHTML = 'Add to Favourite';
            clink.href = '#';
            clink.onclick = function () {
                position = objMarker.getPosition();
                Pane = window.parent.ASPxSplitterDefault.GetPaneByName('PaneDisplay');
                if (Pane) {
                    Pane.SetContentUrl('../Pages/FavouritePage.aspx?latitude=' + position.lat() + '&longitude=' + position.lng(), true);
                }
                return false;
            };
            cDiv.appendChild(clink);

            var para2 = document.createElement('p');
            para2.appendChild(aDiv);
            para2.appendChild(bDiv);
            para2.appendChild(cDiv);

            // Create Master Div to hold everything
            var masterDiv = document.createElement('div');

            // Get name of DIV that has Atlas
            var objDiv = objMap.getDiv();
            var divName = objDiv.id;

            // Bind to mapping Div
            document.getElementById(divName).appendChild(masterDiv);

            // Info Div
            var infoDiv = document.createElement('div');
            infoDiv.style.float = 'left';
            infoDiv.style.width = '350px';
            infoDiv.appendChild(para1);
            infoDiv.appendChild(para2);
            masterDiv.appendChild(infoDiv);

            // Creating the div that will contain the detail map
            var detailDiv = document.createElement('div');
            infoDiv.style.float = 'right';
            detailDiv.style.width = '200px';
            detailDiv.style.height = '200px';
            masterDiv.appendChild(detailDiv)

            // Setting up small map

            // Creating MapOptions for the overview map
            var overviewOpts = {
                zoom: 14,
                icon: adjustedIcon,
                center: objMarker.getPosition(),
                mapTypeId: google.maps.MapTypeId.HYBRID,
                disableDefaultUI: true
            };

            var objdetailMap = new google.maps.Map(detailDiv, overviewOpts);

            // Create a marker that will show in the detail map
            var objdetailMarker = new google.maps.Marker({
                position: objMarker.getPosition(),
                map: objdetailMap,
                icon: adjustedIcon,
                clickable: false
            });

            // Setting the content of the InfoWindow
            objInfoWindows.setContent(masterDiv);

            // Tying the InfoWindow to the marker
            objInfoWindows.open(objMap, objMarker);

        });
    })(ID, DateStamp, Location, Event, Speed, Icon);
    objMarker = null;
}

}

调用它的函数是

        function OnCurrentPosition(arg) {
        if (arg == null) {
            parent.location = '../Security/Login.aspx';
        }

        if (arg) {
            var latitude, longitude
            var arrayList = arg.split(";");
            alert(arg);
            for (i = 0; i < arrayList.length; i++) {
                if (arrayList[i].length) {
                    var arrLocation = arrayList[i].split("$")
                    AddClusterLocation(arrLocation[0], arrLocation[1], arrLocation[2], arrLocation[3], arrLocation[4], arrLocation[5], arrLocation[6], arrLocation[7], arrLocation[8], arrLocation[9]);
                    SetBounds(arrLocation[1], arrLocation[2]);
                    latitude = arrLocation[1];
                    longitude = arrLocation[2];
                }
            }
            CreateClusterer();

            if (flgLockMapToBounds == false) {
                if (objMakersArray.length == 1) {
                    SetMapCentre(latitude, longitude, 14);
                }
                else {
                    ZoomToExtend();
                }
            }
        }
    }

arg = 1344$52.65665917$-2.49004717$../Images/Icons/Direction/container_blueN.ico$Galahad$2014 Mar 05 Wednesday, 14:00$Wellington Road, Horsehay, Hollybank$RESERVED$0 KPH$0$0.00000000$0.00000000$0;1342$52.65582367$-2.48958417$../Images/Icons/Direction/container_yellowN.ico$Gwinevere$2014 Mar 05 Wednesday, 14:00$Woodlands Lane, Horsehay, Coalbrookdale$RESERVED$0 KPH$0$0.00000000$0.00000000$0;

由于标签是正确的，我真的很难解释这一点，我每次调用函数时都检查了纬度和经度以及它的不同。此外，这是有效的，昨天只有客户发现它不是。

这是我使用的API 

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

感谢您阅读此问题，希望您能够提供帮助！ 吉姆

2 个答案:

答案 0 :(得分：8)

MarkerWithLabel library存在问题。 Issue

答案 1 :(得分：1)

MarkerWithLabel v1.1.10最近在谷歌地图Api的实验版本变为v3.18后停止了我的工作。我将Maps API设置为＆＃34; ... maps / api / js？v3＆amp; ...＆＃34;默认选择最新的实验版本（目前为v3.18）。通过将版本修复到v3.17，MarkerWithLabel工作正常。

相关问题
最新问题