我绝望地试图获得一个带有圆圈的谷歌地图，可以点击它来打开一个信息窗口。它看起来似乎并不是一个复杂的问题，但在线搜索它似乎是不可能的，但我想知道这些帖子是否已经过时，现在可能了。
我想做什么 我试图在不同的位置设置一个谷歌地图（我可以在SharePoint上托管的HTML代码），并且圈子位于不同的位置（到目前为止，此位很好），我可以点击该圈打开一个信息窗口，其中包含该位置的人员列表。
到目前为止我做了什么 我一直在查看google地图javascript API页面，并使用此示例https://developers.google.com/maps/documentation/javascript/examples/circle-simple
成功制作了一个带圆圈的地图我还尝试在地图中心放置一个标记，其信息不太理想，但仍然可以接受，但这并不起作用。我只是削减了javascript的一部分，它做了一个标记，页面无法加载。
我的背景很遗憾我不了解Javascript。我对HTML有一点了解，但我当然不是来自技术背景，我只想要一张看起来不错且有效的地图。我可以将其作为一个字符，但是我不知道javascript的意思。
<!DOCTYPE html>
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Newsletter Map</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
// This example creates circles on the map, representing
// populations in North America.
// First, create an object containing LatLng and population for each city.
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
};
var cityCircle;
function initialize() {
// Create the map.
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(53.3789721,-1.4693043),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 100
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(populationOptions);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:_dlc_DocId msdt:dt="string">FQNCM6NFZFN7-2543-7</mso:_dlc_DocId>
<mso:_dlc_DocIdItemGuid msdt:dt="string">a9ec8002-9354-4aef-9bbe-aac4a1d8f794</mso:_dlc_DocIdItemGuid>
<mso:_dlc_DocIdUrl msdt:dt="string">https://sp.myatos.net/ms/uki/bs/bo/_layouts/DocIdRedir.aspx?ID=FQNCM6NFZFN7-2543-7, FQNCM6NFZFN7-2543-7</mso:_dlc_DocIdUrl>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
答案 0 :(得分：0)
var infowindow = new google.maps.InfoWindow(); 设置其内容，位置并点击一下打开：
google.maps.event.addListener(cityCircle, 'click', function(e) {
infowindow.setContent(this.getCenter().toUrlValue(6) + "<br>" + this.getRadius());
infowindow.setPosition(this.getCenter());
infowindow.open(map);
});
工作代码段：
// This example creates circles on the map, representing
// populations in North America.
// First, create an object containing LatLng and population for each city.
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
};
var cityCircle;
var infowindow = new google.maps.InfoWindow();
function initialize() {
// Create the map.
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(53.3789721, -1.4693043),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 100
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(populationOptions);
google.maps.event.addListener(cityCircle, 'click', function(e) {
infowindow.setContent(this.getCenter().toUrlValue(6) + "<br>" + this.getRadius());
infowindow.setPosition(this.getCenter());
infowindow.open(map);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>