Question

我正在通过Google Maps API工作，并实现以下目标：

var infowindow = null;

$(document).ready(function () { initialize();  });

function initialize() {

    var centerMap = new google.maps.LatLng(39.828175, -98.5795);

    var myOptions = {
        zoom: 4,
        center: centerMap,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    setMarkers(map, sites);
    infowindow = new google.maps.InfoWindow({
            content: "loading..."
        });

    var bikeLayer = new google.maps.BicyclingLayer();
    bikeLayer.setMap(map);
}

var sites = [
    ['Mount Evans', 39.58108, -105.63535, 4, 'This is Mount Evans.'],
    ['Irving Homestead', 40.315939, -105.440630, 2, 'This is the Irving Homestead.'],
    ['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park'],
    ['Flatirons in the Spring', 39.99948, -105.28370, 3, 'These are the Flatirons in the spring.']
];



function setMarkers(map, markers) {

    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            title: sites[0],
            zIndex: sites[3],
            html: sites[4]
        });

        var contentString = "Some content";

        google.maps.event.addListener(marker, "click", function () {
            //alert(this.html);
            infowindow.setContent(this.html);
            infowindow.open(map, this);
        });
    }
}

我尝试创建一个Fiddle，但它没有出现。

因此，地图支持多个位置和信息框，但我仍然非常困惑的部分是自定义信息框。我做了一些搜索并看到了this question/answer，但我很难理解它是如何工作的。所以，假设我有#map_canvas地图，然后在那之外，我有一个现有的#info div（我希望每个信箱都加载）。所以 - Google Maps API中没有定义样式，它是一个应该作为信息框接管的现有元素。

是否有人能够推动我（或者在这种情况下，推动会很棒）帮助我更好地理解如何做到这一点？可以找到我正在思考的快速屏幕截图here。地图顶部的深红色框是目标。

自定义标记和“活动”状态（所选标记的黄金图标）也是另一个挑战，但我还没有放弃对那些人的所有希望。任何帮助将不胜感激。谢谢！

Answer 1

它已经有一段时间但这应该有效。

创建标记时，请附加要附加到此标记的任何数据。

这是使用setMarkers函数。很高兴你加了它（想知道你的循环在哪里）

在html中有你的div来获取像

这样的数据

 <div id="myDivID"></div>

在你的js中添加对它的引用并在那里插入html

function setMarkers(map, markers) {
    var myContentDiv = document.getElementById('myDivID');//Reference to you DOM elem  

    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            title: sites[0],
            zIndex: sites[3],
            html: sites[4]
        });

        var contentString = "Some content";
        //marker.xtraData = 'SomeExtraData';//You can even add more data this way

        google.maps.event.addListener(marker, "click", function () {
            //alert(this.html);
            var myTemplate = '<h1>'+this.title+'<h1><p>'+this.html+'</p>';

            myContentDiv.innerHTML = myTemplate;//Inset this html inside link
            //infowindow.setContent(this.html);
            //infowindow.open(map, this);
        });
    }
}

根据您的工作情况，您可能还想查看传单。它比移动浏览器上的谷歌地图快得多，并且比ios6地图更好。呵呵。

Google Maps API v3 - 自定义信息框

1 个答案: