如何在 jquery-ui-map 中使用个性化图标答案

【问题标题】：How to use personalized icon with jquery-ui-map如何在 jquery-ui-map 中使用个性化图标
【发布时间】：2012-06-08 16:29:21
【问题描述】：

使用jquery-ui-map，我尝试使用个性化图标。我这样工作得很好：

$("#gmap_" + parent).gmap('addMarker', { 
    "id": "marker-"+m.id,
    'position': new google.maps.LatLng(m.lat, m.lon), 
    'bounds':true,
    'icon': '/images/'+m.icon
})

因为我的图标只是一个网址。但是我想把我所有的图标都放在一个精灵中，所以我必须设置其他选项：

$("#gmap_" + parent).gmap('addMarker', { 
    "id": "marker-"+m.id,
    'position': new google.maps.LatLng(m.lat, m.lon), 
    'bounds':true,
    'icon': new google.maps.MarkerImage( {
        'url' : "http://crm.brunet.pro/images/markers.png",
        'origin': new google.maps.Point(m.pos, 0),
        'size' : new google.maps.Size(20, 34)
    })
})

我收到此错误：

GET http://mysite.com/[object%20Object] 400 (Bad Request)

所以看起来图标选项只接受一个字符串。但是您可以在api 中看到它应该接受一个 MarkerImage 对象。

我做错了什么？

谢谢

【问题讨论】：

标签： jquery google-maps-api-3 jquery-ui-map

【解决方案1】：

MarkerImage 最多使用五个参数创建，例如 MarkerImage(myUrl, size1, point1, point2)，但您已将其编写为一个对象参数。

我确实认为 API 文档在这种情况下可能会令人困惑。看看这些例子：

https://developers.google.com/maps/documentation/javascript/overlays#ComplexIcons

  var image = new google.maps.MarkerImage('images/beachflag.png',
  // This marker is 20 pixels wide by 32 pixels tall.
  new google.maps.Size(20, 32),
  // The origin for this image is 0,0.
  new google.maps.Point(0,0),
  // The anchor for this image is the base of the flagpole at 0,32.
  new google.maps.Point(0, 32));

http://blog.mridey.com/2010/03/using-markerimage-in-maps-javascript.html（解释从精灵表加载）

size, origin, anchor 未提及，但您确实需要遵守 API 文档中给出的顺序。

【讨论】：