Google Maps API - 点击圈子时打开信息窗口？ [英] Google Maps API - Get info window to open when clicking a circle?

查看：218
本文介绍了Google Maps API - 点击圈子时打开信息窗口？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图绝望地使用可点击打开infowindow的圈子来获取谷歌地图。这似乎并不像一个复杂的问题，但在网上搜索这似乎是不可能的，但我想知道，如果这些帖子是旧的，现在是可能的。



我正在尝试做什么我想要一个Google地图（我可以托管的HTML代码'在SharePoint上）与圈子在不同的位置（这一点是好的，迄今为止），我可以点击圆圈打开一个信息窗口与该地点的人的名单。



迄今为止所做的工作
我一直在寻找Google Maps JavaScript API页面并成功制作了一张地图使用此示例的圈子 https://developers.google.com/maps/ documentation / javascript / examples / circle-simple



我也尝试在地图的中心放置一个标记，其中infowindow不够理想但仍然可以接受，但是这并不奏效。我literaly只是削减了一部分的JavaScript做了一个标记和页面不会加载。



我的背景不幸的是，我不知道关于Javascript。我对HTML有一点了解，但我当然不是来自技术背景，我只是想要一张看起来不错并且工作正常的地图。我可以从字面上做一个字符，但我不知道JavaScript的意思。 。



 <！DOCTYPE html>< html xmlns：mso =urn：schemas-microsoft-com：office：officexmlns： MSDT = UUID：C2F41010-65B3-11d1-A29F-00AA00C14882 > < HEAD> < meta name =viewportcontent =initial-scale = 1.0，user-scalable = no> < meta charset =utf-8> < title>通讯地图< / title> <风格> 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> //此示例在地图上创建圆圈，表示//北美人口//首先，为每个城市创建一个包含LatLng和人口的对象.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，人口：2000}; citymap ['布鲁塞尔'] = {center：new google.maps.LatLng（50.8891268,4.4592719），population：1000}; citymap ['Crewe'] = {center：new google.maps .LatLng（53.0888925，-2.4357559），人口： 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），人口：5000}; citymap ['Wolverhampton'] = {center：new google.maps.LatLng（52.6375302， 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（）{//创建地图。 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）; //为城市地图中的每个值构造圆。 //注意：我们根据人口来调整圈子的面积。 （var city in citymap）{var populationOptions = {strokeColor：'＃FF0000'，strokeOpacity：0.8，strokeWeight：2，fillColor：'＃FF0000'，fillOpacity：0.35，map：map，center：citymap [city] .center ，半径：Math.sqrt（城市地图[city] .population）* 100}; //将该城市的圈子添加到地图。 cityCircle = new google.maps.Circle（populationOptions）; }} google.maps.event.addDomListener（window，'load'，initialize）; < /脚本> <！ -  [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]  -  GT;< /头> <身体GT; < div id =map-canvas>< / div> < / body>< / html>

解决方案 创建一个infowindow： var infowindow = new google.maps.InfoWindow（）; b

  • 设置其内容，位置，然后点击打开它： 

      google.maps.event.addListener （cityCircle，'click'，function（e）{
     infowindow.setContent（this.getCenter（）。toUrlValue（6）+< br>+ this.getRadius（））; 
     infowindow .setPosition（this.getCenter（））; 
     infowindow.open（map）; 
    }）;


    • working code snippet：



      //此示例在地图上创建圆圈，代表//北美人口//首先，为每个城市创建一个包含LatLng和人口的对象。 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， - 人口：2000}; citymap ['布鲁塞尔'] = {center：new google.maps.LatLng（50.8891268,4.492719），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 ['利物浦'] = {center：new google.maps.LatLng（53.4114691，-2.9954281），population：5000}; citymap ['Livingston'] = {center：new google.maps.LatLng（55.8889266，-3.5575676），人口： 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），人口：1000}; citymap ['Runcorn'] = {center：new go ogle.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， - 城市地图['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'] = {中心：新增google.maps.LatLng（51.5250213，-0.141524），人口：18000}; citymap ['Enfield'] = {center：new google.maps.LatLng（51.651765，-0.0835785），population：1000}; var cityCircle; var infowindow = new google.maps.InfoWindow（）; function initialize（ ）{//创建地图。 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）; //为城市地图中的每个值构造圆。 //注意：我们根据人口来调整圈子的面积。 （var city in citymap）{var populationOptions = {strokeColor：'＃FF0000'，strokeOpacity：0.8，strokeWeight：2，fillColor：'＃FF0000'，fillOpacity：0.35，map：map，center：citymap [city] .center ，半径：Math.sqrt（城市地图[city] .population）* 100}; //将该城市的圈子添加到地图。 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; < script src =https：//


    I'm trying desparately to get a google map with circles which can be clicked to open an infowindow. It really doesn't seem like a complicated ask but searching online it does't seem to be possible, but I'm wondering if those posts are old and it's now possible.

    What I'm trying to do I'm trying to have a google map (HTML code which I can 'host' on SharePoint) with circles in different locations (This bit is fine so far) where I can click the circle to open an info window with a list of people at that location.

    What I've done so far I've been looking at the google maps javascript API pages and successfully made a map with circles using this example https://developers.google.com/maps/documentation/javascript/examples/circle-simple

    I've also tried putting a marker at the centre of the map with an infowindow which is less than ideal but still acceptable, however this didn't work. I literaly just cut the part of the javascript which does a marker and the page wouldn't load.

    My Background Unfortunately I have no idea about Javascript. I know a little about HTML but I'm certainly not from a technical background, I just want a map which looks nice and works. I could literally be one character from making it work but I've no clue what javascript means. .

    <!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>

    解决方案

    1. Create an infowindow: var infowindow = new google.maps.InfoWindow();

    2. set its content, position and open it on a click:

      google.maps.event.addListener(cityCircle, 'click', function(e) {
  infowindow.setContent(this.getCenter().toUrlValue(6) + "<br>" + this.getRadius());
  infowindow.setPosition(this.getCenter());
  infowindow.open(map);
});

    working code snippet:

    // 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>

    这篇关于Google Maps API - 点击圈子时打开信息窗口？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

    查看全文
    相关文章
    前端开发最新文章
    热门教程
    热门工具
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆