Question

我是JS的新手，但我希望得到一张自定义地图。我已经处理了两个渲染地图的脚本：One with the drop animation (maptest1)，one with the custom markers (maptest2)。

单独地，它们都很好用，但我似乎无法弄清楚如何实现动画 AND 自定义标记。我知道drop和addMarker函数正在maptest1中执行动画。我试图将这些函数与maptest2中的代码集成，但我似乎无法使其工作。

非常感谢任何见解！

maptest1：（放置动画）

var locations = [
  new google.maps.LatLng(47.578033, -122.288116, 1),
  new google.maps.LatLng(47.675625, -122.304115, 2),
  new google.maps.LatLng(47.681580, -122.355278, 3)
];
var markers = [];
var iterator = 0;
function initialize() {
  drop();
  var mapOptions = {
    zoom: 12,
    panControl: false,
    zoomControl: true,
    scaleControl: false,
    streetViewControl: false,
    overviewMapControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(47.63,-122.33),
  };
  map = new google.maps.Map(document.getElementById("map_canvas"),
          mapOptions);
}
function drop() {
  for (var i = 0; i < locations.length; i++) {
    setTimeout(function() {
      addMarker();
    }, i * 200);
  }
}
function addMarker() {
  markers.push(new google.maps.Marker({
    position: locations[iterator],
    map: map,
    draggable: false,
    animation: google.maps.Animation.DROP
  }));
  iterator++;
}

maptest2：（自定义标记）

function initialize() {
  var mapOptions = {
    zoom: 12,
    panControl: false,
    zoomControl: true,
    scaleControl: false,
    streetViewControl: false,
   overviewMapControl: false,
    center: new google.maps.LatLng(47.63,-122.33),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
  setMarkers(map, studios);
}
var studios = [
  ['Mount Baker', 47.578033, -122.288116, 3],
  ['Ravenna', 47.675625, -122.304115, 2],
  ['Phinney', 47.681580, -122.355278, 1]
];

function setMarkers(map, locations) {
  var image = new google.maps.MarkerImage('mapimages/image.png',
      new google.maps.Size(30, 52),
      new google.maps.Point(0,0),
      new google.maps.Point(15, 52));
  var shadow = new google.maps.MarkerImage('mapimages/shadow.png',
      new google.maps.Size(60, 52),
      new google.maps.Point(0,0),
      new google.maps.Point(15, 52));
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var studio = locations[i];
    var myLatLng = new google.maps.LatLng(studio[1], studio[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: studio[0],
        zIndex: studio[3]
    });
  }
}

修改

If anyone is wondering, using Ryan's additions to the script here it working currently.

Answer 1

您可以将其添加到addMarker（）

中的maptest1.html

var image = new google.maps.MarkerImage('mapimages/image.png',
    new google.maps.Size(30, 52),
    new google.maps.Point(0,0),
    new google.maps.Point(15, 52));
var shadow = new google.maps.MarkerImage('mapimages/shadow.png',
    new google.maps.Size(60, 52),
    new google.maps.Point(0,0),
    new google.maps.Point(15, 52));
var shape = {
    coord: [1, 1, 1, 20, 18, 20, 18 , 1],
    type: 'poly'
};

并改变这一点：

markers.push(new google.maps.Marker({
    position: locations[iterator],
    map: map,
    draggable: false,
    animation: google.maps.Animation.DROP
  }));

到此：

markers.push(new google.maps.Marker({
    position: locations[iterator],
    map: map,
    draggable: false,
    animation: google.maps.Animation.DROP,
    shadow: shadow,
    icon: image,
    shape: shape,
  }));

我认为会起作用。

带有自定义Google地图标记/投放动画的Javascript

1 个答案: