Google Maps JavaScript API v3中每个位置的不同标记

时间:2014-08-19 19:09:46

标签: javascript google-maps google-maps-api-3 google-maps-markers

Noob在这里,尝试做一些简单但复杂的事情。在this page我成功地将一个特定大小的红色52放在我想要的位置。我通过对Google Developers网站上无疑看起来很熟悉的代码示例进行了自己的更改来完成此操作:

  function initialize() {
  var mapOptions = {
    zoom: 12,
    center: new google.maps.LatLng(-38.153470, 145.141425)
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'),
                                mapOptions);
  var image = 'http://pollbludger.0catch.com/numbers/alp-52-07.png';
  var myLatLng = new google.maps.LatLng(-38.148594, 145.126124);
  var beachMarker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

我现在要做的是在地图上的不同点添加九个其他标记,每个标记在某种程度上与其他标记不同。就像我的红色52一样,我建议使用的每个标记都有自己的PNG存储在pollbludger.0catch.com。我可以通过顺序编码每个标记来实现这一点,而不是让它经历一个循环吗?

1 个答案:

答案 0 :(得分:0)

您需要将属性“icon”与“url”属性一起使用,并在“position”中更改新坐标。使用大小为32x32的图标。

如果您不知道如何获取位置,请使用此示例并复制值lat,lng

 var beachMarker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon : {
            url: 'img/yourimageurl.png',//full path of your image
            scaledSize: new google.maps.Size(30,40)//this control the size of your icon
        }  
  });