Question

我需要为多个圈子添加信息窗口。我尝试在addListener中将cityCircle更改为citymap [city]。我现在用Google搜索了六个小时......下面的代码会弹出地图左上角的窗口，里面没有任何内容，而不是圆圈。在此先感谢您的帮助！

echo '<script>
var citymap = {'."\n";
$result = $site->query("SELECT * FROM ZIPCODES WHERE 1");
while ($data = $result->fetch_array())
{
$zip = $data['ZIP'];
$coor = explode(",", $data['COOR']);
$count = $data['COUNT'];
echo $zip . ': {
    center: {lat: ' . $coor[0] . ', lng: ' . $coor[1] . '},
    population: ' . $count . ',
    title: "<div>TEST</div>"
},'."\n";

}
echo '};

function initMap() {
var map = new google.maps.Map(document.getElementById("advisor-map"), {
    zoom: 6,
    center: {lat: 34.730318, lng: -87.823112},
    mapTypeId: "terrain"
});

for (var city in citymap) {
    var cityCircle = new google.maps.Circle({
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35,
        map: map,
        center: citymap[city].center,
        title: citymap[city].title,
        radius: Math.sqrt(citymap[city].population) * 10000
    });

    google.maps.event.addListener(cityCircle, "click", function (e) {
        var infoWindow = new google.maps.InfoWindow();
        infoWindow.setContent(cityCircle.title);
        infoWindow.open(map, cityCircle);
    });
}
}
google.maps.event.addDomListener(window, "load", initialize);
</script>'."\n";

Answer 1

创建一个信息窗：aws ec2 authorize-security-group-ingress --group-id sg-xxxxxxxx --protocol tcp --port 3306 --cidr aaa.bbb.ccc.ddd/32
设置其内容，位置并点击一下即可打开：

var infowindow = new google.maps.InfoWindow();

proof of concept fiddle

代码段

var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(cityCircle, "click", function(e) {
  infoWindow.setContent(this.title);
  infoWindow.setPosition(this.getCenter());
  infoWindow.open(map);
});

function initMap() {
  var map = new google.maps.Map(document.getElementById("advisor-map"), {
    zoom: 6,
    center: {
      lat: 55,
      lng: 0
    },
    mapTypeId: "terrain"
  });

  for (var city in citymap) {
    var cityCircle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      title: city, // citymap[city].title,
      radius: Math.sqrt(citymap[city].population) * 100
    });

    var infoWindow = new google.maps.InfoWindow();
    google.maps.event.addListener(cityCircle, "click", function(e) {

      infoWindow.setContent(this.title);
      infoWindow.setPosition(this.getCenter());
      infoWindow.open(map);
    });
  }
}
google.maps.event.addDomListener(window, "load", initMap);
var citymap = {};
citymap['Mumbai'] = {
  center: new google.maps.LatLng(19.075787, 72.8774882),
  population: 14000
};
citymap['Cardiff'] = {
  center: new google.maps.LatLng(51.4887969, -3.1826222),
  population: 1000
};
citymap['Pune'] = {
  center: new google.maps.LatLng(18.5212252, 73.8556156),
  population: 14000
};
citymap['Beeston'] = {
  center: new google.maps.LatLng(52.9547839, -1.1581733),
  population: 3000
};
citymap['Birmingham'] = {
  center: new google.maps.LatLng(52.4677785, -1.7230922),
  population: 4000
};
citymap['Bristol'] = {
  center: new google.maps.LatLng(51.5434779, -2.573748),
  population: 2000
};
citymap['Brussels'] = {
  center: new google.maps.LatLng(50.8891268, 4.4592719),
  population: 1000
};
citymap['Crewe'] = {
  center: new google.maps.LatLng(53.0888925, -2.4357559),
  population: 2000
};
citymap['Dundee'] = {
  center: new google.maps.LatLng(56.4563534, -2.9752489),
  population: 1000
};
citymap['Durham'] = {
  center: new google.maps.LatLng(54.5468172, -1.5703596),
  population: 1000
};
citymap['Glasgow'] = {
  center: new google.maps.LatLng(55.8601948, -4.256542),
  population: 2000
};
citymap['Liverpool'] = {
  center: new google.maps.LatLng(53.4114691, -2.9954281),
  population: 5000
};
citymap['Livingston'] = {
  center: new google.maps.LatLng(55.8889266, -3.5575676),
  population: 12000
};
citymap['Moray'] = {
  center: new google.maps.LatLng(57.6153854, -3.5727702),
  population: 1000
};
citymap['Newcastle'] = {
  center: new google.maps.LatLng(55.0114826, -1.6218245),
  population: 1000
};
citymap['Runcorn'] = {
  center: new google.maps.LatLng(53.3416269, -2.7312661),
  population: 6000
};
citymap['Winnersh'] = {
  center: new google.maps.LatLng(51.43674, -0.89131),
  population: 5000
};
citymap['Wolverhampton'] = {
  center: new google.maps.LatLng(52.6375302, -2.1184067),
  population: 1000
};
citymap['Plymouth'] = {
  center: new google.maps.LatLng(50.3752499, -4.1425974),
  population: 1000
};
citymap['Swinton Manch'] = {
  center: new google.maps.LatLng(53.5108841, -2.3468262),
  population: 1000
};
citymap['Cleveleys'] = {
  center: new google.maps.LatLng(53.8758639, -3.0423774),
  population: 1000
};
citymap['Peterborough'] = {
  center: new google.maps.LatLng(52.5694182, -0.2415024),
  population: 1000
};
citymap['Saffron Walden'] = {
  center: new google.maps.LatLng(52.0224437, 0.2393275),
  population: 1000
};
citymap['Gloucester'] = {
  center: new google.maps.LatLng(51.864033, -2.2382369),
  population: 1000
};
citymap['LTQ'] = {
  center: new google.maps.LatLng(51.5250213, -0.141524),
  population: 18000
};
citymap['Enfield'] = {
  center: new google.maps.LatLng(51.651765, -0.0835785),
  population: 1000
};

html,
body,
#advisor-map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

Answer 2

这就是我要找的东西。地图还有汽车中心和变焦。希望这有助于某人！

h2.consult, h3.consult {

多个Google地图圈的信息窗口

2 个答案: