jQuery-在Google Maps API中更改名稱，經度和緯度位置的值

Question

我正在嘗試在我的網站上實現某個功能，該功能會在地圖旁邊顯示某些地點列表，當用戶在列表中選擇地點時，它會自動在地圖上設置Name, Longitude, and Latitude ，以便用戶識別在哪里它是。

不幸的是，如果用戶在列表中選擇其他位置，我將無法更改地圖中“名稱”，“經度”和“緯度”的值。

我提到了這個stackoverflow問題

到目前為止，我已經提出了這段代碼。

的HTML

    <div class="col-md-12">

    <div class="col-md-3">
        <div class="list-group">
            <a href="#" class="list-group-item" data-itemtype="['Maroubra Beach', '-33.950198', '151.259302']">Cras justo odio</a>
            <a href="#" class="list-group-item" data-itemtype="['Coogee Beach', '-33.923036', '151.259052']">Dapibus ac facilisis in</a>
            <a href="#" class="list-group-item" data-itemtype="['Cronulla Beach', '-34.028249', '151.157507']">Morbi leo risus</a>
            <a href="#" class="list-group-item" data-itemtype="['Manly Beach', '-33.80010128657071', '151.28747820854187']">Porta ac consectetur ac</a>
            <a href="#" class="list-group-item" data-itemtype="['Bondi Beach', '-33.890542', '151.274856']">Vestibulum at eros</a>
        </div>
    </div>

    <div class="col-md-9">
        <div id="map"></div>
    </div>

</div>


<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<script>

      // Note: This example requires that you consent to location sharing when
      // prompted by your browser. If you see the error "The Geolocation service
      // failed.", it means you probably did not give permission for the browser to
      // locate you.

    function initMap(mapLocation) {

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: new google.maps.LatLng(-33.92, 151.25),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

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

        var marker, i;

        for (i = 0; i < mapLocation; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(mapLocation[i][1], mapLocation[i][2]),
                map: map
            });
        }

    }

    $('.list-group-item').on('click', function (e) {

        var previous = $(this).closest(".list-group").children(".active");
        previous.removeClass('active'); // previous list-item
        $(e.target).addClass('active'); // activated list-item

        var locations = $('.list-group').find('.active').data('itemtype');

        initMap(locations);

    });

</script>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB3qsbdbcouUb6qSaBxQCuiEDI03JA-zLc&callback=initMap">
</script>

請幫助我跟上發展的步伐。

先感謝您

Answer 1

使用數據屬性的解決方案。 我稍微修改了您的數據屬性，因為使用...

data-itemtype="['Maroubra Beach', '-33.950198', '151.259302']"

...不會給您使用數組，只是一個看起來像數組的字符串。

HTML：

<div class="container">
 <div class="row">
  <div class="list-group col-sm-2">
          <a id="0" href="#" class="list-group-item" data-name='Maroubra Beach' data-lat='-33.950198' data-lng='151.259302'>Cras justo odio</a><br />
          <a id="1" href="#" class="list-group-item" data-name='Coogee Beach' data-lat='-33.923036' data-lng='151.259052'>Dapibus ac facilisis in</a><br />
          <a id="3" href="#" class="list-group-item" data-name='Cronulla Beach' data-lat='-34.028249' data-lng='151.157507'>Morbi leo risus</a>
  </div>
  <div class="col-sm-10">    
      <div id="map_canvas"></div>
  </div>
 </div>
</div>

Javacript：

(function(Mapping, $, undefined) {
    var self = this;

    function Initialize() {
        var myOptions = {
          zoom: 10,
            center: new google.maps.LatLng(-33.92, 151.25),
            mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      self.map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
      self.infoWindow = new google.maps.InfoWindow();

      $('.list-group-item').each(function() {
        var $this = $(this);
        var pos = new google.maps.LatLng($this.data('lat'), $this.data('lng'));
        var marker = new google.maps.Marker({
                        position: pos,
                        map: self.map
                      });

        $this.click(function() {
            self.map.panTo(pos);
            self.infoWindow.setContent($this.data('name'));
            self.infoWindow.open(self.map, marker);
            $this.siblings().removeClass('active');
            $this.addClass('active');
        });
      });
  }

  Initialize();
})(window.Mapping = window.Mapping || {}, jQuery);

JSFiddle