Google Maps API V3 和 Javascript 结果和标记

Question

编辑：基本上就像 ASDA 商店定位器

我有一个商店定位器，当您输入邮政编码时，它会显示您附近的 3 家商店。从这 3 个标记出现在每个位置的地图上。数据是从 MYSQL 数据库中提取的，这是存储 lat 和 long 的地方。我所追求的是将结果编号为 1,2 和 3 以及带有数字 1 2 和 3 的不同标记，以便他们知道什么结果存储与什么标记相关。我知道如何创建标记，但我不确定如何应用它。这是我用来显示结果并在地图上显示标记的代码：

PHP

<?php which displays the results down the side of the map..
        if(isset($stores)){
            foreach($stores as $store){ ?>

            <div class="stores">
            <p class="name"><?php echo $store['name']; ?></p>
            <p class="address"><?php echo $store['address']; ?></p>
            <p class="address"><?php echo $store['postcode']; ?></p> 
            </div>

            <php number_format($store['distance'],2) ?> miles   

       <?php
          }
        }
        ?>

为了获得地图上每个结果的标记，我显然使用了 javascript：

function initialize() {

    var locations = [];     
    <?php
    $count = 0;
    foreach($stores as $store){
        ?>
        locations.push(['<?php echo $store['name'] ?>','<?php echo $store['lat'] ?>','<?php echo $store['lng'] ?>','<?php echo $count++; ?>']);
        <?php           
    }
    ?>

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 5,
        center: new google.maps.LatLng(55.136319, -2.504183),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
        marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });
    }

    google.maps.event.addListener(marker, 'click', (function() {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
    })(marker, i));
}
google.maps.event.addDomListener(window, 'load', initialize);

这会显示默认标记，但如果我要将每个标记声明为图像或颜色，我如何将其应用于每个结果的数组结果？任何指导将不胜感激。

Answer 1

标记具有icon 属性，您可以在其中更改使用的图像。我建议每个位置都有一个标记图标，名称中包含索引（例如 marker0.png、marker1.png、marker2.png）。然后在创建标记时设置图标。

Google 有不同的网址可供您抓取，但网址并不总是那么容易找到。这是一个列出其中一些的网站：http://jg.org/mapping/icons.html

  for (i = 0; i < locations.length; i++) {  
        marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        icon: "url/to/the/marker/marker" + i + ".png",
        map: map
      });
    }

Answer 2

我不久前使用以下方法做到了这一点。当我声明我使用的标记时。

var marker = createMarker(map,point,label,html,rank,type);

然后

function createMarker(map, latlng, title, html, rank,type) {
   var image = new google.maps.MarkerImage("images/goldPin.png",
    // This marker is 24 pixels wide by 37 pixels tall.
    new google.maps.Size(24, 37),
    // 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,37.
    new google.maps.Point(15, 20)); 

    var shadow = new google.maps.MarkerImage('images/goldPinShadow.png',
    // The shadow image is larger in the horizontal dimension
    // while the position and offset are the same as for the main image.
    new google.maps.Size(31, 37),
    new google.maps.Point(0,0),
    new google.maps.Point(15, 20));
    // Shapes define the clickable region of the icon.
    // The type defines an HTML <area> element 'poly' which
    // traces out a polygon as a series of X,Y points. The final
    // coordinate closes the poly by connecting to the first
    // coordinate.  

    var shape = {
        coord: [1, 1, 1, 20, 18, 20, 18 , 1],
        type: 'poly'
    };

    switch (type) {
        case "general":
            var markerOptions = {
            title: title,
            shadow: shadow,
            icon: image,
            shape: shape,
            position: latlng,
            map: map
        }
        break;
        /*
        more types go here
        */      
}

var marker = new google.maps.Marker(markerOptions);

google.maps.event.addListener(marker, "click", function() {
    var infowindowOptions = {
      content: html
    }
    var infowindow = new google.maps.InfoWindow(infowindowOptions);
        setInfowindow(infowindow);
        infowindow.open(map, marker);
});

google.maps.event.addListener(marker, "mouseover", function() {

});
google.maps.event.addListener(marker, "mouseout", function() {

});

    return marker;
}

让我不要忘记提及我在我的应用程序中使用了我强烈鼓励的自定义标记。