0

我真的需要帮助来解决这个问题一个星期了。我正在尝试创建元素之间的关系，或者特别是与标记和按钮的关系。

我有一个用于按钮的侧导航栏（在地图上查看）应该跳转到正确的标记坐标。示例，如果我单击锚 1，它应该导航到第一个坐标/标记（Washington & Wells）并打开它的信息窗口，不幸的是，使用我当前的代码它会打开最后一个标记或坐标。

我试图为锚标记声明一个变量，并将其用作我的 markerObject 的属性。我还测试了这个对象方法应该返回位置对象。仅供参考：这是我正在克隆地图的站点（https://www.theproteinbar.com/restaurants/）

html:

  <span>
        <a href="#" class="orderbtnslocation">VIEW ON MAP1</a>
        <a href="#" class="orderbtnslocation">VIEW ON MAP2</a>
        <a href="#" class="orderbtnslocation">VIEW ON MAP3</a>
  </span>

脚本：

function initMap(){
   let mymap = new google.maps.Map(document.getElementById("map"), {
   zoom: 15, //used to set the zoom in level when page load, the bigger the number the lower the lat.
   center: { lat: 41.883099, lng: -87.634354 }, // main marker Chicago Illinio coordinates, when page load
   mapId: "f13cb0fcf7cfdb03", // map style ID
});

//site coordinates array

let pbksites = [
    ["Washington & Wells", 41.883099, -87.634354, 1],
    ["Northwestern University - Henry Crown Sports Pavilion", 41.84915, -87.93023, 2],
    ["State & Lake", 42.05969, -87.67361, 3],
];

//infoWindow content array object
let markersInfOWindowbjArray = [
    {
        coords: pbksites[0],
        contenttext:
            '<div class="content">' +
            '<a href="http://www.google.com" class="siteheader"> WASHINGTON & WELLS </a>' +
            '<a target= "_blank" href="https://www.google.com/maps/search/221%20W%20Washington%20Street%2C%20Chicago%2C%20IL%2060606" class="siteaddress"> 221 W Washington Street, Chicago, IL 60606 </a>' +
            '<a href="http://www.google.com" class="siteaddressbtn">LOCATION DETAILS</a>' +
            "</div>",
    },

    {
        coords: pbksites[1],
        contenttext:
            '<div class="content">' +
            '<a href="http://www.google.com" class="siteheader"> NORTHWESTERN UNIVERSITY - HENRY CROWN SPORTS PAVILION </a>' +
            '<a target= "_blank" href="https://www.google.com/maps/place/2311+Campus+Dr,+Evanston,+IL+60208,+USA/@42.0594618,-87.6726831,17z/data=!3m1!4b1!4m5!3m4!1s0x880fda99546583b5:0x548f6060a0f133e1!8m2!3d42.0594618!4d-87.6726831" class="siteaddress"> 2311 Campus Drive, Evanston, IL 60208 </a>' +
            '<a href="http://www.google.com" class="siteaddressbtn">LOCATION DETAILS</a>' +
            "</div>",
    },

    {
        coords: pbksites[2],
        contenttext:
            '<div class="content">' +
            '<a href="http://www.google.com" class="siteheader"> STATE & LAKE </a>' +
            '<a target= "_blank" href="https://www.google.com/maps/search/10%20W%20Lake%20Street%2C%20Chicago%2C%20IL%2060601" class="siteaddress"> 10 W Lake Street, Chicago, IL 60601 </a>' +
            '<a href="http://www.google.com" class="siteaddressbtn">LOCATION DETAILS</a>' +
            "</div>",
    },
];

//InfoWindow Object declaration
let inforwindowObj = new google.maps.InfoWindow();

//Marker Function Declaration
let viewMap = document.getElementsByClassName("orderbtnslocation");

//declare marker function
function markersFunction(props) {
   
    const customMarkericon = {
 
        url: "D:/joe_projects/restaurant_project/3330s.png",

        size: new google.maps.Size(50, 75),

        origin: new google.maps.Point(53, 20),

        anchor: new google.maps.Point(30, 65),
    };

    //Marker Object
    const markerObject = new google.maps.Marker({
        position: { lat: props.coords[1], lng: props.coords[2] }, 
        map: mymap, 
        icon: customMarkericon, 
        title: props.coords[0],
        zIndex: props.coords[3], 
        iconImage: props.iconImage, 
        htmlelems: function () {
            this.position = htmlelems;
        },
    });

    //info window event handler
        markerObject.addListener("click", () => {
            inforwindowObj.setContent(props.contenttext);
            inforwindowObj.open(map, markerObject);
        });



    for (let i = 0; i < viewMap.length; i++) {
        viewMap[0].addEventListener("click", () => {
            inforwindowObj.setContent(props.contenttext);
            inforwindowObj.open(map, markerObject);
        });
    }

} //marker function end

//Marker Function Invocation
for (let i = 0; i < markersInfOWindowbjArray.length; i++) {
    markersFunction(markersInfOWindowbjArray[i]);
}

} //initMap functin end
4

0 回答 0