Question

我正在尝试将两个标记添加到地图中。这是代码：

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        map: map,
        visible: true,
        icon: 'images/pin-1.png'
    });
    //add the extra marker
    newPos = new google.maps.LatLng(lat2, lng2)
    marker = new google.maps.Marker({
        position: newPos,
        map: map,
        visible: true,
        icon: 'images/pin-2.png'
    });

我的问题是，是否有可能使其中一个标记指向右侧，因此它不会隐藏在第一个标记后面？像这样：

Marker 1 Marker 2 ____ ____ | | | | |____| | |> o o |____|

任何人都可以给予的任何帮助表示赞赏！

Answer 1

您可以制作SVG图标并旋转它们。下面的代码用“4个箭头”围绕“点”，每个箭头从主要方向指向它：

var marker0 = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
        path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
        scale: 5
    },
    draggable: true,
    map: map
});
var marker1 = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        scale: 5,
        rotation: 90,
        anchor: new google.maps.Point(0, 0)
    },
    draggable: true,
    map: map
});
var marker2 = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        scale: 5,
        rotation: -90,
        anchor: new google.maps.Point(0, 0)
    },
    draggable: true,
    map: map
});
var marker3 = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
        path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
        scale: 5,
        rotation: 180,
        anchor: new google.maps.Point(0, 0)
    },
    draggable: true,
    map: map
});

示例代码段：

function initialize() {
  var mapOptions = {
    zoom: 14,
    center: new google.maps.LatLng(-25.363882, 131.044922)
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var marker0 = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
      path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
      scale: 5
    },
    draggable: true,
    map: map
  });
  var marker1 = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
      strokeColor: 'green',
      path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
      scale: 5,
      rotation: 90,
      anchor: new google.maps.Point(0, 0)
    },
    draggable: true,
    map: map
  });
  var marker2 = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
      strokeColor: 'red',
      path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
      scale: 5,
      rotation: -90,
      anchor: new google.maps.Point(0, 0)
    },
    draggable: true,
    map: map
  });
  var marker3 = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
      strokeColor: 'blue',
      path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
      scale: 5,
      rotation: 180,
      anchor: new google.maps.Point(0, 0)
    },
    draggable: true,
    map: map
  });
  /* var marker = new google.maps.Marker({
      position: map.getCenter(),
      map: map
  }); */
}

google.maps.event.addDomListener(window, 'load', initialize);

html, body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map-canvas" style="height:100%;width:100%;"></div>

Answer 2

我还没有尝试做过这样的事情，但我可以建议玩 origin 属性og Icon对象https://developers.google.com/maps/documentation/javascript/reference#Icon

Answer 3

Google地图使用经度和纬度来定位标记。截至今天，Map API中没有这样的参数来对齐指针。

您可以更改自定义图标以对齐指针。确保在另一侧有一些透明空间，因为图像放在中心。

Google地图标记指向右侧

3 个答案: