Как передать параметры в initmap Google Maps в XSLT?

Question

Я пытаюсь получить положение, получая широту и долготу из XML-документа через таблицу стилей xslt.Я сделал переменные xslt, которые возвращают правильную широту и долготу, когда я их вызываю (например, с помощью xsl: value-of).Но я не могу получить доступ к тем же переменным во фрагменте JavaScript.Из того, что я прочитал, можно вызвать переменную xslt внутри javascript.Так что я не знаю, что я делаю неправильно.

Вот мой код:

                                        <xsl:for-each-group select="MBMDVRs/LocatorInfo" group-by="string-join((LocationAddr/StreetNum, ' ', LocationAddr/StreetName, ' ', LocationAddr/City, ' ', LocationAddr/StateProv, ' ', LocationAddr/PostalCode), '!')">
                                                <tr style="border-collapse:collapse; font-size:inherit; text-align:center; " class="wide">
                                                    <td class="rownr{(position() + 1) mod 2}" style="width:0.95in; ">
                                                    </td> 
                                                    <td class="rownr{(position() + 1) mod 2}" style="width:2.57in; "> 
                                        <xsl:value-of select="LocationAddr/StreetNum, ' ',  LocationAddr/StreetName, ' ', LocationAddr/mbg:City,  ' ' , LocationAddr/StateProv, LocationAddr/PostalCode" />&#160;&#160;


                                <xsl:variable name="Latitude" select="LocationAddr/GEOCode/mbg:Latitude"/>
                                <xsl:variable name="Longitude" select="LocationAddr/mbg:GEOCode/Longitude"/>
                                <script>
                            function initMap(){
                                var location = {lat: parseFloat("<xsl:value-of select="$Latitude"/>"), 
                                lng: parseFloat("<xsl:value-of select="$Longitude"/>")};
                                var map = new google.maps.Map(document.getElementById("map"), {zoom: 15, center: location

                            });
                            var marker = new google.maps.Marker({
                            position: location, 
                            map: map
                            });
                    }
                            </script>
                                                        <a href="#" onclick="initMap()">Street View</a>
                                                    </td>
                                                    <td class="rownr{(position() + 1) mod 2}" style="width:1.82in; "> 
                                                        <xsl:copy-of select="(//LocationTimestamp)[last()]"/>
                                                    </td>
                                                    <td class="rownr{(position() + 1) mod 2}" style="width:1.82in; ">
                                                        <xsl:copy-of select="(//LocationTimestamp)[1]"/>
                                                    </td>
                                                    <td class="rownr{(position() + 1) mod 2}" style="width:2.27in; ">
                                                         <xsl:value-of select="count(current-group())" />
                                                    </td>
                                                </tr>
                                                   </xsl:for-each-group>
                                    </tbody>
                                </table>

Я пытаюсь отобразить результат в этом div:

И используйте эту ссылку:

И используйте этот XML:

<LocatorInfo>
    <LocationAddr>
      <StreetNum>187</StreetNum>
      <StreetName>Eastern Avenue</StreetName>
      <City>Fall River</City>
      <StateProv>MA</StateProv>
      <PostalCode>02723</PostalCode>
      <Country>USA</Country>
      <GEOCode>
        <Latitude>41.694600119635915</Latitude>
        <Longitude>-71.13038416718094</Longitude>
      </GEOCode>
    </LocationAddr>
    <LocationTimestamp>4/7/2018 7:00:03 AM</LocationTimestamp>
    <LocationDistance>4.338 miles</LocationDistance>
    <Accuracy>1.985 miles</Accuracy>
  </LocatorInfo>

Answer 1

Я думаю, вам нужно изменить свой код Javascript, чтобы иметь функцию, которую вы можете вызывать для создания соответствующей карты и маркера, поэтому вне любой группировки вы помещаете

            <script>
            function showMap(targetElement, location) {
              var map = new google.maps.Map(targetElement, { zoom: 15, center: location });
              var marker = new google.maps.Marker({
                position: location, 
                map: map
              });
            }
            </script>

, а затем внутри используемой вами группы

 <a href="#" onclick="showMap(document.getElementById('map'), {{ lat: {GEOCode/Latitude}, lng: {GEOCode/Longitude} }}); return false;">Street View</a>

Это должно решить проблему, я думаю, с точки зрения взаимодействия XSLT и сгенерированного кода скрипта в HTML-документе.

Я не знаю, будет ли проще / быстрее не использовать new google.maps.Map каждый раз, когда вызывается функция, и вместо этого возможно только переместить центр и маркер (или удалить существующий маркер и создать новый) в изначально созданной карте, но вот как можно реализовать этот первый блок сценария:

            <script>
            var map = null;
            var marker = null;

            function showMap(targetElement, location) {
              if (map != null) {
                  map.setCenter(location);
                  marker.setPosition(location);
              }
              else {
                  map = new google.maps.Map(targetElement, { zoom: 15, center: location });
                  marker = new google.maps.Marker({
                    position: location, 
                    map: map
                  });
              }
            }
            </script>