google-maps - 向谷歌地图添加标记不起作用

Question

var marker1 = new google.maps.Marker({
    position: new google.maps.LatLng(53.385846,-1.471385), 
    map: map,       
    icon: { url:'images/markers.png', size:{height:37,width:32},origin:{x:32,y:0},anchor:{x:15,y:35}
                            },
    draggable:true
}); 

我使用此代码将标记添加到 Google 地图，但它不起作用。当我将draggable参数值从更改true为 时false，它可以工作。

它是谷歌地图中的错误吗？

Answer 1

The definition of an Icon defines it in terms of google.maps.Point and google.maps.Size objects, not anonymous javascript objects as in the code example. Note the Icon class is a replacement for the newly deprecated MarkerImage class.

anchor Point

origin Point

scaledSize Size

size Size

This might work better (not tested):

var marker1 = new google.maps.Marker({
  position: new google.maps.LatLng(53.385846,-1.471385), 
  map: map,       
  icon: { 
          url:'images/markers.png', 
          size: new google.maps.Size(37,32},
          origin: new google.maps.Point(32,0),
          anchor: new google.maps.Point(15,35)
        },
  draggable:true
}); 

working example

code snippet:

var map;
var triangle = null;
var myLatLng = new google.maps.LatLng(53.385846, -1.471385);

function initialize() {

  var mapOptions = {
    center: myLatLng,
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  var marker1 = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: {
      url: 'http://www.geocodezip.com/mapIcons/marker1.png',
      size: new google.maps.Size(20, 34),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(10, 34)
    },
    draggable: true
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map_canvas {
  margin: 0;
  padding: 0;
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="height: 400px; width:500px;"></div>