在Google地图上使用文字而非标记

时间:2011-03-19 12:03:26

标签: google-maps google-maps-markers

我正在创建一个包含数百个标记和信息窗口的地图。我正在使用自定义图标而不是默认图标和标记聚类器来加速加载。

在每个信息窗口中都有一个指向特定文章的链接。为了打开该文章,涉及两个行动:

  1. 您必须点击标记
  2. 信息窗口打开,您会看到文章的名称,您必须点击名称(这是一个链接)才能打开文章
  3. 我想避免一次点击。是否可以使用文本标记(而不是查看自定义图标) - 您会看到文章“文章1”,当您点击它时,“文章1”会打开吗?

    以下是我的代码的一部分:

    <head>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
    <script type="text/javascript"> 
    var map = null;
    var markerArray = []; //create a global array to store markers
    var myPoints = [
    
    [1, 1, 'Article 1'],
    [2, 2, 'Article 2'],
    [3, 3, 'Article 3'],
    
    ];
    //create global array to store points
    
    function initialize() {
        var myOptions = {
            zoom: 5,
            center: new google.maps.LatLng(2, 2),
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            },
            navigationControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
        var mcOptions = {
            gridSize: 10,
            maxZoom: 15
        };
        var mc = new MarkerClusterer(map, [], mcOptions);
    
        google.maps.event.addListener(map, 'click', function() {
            infowindow.close();
        });
    
        // Add markers to the map
        // Set up markers based on the number of elements within the myPoints array
        for(var i=0; i<myPoints.length; i++){
             createMarker(new google.maps.LatLng(myPoints[i][0], myPoints[i][1]), myPoints[i][2]);
        }
    
        mc.addMarkers(markerArray , true);
    }
    
    var infowindow = new google.maps.InfoWindow({
        size: new google.maps.Size(150, 50)
    });
    
    var image = '/321.png';
    function createMarker(latlng, html) {
        var contentString = html;
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon:image,
            zIndex: Math.round(latlng.lat() * -100000) << 5
        });
    
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(contentString);
            infowindow.open(map, marker);
        });
    
        markerArray.push(marker); //push local var marker into global array
    }
    
    window.onload = initialize;
    </script> 
    </head>
    

1 个答案:

答案 0 :(得分:1)

无法用文字替换标记,至少现在不是,谷歌地图团队可能会在不久的将来添加该功能。

为了避免点击两次这个问题,你可以做的是当用户将鼠标悬停在标记上时显示infoWindow,当用户点击标记时,他将被指示打开文章/页面。

您可以查看事件部分,了解有关处理标记事件的更多信息。 Google Maps Marker,您需要向下滚动一下事件部分。

希望这有帮助。