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）。然后在创建标记时设置图标。

谷歌有不同的可以抓取，但网址并不容易找到。这是一个列出其中一些网站的网站：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;
}

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

Google Maps API V3和Javascript结果和标记

2 个答案: