Question

我正在尝试创建一个在一列中包含谷歌地图的网站，在第二列中是一个包含位置元素的项目列表。点击其中一个项目，我想在谷歌地图中放一个图钉。我在更新谷歌地图上的标记时遇到问题。我可以在初始化地图时添加一个标记，但无法获取要删除的新标记。这是我的代码：https://gist.github.com/aarongirard/32f80f17e19d3e0389da。问题出现在click函数中的if else子句中。

任何帮助表示赞赏!!

//global variables //google map
var map;
var marker;
var currentMakerli;



function initialize() {
  //set latlng of starting window of map
  var mapOptions = {
    center: { lat: 34.073609, lng: -118.562313},
    zoom: 14,
  };
  //set map using above options and attach to given element
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  //construct new marker;  constructor takes an object with position and title properties

//get lat long for first marker
var latlng = new google.maps.LatLng(34.073514, -118.562348);
 marker = new google.maps.Marker({
  position: latlng,
  map: map,
  title: "Home"
});




  //on click of li add new marker or remove if marker already exists
  $(".DataList li").click(function(){
    //if current marker set to this already
    //remove marker
    if ( $(this).attr('id') === 'current') {
      marker.setMap(null);
      $(this).attr('id', '');
    } else {
      $(this).attr('id','current');
      var latlngarr = getLatLngFromString($(this).attr('data-position'));
      var lat = latlngarr[0];
      var lng = latlngarr[1];

      thisLatlng = new google.maps.LatLng(lat,lng);
      var marker = new google.maps.Marker({
        position: latlng,
        map: map,
      });

      //marker.setMap(map);
    }
  });

}

//set map
google.maps.event.addDomListener(window, 'load', initialize);



function getLatLngFromString(string){

  var array = string.split(',');
  array[0] = parseFloat(array[0]);
  array[1] = parseFloat(array[1]);
  return array;
}

Answer 1

您必须以能够获得<li>和标记之间关系的方式存储标记，例如通过$.data

简单的例子：

function initialize() {
  //set latlng of starting window of map
  var map = new google.maps.Map($('#map-canvas')[0], {
              center: { lat: 34.073609, lng: -118.562313},
              zoom: 14,
              disableDefaultUI:true
            }),
      home = new google.maps.Marker({
  position: { lat: 34.073514, lng: -118.562348},
  map: map,
  title: "Home",
  icon:'http://maps.google.com/mapfiles/arrow.png'
});

  map.controls[google.maps.ControlPosition.TOP_LEFT].push($(".DataList")[0]);


  //on click of li add new marker or remove if marker already exists
  $(".DataList li").click(function(){
    var that=$(this);
    //when there is no marker associated with the li we create a new
    if(!that.data('marker')){

      that.data('marker',new google.maps.Marker({position:(function(ll){
          return new google.maps.LatLng(ll[0],ll[1]);
        }(that.data('position').split(/,/)))}));
    
    }
    
    var marker=that.data('marker');
    //simply check the markers map-property to decide 
    //if the marker has to be added or removed
    if(marker.getMap()){
      that.removeClass('current');
      marker.setMap(null);
    }
    else{
      that.addClass('current');
      marker.setMap(map);
    }
  });

}

google.maps.event.addDomListener(window, 'load', initialize);

       html,body,#map-canvas{height:100%;margin:0;padding:0}
       .current{background:#f1f1f1;}
       .DataList{background:#fff;padding:0;}
       .DataList li{cursor:pointer;padding:4px;list-style-position:inside;}

<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<ul class="DataList">
  <li data-position="34.0717825, -118.567396">Santa Ynez Canyon Park</li>
  <li data-position="34.0787989, -118.572502">Palisades Country Estates</li>
  <li data-position="34.078375, -118.56098">Highland Recreation Center</li>
</ul>
<div id="map-canvas"></div>

与评论相关：

你没有搞乱变量名，我的例子使用的变量较少，但你可以在需要时使用更多的变量。

当我只需要访问一次对象时，我更愿意避免使用变量。

此处将创建标记（并存储为<li/>的属性）：

//when there is no marker associated with the li we create a new
if(!that.data('marker')){

  that.data('marker',new google.maps.Marker({position:(function(ll){
      return new google.maps.LatLng(ll[0],ll[1]);
    }(that.data('position').split(/,/)))}));

}

分割data-position - 属性的部分是：

(function(ll){
      return new google.maps.LatLng(ll[0],ll[1]);
}(that.data('position').split(/,/)))

这是一个所谓的“自执行匿名函数”，它返回所需的值（LatLng），该值将用作标记的position。 splitted data-position-attribute将用作此函数的参数

that.data('position').split(/,/)

getMap()会返回map - 已设置的属性，google.maps.Map - 实例或null（当您要删除标记或属性时）没有设定）。虽然它不是布尔值，但它的结果是true（当它是map时）或false（当它是null时），因此它可以用作条件。

that - 变量始终是一个新变量，这是正确的，但它始终是对同一个对象的引用，即单击的<li/>。标记已存储为此对象的属性。

在点击时动态添加标记到谷歌地图

1 个答案:

与评论相关：