8

このチュートリアルに従って、カスタム Google マップを作成しました。Wordpress へのリンクやマーカーのクラスター化など、他の要素をいくつか含めました。

各マーカーの情報ウィンドウの情報を除けば、すべてうまく機能しています。それぞれの情報を変更することはできないようです。次の行を変更すると変更されると思いましたが、何も影響しません。

var html = "<b>" + name + "</b> <br/>" + address;

これは作業マップです

独自のカスタム データをウィンドウのどこに配置できますか? また、ウィンドウのスタイルを設定できれば、さらに良いでしょう。

クラスタラーが問題のようです。主にこのセクションです。html コンテンツを取得して情報ウィンドウに配置するにはどうすればよいですか?

function load() {
  var cluster = [];
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(52.375599, -3.471680),
    zoom: 8,
    mapTypeId: 'roadmap'
  });
  var infowindow = new google.maps.InfoWindow();
  var min = .999999;
  var max = 1.000002;

  // Change this depending on the name of your PHP file
  downloadUrl("<?php bloginfo('stylesheet_directory'); ?>/phpsqlajax_genxml.php ", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var address = markers[i].getAttribute("address");
      var type = markers[i].getAttribute("type");

      var offsetLat = markers[i].getAttribute("lat") * (Math.random() * (max - min) + min);
      var offsetLng = markers[i].getAttribute("lng") * (Math.random() * (max - min) + min);

      var point = new google.maps.LatLng(offsetLat, offsetLng);
      var html = "<b>" + name + "</b> <br/>" + address;
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      });
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        // infowindow.setContent(markers[i].getAttribute("name"));
                        // infowindow.open(map, marker, html);
                        infowindow.setContent(html); infowindow.open(map, marker);
                    }
                })(marker, i));
      cluster.push(marker);
    }
    var mc = new MarkerClusterer(map,cluster);
  });
}

具体的には、これはクラスタラーを介してhtmlコンテンツを配置していません...少なくともこれは実際にウィンドウ内のデータを変更しています.クラスタラーを壊さずにhtmlコンテンツを出力する必要があるだけです:

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(markers[i].getAttribute("name"));
                        infowindow.open(map, marker, html);
                    }
                })(marker, i));
      cluster.push(marker);

これまでのところ最も近いのはこれですが、すべてのマーカーについて同じ情報が表示されます。HTMLコンテンツを表示しています：

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        // infowindow.setContent(markers[i].getAttribute("name"));
                        // infowindow.open(map, marker, html);
                        infowindow.setContent(html); infowindow.open(map, marker);
                    }
                })(marker, i));
      cluster.push(marker);
4

4 に答える 4

13

これをもっと早く思いつかなかったなんて信じられない!!

これは、リスナーで文字列を構築する場合にすぎません。

  // Change this depending on the name of your PHP file
  downloadUrl("<?php bloginfo('stylesheet_directory'); ?>/phpsqlajax_genxml.php ", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var type = markers[i].getAttribute("type");

      var offsetLat = markers[i].getAttribute("lat") * (Math.random() * (max - min) + min);
      var offsetLng = markers[i].getAttribute("lng") * (Math.random() * (max - min) + min);

      var point = new google.maps.LatLng(offsetLat, offsetLng);
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      });
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        var name = markers[i].getAttribute("name");
                        var address = markers[i].getAttribute("address");
                        var html = "<b>" + name + "</b> <br/>" + address;
                        infowindow.setContent(html);
                        infowindow.open(map, marker, html);
                        // infowindow.setContent(html);
                        // infowindow.open(map, marker);
                    }
                })(marker, i));
      cluster.push(marker);
    }
于 2013-02-28T16:30:25.507 に答える
2

私は同様の問題を抱えていました。これを理解して、マーカー情報ウィンドウのコンテンツを変更します

    var marker = new MarkerWithLabel({
        id: "costume_ID",/*<---this is the start of the trick*/
        position: new google.maps.LatLng(lat,lon),
        icon: "../images/icon-bla.png",
        map: map,
        title: 'bla',
        labelContent: 'bla,bla,
        labelClass: "labels", 
        labelStyle: {opacity: 1.0}
    })
    google.maps.event.addListener(marker, 'click', (function() {
        return function(){
        infowindow.setContent(infor(this.id));/*<--- here is the trick*/
        infowindow.open(map, this);
        map.setCenter(this.getPosition());
    }});

変数に情報がある場合は、必要なものを出力する関数を設定します。

    function infor(im){
        return "<div><b>INFOWINDOW</b><br>Date: "+var[im].date+"<br>Sync:  "+var[im].sync+"...bla,bla,bla</div>";
    }/*THIS FUNCTION RETURN THE STING TO SHOW ION THE INFOWINDOW*/
于 2016-01-16T08:44:58.393 に答える