javascript - Google map 标记指向右侧

Question

我正在尝试向 map 添加两个标记。代码如下:

    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'
    });

我的问题是，是否可以使其中一个标记指向右侧，这样它就不会隐藏在第一个标记后面？像这样的事情:


标记1
标记 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>