0

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

我一直在使用 google maps 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>
4

2 回答 2

0

您可以创建一个 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)
    });
}
于 2013-08-07T05:59:28.517 回答
0

我尝试创建一个图像对象列表，并向每个数组添加一个额外的元素，该元素命名要从该列表对象加载的图像类型，我还添加了代码行以添加一个信息框

<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>
于 2014-07-18T14:08:52.463 回答