繁体   English   中英

Google Maps API v3 - 可点击的文字缩放到标记并打开infoWindow

[英]Google Maps API v3 - clickable text to zoom to marker and open infoWindow

我正在开发一个使用带有127个标记的地图标记聚类的项目。 我需要帮助的是当访问者点击标记列表中的文本链接时打开infoWindow。 目前,单击文本会缩放到标记但不会同时打开infoWindow。 单击标记会打开infoWindow。 我在代码中添加了注释,指出生成标记列表的位置。 评论是//可点击标记的文本列表。

不幸的是,该网站正在开发中,并且不公开。 如果有任何其他信息可以帮助您,请告诉我。 提前致谢。

var globalMarker = [];
var map;

function initialize() {
    var center = new google.maps.LatLng(35.4214, -15.6919);
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 1,
        center: center,
        disableDoubleClickZoom: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var markers = [];
    var infowindow = new google.maps.InfoWindow();
    for (i = 0; i < 127; i++) {
        var dataChapters = data.chapters[i];
        var latLng = new google.maps.LatLng(dataChapters.latitude, dataChapters.longitude);
        marker = new MarkerWithLabel({
            position: latLng,
            draggable: true,
            raiseOnDrag: true,
            map: map,
            labelContent: "<strong>" + dataChapters.name + "<\/strong>" + "<br />" + dataChapters.description + "<br /><br />", // label for cluster view.
            labelAnchor: new google.maps.Point(30, 0),
            labelVisible: false,
            labelClass: "labels", // the CSS class for the label
            labelStyle: {
                opacity: 0.75
            }
        });
        markers.push(marker);
// text list of clickable markers
        makeDiv(i, 15, dataChapters.rank + ")&nbsp;" + "<span class=\"chapterlink\">" + dataChapters.name + "<\/span>" + "<br />");
        google.maps.event.addListener(markers[i], 'click', function (e) {
            infowindow.setContent(this.labelContent); // label for  pin.
            infowindow.open(map, this);
        });
    }
    var clusterOptions = {
        zoomOnClick: true
    };
    var markerCluster = new MarkerClusterer(map, markers, clusterOptions);
    globalMarker = markers.slice();
    google.maps.event.addListener(markerCluster, 'clusterclick', function (cluster) {
        var content = '';
        // Convert lat/long from cluster object to a usable MVCObject
        var info = new google.maps.MVCObject;
        info.set('position', cluster.center_);
        //----
        //Get markers
        var markers = cluster.getMarkers();
        var titles = "";
        //Get all the titles
        for (var i = 0; i < markers.length; i++) {
            titles += markers[i].labelContent + "\n";
        }
        //---
        infowindow.close();
        infowindow.setContent(titles); //set infowindow content to titles
        infowindow.open(map, info);
        google.maps.event.addListener(map, 'zoom_changed', function () {
            infowindow.close();
        });
    });
}

function makeDiv(index, zoomLevel, content) {
    document.getElementById("sidebar").innerHTML += '<div class="child" onclick="zoomIn(' + index + ',' + zoomLevel + ')">' + content + ' </div>';
}

function zoomIn(index, zoomLevel) {
    map.setCenter(globalMarker[index].getPosition());
    map.setZoom(zoomLevel);
}

google.maps.event.addDomListener(window, 'load', initialize);

尝试将其添加到zoomIn()

google.maps.event.trigger(globalMarker[index],'click');

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM