Question

提前感谢您的时间。我一直在使用一个非常简单的代码。我想添加一个侧面菜单来与谷歌地图api v3进行交互。这一切都运作良好，但所有添加的第一个标记都在点击时删除。

到目前为止，这是我进步的一个小提琴。请耐心等待我。我是一名先生。

CSS

html,body{
    height:100%;
}

#map-control{
    width:25%;
    height:100%;
    float:left;
}

#map-canvas{
    width:75%;
    height:100%;
    display:in-line;
    float:left;
}

#map-control > li{
    cursor:pointer;

}

HTML

<div id="map-control">
<li>
    <div id='marker_tittle'>ROSARITO1</div>
    <div>Content address</div><input type="hidden" value="0" />
</li>
<li>
    <div id='marker_tittle'>ROSARITO2</div>
    <div>Content address</div><input type="hidden" value="1" />
</li>
</div>

JQUERY

function initialize(lanx,lany,city,zoom){

var rosarito1 = "content1";
var rosarito2 = "content2";
var locations = [
      [rosarito1, 32.365812, -117.053999, 2],
      [rosarito2, 32.350816, -117.059851, 1]
    ];

var myLatlng = new google.maps.LatLng(lanx,lany);
var map = new google.maps.Map(document.getElementById('map-canvas'),      {
zoom: zoom,
center: myLatlng,
scrollwheel: false,
disableDefaultUI: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_BOTTOM
},
mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();
var marker, i;

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

google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));

var select_city = $("#map-control > li");
select_city.mouseenter(function(){
$(this).css({"background": "#d4cfbf"});
});
select_city.mouseleave(function(){
$(this).css({"background": "none"});
});

select_city.unbind("click").click(function(){
var value_branch = $(this).find("input").val();
var address_branch = locations[value_branch][0];
var lanx_branch = locations[value_branch][1];
var lany_branch = locations[value_branch][2];
marker.setPosition( new google.maps.LatLng(lanx_branch, lany_branch));
infowindow.setContent(address_branch);
infowindow.open(map, marker);
});

}

}

initialize(32.361672,-117.056201,'rosarito',10);

https://jsfiddle.net/cp4sws21/4/

Answer 1

您只能引用一个标记，并且您正在使用以下代码移动该标记：

select_city.unbind("click").click(function () {
    var value_branch = $(this).find("input").val();
    var address_branch = locations[value_branch][0];
    var lanx_branch = locations[value_branch][1];
    var lany_branch = locations[value_branch][2];
    marker.setPosition(new google.maps.LatLng(lanx_branch, lany_branch));
    infowindow.setContent(address_branch);
    infowindow.open(map, marker);
});

解决方案是保留一系列标记，使用该数组访问标记。

更新代码：

select_city.unbind("click").click(function () {
    var value_branch = $(this).find("input").val();
    var address_branch = locations[value_branch][0];
    google.maps.event.trigger(markers[value_branch]);
    infowindow.setContent(address_branch);
    infowindow.open(map, markers[value_branch]);
});

updated fiddle

代码段

＆＃13;

function initialize(lanx, lany, city, zoom) {
  var rosarito1 = "content1";
  var rosarito2 = "content2";
  var locations = [
    [rosarito1, 32.365812, -117.053999, 2],
    [rosarito2, 32.350816, -117.059851, 1]
  ];

  var myLatlng = new google.maps.LatLng(lanx, lany);
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: zoom,
    center: myLatlng,
    scrollwheel: false,
    disableDefaultUI: true,
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL,
      position: google.maps.ControlPosition.LEFT_BOTTOM
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var markers = [];
  var infowindow = new google.maps.InfoWindow();
  var marker, i;

  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
    markers.push(marker);
    var select_city = $("#map-control > li");
    select_city.mouseenter(function() {
      $(this).css({
        "background": "#d4cfbf"
      });
    });
    select_city.mouseleave(function() {
      $(this).css({
        "background": "none"
      });
    });

    select_city.unbind("click").click(function() {
      var value_branch = $(this).find("input").val();
      var address_branch = locations[value_branch][0];
      google.maps.event.trigger(markers[value_branch]);

      infowindow.setContent(address_branch);
      infowindow.open(map, markers[value_branch]);
    });

  }

}

initialize(32.361672, -117.056201, 'rosarito', 10);

＆＃13;

html,
body {
  height: 100%;
}
#map-control {
  width: 25%;
  height: 100%;
  float: left;
}
#map-canvas {
  width: 75%;
  height: 100%;
  display: in-line;
  float: left;
}
#map-control > li {
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-control">
  <li>
    <div id='marker_tittle'>ROSARITO1</div>
    <div>Content address</div>
    <input type="hidden" value="0" />
  </li>
  <li>
    <div id='marker_tittle'>ROSARITO2</div>
    <div>Content address</div>
    <input type="hidden" value="1" />
  </li>
</div>
<div id="map-canvas"></div>

＆＃13;

谷歌地图api v3链接正在删除标记

1 个答案: