Google Maps with Multiple Information in one marker

后端 未结 1 1896
無奈伤痛
無奈伤痛 2020-12-20 06:26

I am developing a web application that contains some information about place. That place may have more than one agenda. Can I show more information in one marker, such as st

相关标签:
1条回答
  • 2020-12-20 06:37

    Possible way to achieve it(there may be many ways):

    1. create some object at the begin of the callback of downloadUrl()
      var markerContents={};
    2. inside the loop where you create the markers populate this object with properties. As name for the properties assign the string-representation of the point(will be returned by LatLng.toString()). Create a variable of this string:

      var markerId = point.toString();

      First you have to check now if this property already exists, when not create it and set the value to an empty array:

      if(!markerContents[markerId]){
         markerContents[markerId] = [];
       } 

      Then, after the line where create the html, push the html into the array:

      markerContents[markerId].push(html);
    3. to avoid the creation of multiple markers at the same position, leave the current iteration before you create the marker, when there are more than 1 item inside the array:

      if(markerContents[markerId].length>1){return;}

    4. modify the call of bindInfoWindow(); , pass the array as argument instead of html

      bindInfoWindow(marker, map, infoWindow, markerContents[markerId]);
    5. Modify the click-listener of the Marker so that he may use the content of the array as InfoWindowContent

        function bindInfoWindow(marker, map, infoWindow, html) {
          google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html.join('<hr/>'));
            infoWindow.open(map, marker);
          });
        }

    There will no longer be multiple markers at the same position, instead there will be 1 marker with the content set to the html of all markers with this position, delimited by a horizontal rule.

    0 讨论(0)
提交回复
热议问题