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

 爱上小胸女人 发布于 2023-01-19 19:09

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

所以问题是,当我使用API​​向Google地图添加多个图标时,图标会相互叠加.

来自项目网站的Google Screen Capture

奇怪的是标签都是正确定位的,但那些使用与图标相同的坐标.

这是传递给函数的字符串

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 = '
' var htmlstring = '' // Lucida Grande", Helvetica, Arial, sans-serif; font-size: 6pt; color: #FF0000;">' htmlstring = htmlstring + ''; htmlstring = htmlstring + ''; htmlstring = htmlstring + ''; htmlstring = htmlstring + ''; htmlstring = htmlstring + '
ID' + ID + '
Date/Time' + DateStamp + '
Location' + Location + '
Event' + Event + '
Speed' + Speed + '
' // htmlstring = htmlstring + '
'; 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


感谢您阅读该问题,希望您能够提供帮助!吉姆

1 个回答
  • MarkerWithLabel库存在问题. 问题.

    2023-01-19 19:10 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有