setVisible在谷歌地图标记上

setVisible on google map markers

本文关键字:图标 地图 谷歌 setVisible      更新时间:2023-09-26

所以我用initialize()函数制作了谷歌地图,我希望它用addMarker()函数绘制标记,但将它们设置为不可见,这样我以后就可以使它们可见。但如果我在新的google.maps.Marker()中设置setVisible:false,它会同时显示它们,如果我设置为true,它只显示其中一个。怎样

这是我的代码:

    <!DOCTYPE html>
    <html>
      <head>
    <script src="http://maps.googleapis.com/maps/api/js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
    //varijable
    var restorani = [
        ['restoran 1',45.158457,18.0158902,'Prvi'],
        ['restoran 2',45.159457,18.0158902,'Drugi']
    ];
    var myCenter=new google.maps.LatLng(45.159457,18.0158902);
    var map;
    var i;
//initialize
    function initialize() {
      var mapProp = {
        center:new google.maps.LatLng(45.159457,18.0158902),
        zoom:13,
        mapTypeId:google.maps.MapTypeId.ROADMAP
      };
      map=new google.maps.Map(document.getElementById("map"),mapProp); 
    for(i=0;i<2;i++){
    addMarker(restorani[i]);
     }
  } 
google.maps.event.addDomListener(window, 'load', initialize);
//adding markers    
    function addMarker(marker) {
    var category = marker[0];
    var titl= marker[3];
    var pos = new google.maps.LatLng(marker[1], marker[2]); 
    var marker = new google.maps.Marker({
        position: pos,
        category: category,
        map: map,
        title: titl,
        setVisible:false //!!!!!!!!!!!!!!!!!!
    });
}   

    </script>
    </head>
<style>
          #map {
                width: 700px;
                height: 400px;
                float:right;
                border:2px solid black;
          }
    </style>
     </head>
      <body>
      <div id="map"></div>
      </body>
    </html>
属性名称是visible,而不是setVisible
function addMarker(marker) {
  var category = marker[0];
  var titl= marker[3];
  var pos = new google.maps.LatLng(marker[1], marker[2]); 
  var marker = new google.maps.Marker({
    position: pos,
    category: category,
    map: map,
    title: titl,
    visible:false
});

代码片段:

//varijable
var restorani = [
  ['restoran 1', 45.158457, 18.0158902, 'Prvi'],
  ['restoran 2', 45.159457, 18.0158902, 'Drugi']
];
var myCenter = new google.maps.LatLng(45.159457, 18.0158902);
var map;
var i;
//initialize
function initialize() {
  var mapProp = {
    center: new google.maps.LatLng(45.159457, 18.0158902),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map"), mapProp);
  for (i = 0; i < 2; i++) {
    addMarker(restorani[i]);
  }
}
google.maps.event.addDomListener(window, 'load', initialize);
//adding markers    
function addMarker(marker) {
  var category = marker[0];
  var titl = marker[3];
  var pos = new google.maps.LatLng(marker[1], marker[2]);
  var marker = new google.maps.Marker({
    position: pos,
    category: category,
    map: map,
    title: titl,
    visible: false
  });
}
google.maps.event.addDomListener(window, "load", initialize);
#map {
  width: 700px;
  height: 400px;
  float: right;
  border: 2px solid black;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map"></div>