谷歌地图API V3和Javascript结果和标记

Google Maps API V3 and Javascript Results and Markers

本文关键字：结果 Javascript V3 谷歌地图 API      更新时间：2023-09-26

编辑:基本上像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);

这显示了默认的标记，但如果我要声明每个标记一个图像或颜色，我如何将它应用到每个结果的数组结果?

标记有一个图标属性，您可以在其中更改所使用的图像。我建议为每个位置添加一个标记图标，并在名称中添加索引(例如:marker0.png, marker1.png, marker2.png)。然后在创建标记时设置图标。

谷歌有不同的你可以抓取，但url不是那么容易找到所有的时间。下面是一个网站，列出了其中一些: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
      });
    }

我以前用下面的方法做过这个。当我声明我的标记时，我使用。

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;
}

让我不要忘记提一下，我在我的应用程序中使用了自定义标记，我强烈建议。

相关文章：