Question

我正在为一些度假住宿开发一个网站（这是我的第一个网站开发）。

我一直在使用谷歌地图api V3的位置页面，并希望进一步。目前我只有两个自定义标记 - 但是想扩展它，所以我有大约20个，以显示该区域的各种事情。这些将分为“家庭”和“购物”等类别，每个类别都有不同的标记图标。所以我需要说5种不同的图标样式，每种样式在4个不同的位置。除此之外，我将需要一个信息框，当点击标记时将弹出信息框，并在点击另一个标记时消失。

我是javascript的新手，它对我来说看起来仍然很复杂，所以如果有人能解释如何做到这一点，我将不胜感激。下面的当前代码以及当前的外观如下：http://www.upthorpelodges.co.uk/test/location.html

<script type="text/javascript">

  function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(52.316, 0.901),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);

setMarkers(map, lodge);
}

var lodge = [
  ['Lodges', 52.316, 0.901],
  ['Other', 52, 1],
];

function setMarkers(map, locations) {

var image = {
    url: 'http://s20.postimg.org/kq92v5uqh/homepin.png',


 size: new google.maps.Size(32, 45),
    origin: new google.maps.Point(0,0),
    anchor: new google.maps.Point(16, 45)
  };

  var shadow = {
    url: 'http://s20.postimg.org/65s00bzrt/homepin_shadow.png',
    size: new google.maps.Size(36, 23),
    origin: new google.maps.Point(0,0),
    anchor: new google.maps.Point(4, 23)
  };


var shape = {
      coord: [16, 0, 0, 16, 16, 45, 32 , 16],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {

    var lodge = locations[i];

    var myLatLng = new google.maps.LatLng(lodge[1], lodge[2]);

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: lodge[0],
        zIndex: lodge[3]
    });
}
      }

      google.maps.event.addDomListener(window, 'load', initialize);

    </script>

Answer 1

您可以创建一个json对象的json对象，您可以在其中保留自定义图像。像这样的东西

customImgObj = {
    'family'  : {'image' : YOUR_IMAGE_GOES_HERE, 'shadow' : YOUR_SHADOW_GOES_HERE},
    'couples' : {'image' : YOUR_IMAGE_GOES_HERE, 'shadow' : YOUR_SHADOW_GOES_HERE},
    'other'   : {'image' : YOUR_IMAGE_GOES_HERE, 'shadow' : YOUR_SHADOW_GOES_HERE}
};

然后你有你的位置数组，你可以保留一个额外的元素，这是标记的类型。

var locations = [
  ['Lodges', 52.316, 0.901, 'family'],
  ['Other', 52, 1, 'couples']
];

你可以像这样访问它

for (var i = 0; i < locations.length; i++) {

    var lodge = locations[i];

    var myLatLng = new google.maps.LatLng(lodge[1], lodge[2]);

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: customImgObj[lodge[3]].shadow,
        icon: customImgObj[lodge[3]].image,
        shape: shape,
        title: lodge[0],
        zIndex: lodge[3]  //<--- where do you keep this? In your locations array there are only three element (0, 1, 2)
    });
}

Answer 2

我开始创建一个图像对象列表，并为每个数组添加了一个额外的元素，用于命名要从该列表对象加载的图像类型，我还添加了代码行来添加信息框

<script type="text/javascript">

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(-37.7836, 144.580),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);

    setMarkers(map, lodge);
}

var lodge = [
  ['First marker', -37.7836, 144.580, 4, 'two'],
  ['Second marker', -37.8136, 144.590, 5, 'one'],
  ['Third marker', -37.9456, 144.600, 3, 'three'],
  ['Fourth marker', -37.9234, 144.580, 2, 'four'],
  ['Fifth marker', -37.8136, 144.610, 1, 'five']
];

function setMarkers(map, locations) {

    var imageList = {};

    imageList['one'] = {
        url: 'images/number_0.png',
        size: new google.maps.Size(32, 37),
        origin: new google.maps.Point(0,0),
        anchor: new google.maps.Point(0, 32)
    };
    imageList['two'] = {
        url: 'images/number_1.png',

        size: new google.maps.Size(32, 37),
        origin: new google.maps.Point(0,0),
        anchor: new google.maps.Point(0, 32)
    };
    imageList['three'] = {
        url: 'images/number_2.png',
        size: new google.maps.Size(32, 37),
        origin: new google.maps.Point(0,0),
        anchor: new google.maps.Point(0, 32)
    };
    imageList['four'] = {
        url: 'images/number_3.png',
        size: new google.maps.Size(32, 37),
        origin: new google.maps.Point(0,0),
        anchor: new google.maps.Point(0, 32)
    };
    imageList['five'] = {
        url: 'images/number_4.png',
        size: new google.maps.Size(32, 37),
        origin: new google.maps.Point(0,0),
        anchor: new google.maps.Point(0, 32)
     };

     var shape = {
         coord: [16, 0, 0, 16, 16, 45, 32 , 16],
         type: 'poly'
     };

     var contentString = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">Start </h1>'+
        '<div id="bodyContent">'+
        '<p><b>Editable on hover</b></p>'+
         '(last visited June 22, 2009).</p>'+
         '</div>'+
         '</div>';

     var infowindow = new google.maps.InfoWindow({
         content: contentString
     });

    for (var i = 0; i < locations.length; i++) {
        var lodge = locations[i];
        var myLatLng = new google.maps.LatLng(lodge[1], lodge[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: imageList[lodge[4]],
            shape: shape,
            title: lodge[0],
            zIndex: lodge[3]
        });
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, this);
        });
    }
}
</script>

添加多个不同的复杂图标和信息框到谷歌地图api V3

2 个答案: