Question

使用以下代码成功创建了带有自定义HTML标记的google地图，现在我完全不知道如何重复此功能来创建多个标记。我已经在此代码上尝试了多种变体，包括使每个可能的变量都涉及唯一但无济于事。我在这里做什么错了？

初始地图：

  // Import Style JSON
  var styleVar = []; $.getJSON('json/map-style.json', function (data) { $.each(data, function (key, value) { styleVar.push(value) }) });

  // Define Position
  var myLatLng = new google.maps.LatLng(41.97, -71.88);

  // Init Map
  var map = new google.maps.Map(document.getElementById('map-container'), {
    center: myLatLng,
    zoom: 9,
    maxZoom: 12,
    minZoom: 9,
    styles: styleVar,
    mapTypeId: google.maps.MapTypeId.READMAP
  });

创建标记：（有效）

  // Create Marker
  function HTMLMarker1(lat1,lng1){ 
    this.lat1 = lat1; 
    this.lng1 = lng1; 
    this.pos1 = new google.maps.LatLng(lat1,lng1); 
  }

  HTMLMarker1.prototype = new google.maps.OverlayView();
  HTMLMarker1.prototype.onRemove = function(){}

  HTMLMarker1.prototype.onAdd = function(){
      div1 = document.createElement('DIV');
      div1.className = "marker-div";
      div1.innerHTML = "<div class='marker-inner'></div>";
      var panes1 = this.getPanes();
      panes1.overlayImage.appendChild(div1);
  }

  HTMLMarker1.prototype.draw = function(){
      var overlayProjection1 = this.getProjection();
      var position1 = overlayProjection1.fromLatLngToDivPixel(this.pos1);
      var panes1 = this.getPanes();
      panes1.overlayImage.style.left = position1.x + 'px';
      panes1.overlayImage.style.top = position1.y - 30 + 'px';
  }

  markerLat1 = '42.3';
  markerLng1 = '-72.88';
  var htmlMarker1 = new HTMLMarker1(markerLat1, markerLng1);
  htmlMarker1.setMap(map);

第二个标记：（不起作用）

  // Create Marker
  function HTMLMarker2(lat2,lng2){ 
    this.lat2 = lat2; 
    this.lng2 = lng2; 
    this.pos2 = new google.maps.LatLng(lat2,lng2); 
  }

  HTMLMarker2.prototype = new google.maps.OverlayView();
  HTMLMarker2.prototype.onRemove = function(){}

  HTMLMarker2.prototype.onAdd = function(){
      div2 = document.createElement('DIV');
      div2.className = "marker-div";
      div2.innerHTML = "<div class='marker-inner'></div>";
      var panes2 = this.getPanes();
      panes2.overlayImage.appendChild(div2);
  }

  HTMLMarker2.prototype.draw = function(){
      var overlayProjection2 = this.getProjection();
      var position2 = overlayProjection2.fromLatLngToDivPixel(this.pos2);
      var panes2 = this.getPanes();
      panes2.overlayImage.style.left = position2.x + 'px';
      panes2.overlayImage.style.top = position2.y - 30 + 'px';
  }

  markerLat2 = '41.3';
  markerLng2 = '-71.88';
  var htmlMarker2 = new HTMLMarker2(markerLat2, markerLng2);
  htmlMarker2.setMap(map);

这样的结果是显示两个标记，但是定位出错，第二个标记被“粘合”到第一个标记，两个标记都在定位后者。.

Answer 1

经过进一步的挖掘，我在这里找到了另一个直接解决这个问题的问题-

Google Maps: Multiple Custom HTML Markers

希望对其他人有帮助，我会在我的示例中发布完整的代码，但是可以使用数组等使它变得更苗条（请参见此处以参考：https://codepen.io/bipin_peter/pen/PNXNpw ）

希望这会有所帮助！

  // Create Marker
  function HTMLMarker(lat,lng){ 
    this.lat = lat; 
    this.lng = lng; 
    this.pos = new google.maps.LatLng(markerLat,markerLng); 
  }

  HTMLMarker.prototype = new google.maps.OverlayView();
  HTMLMarker.prototype.onRemove = function(){}

  HTMLMarker.prototype.onAdd = function(){
      this.div = document.createElement('DIV');
      this.div.className = "marker-div";
      this.div.innerHTML = "<div class='marker-inner'></div>";
      this.div.style.position='absolute';
      var panes = this.getPanes();
      panes.overlayImage.appendChild(this.div);
  }

  HTMLMarker.prototype.draw = function(){
      var overlayProjection = this.getProjection();
      var position = overlayProjection.fromLatLngToDivPixel(this.pos);
      var panes = this.getPanes();
      this.div.style.left = position.x + 'px';
      this.div.style.top = position.y + 'px';
  }
  markerLat = '41.3';
  markerLng = '-73.88';
  var htmlMarker = new HTMLMarker(markerLat, markerLng);
  htmlMarker.setMap(map);


  // Create Marker
  function HTMLMarker1(lat,lng){ 
    this.lat = lat; 
    this.lng = lng; 
    this.pos = new google.maps.LatLng(markerLat1,markerLng1); 
  }

  HTMLMarker1.prototype = new google.maps.OverlayView();
  HTMLMarker1.prototype.onRemove = function(){}

  HTMLMarker1.prototype.onAdd = function(){
      this.div1 = document.createElement('DIV');
      this.div1.className = "marker-div";
      this.div1.innerHTML = "<div class='marker-inner'></div>";
      this.div1.style.position='absolute';
      var panes = this.getPanes();
      panes.overlayImage.appendChild(this.div1);
  }

  HTMLMarker1.prototype.draw = function(){
      var overlayProjection = this.getProjection();
      var position = overlayProjection.fromLatLngToDivPixel(this.pos);
      var panes = this.getPanes();
      this.div1.style.left = position.x + 'px';
      this.div1.style.top = position.y + 'px';
  }
  markerLat1 = '40.3';
  markerLng1 = '-72.88';
  var htmlMarker1 = new HTMLMarker1(markerLat1, markerLng1);
  htmlMarker1.setMap(map);

在Google地图上使用多个HTML标记定位错误

1 个答案: