Question

我使用以下PHP函数（主要是在Javascript中），以便使用Google Maps Javascript API显示一些地图。

$companyLocations是一个带有地址和纬度和纵向的数组。例如：

$companyLocations = array(
            array('Bondi Beach', -33.890542, 151.274856),
            array('Coogee Beach', -33.923036, 151.259052),
            array('Cronulla Beach', -34.028249, 151.157507),
            array('Manly Beach', -33.80010128657071, 151.28747820854187),
            array('Maroubra Beach', -33.950198, 151.259302)
        );

$width是div的宽度。
$height是div的高度。

我的代码：

function showMap($companyLocations, $width, $height) {
    ?>
        <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

        <!-- Show map with given height and width -->
        <div id="map" style="width:<?php echo $width?>;height:<?php echo $height?>;"></div>

        <script type="text/javascript">
          <?php
              // Convert the php array '$companyLocations' into Javascript array 'locations'
              $js_LocationsArray = json_encode($companyLocations);
           ?>
              var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 10,
                    center: new google.maps.LatLng(-33.92, 151.25),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
              });

              var infowindow = new google.maps.InfoWindow();
              var bounds = new google.maps.LatLngBounds();
              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
                    });

                    bounds.extend(marker.position);

                    google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
                                    infowindow.setContent(locations[i][0]);
                                    infowindow.open(map, marker);
                                                }
                              })(marker, i));
              }
              map.fitBounds(bounds);
                       </script>
       <?php
    }

如何为每个国家/地区显示不同的颜色标记？这意味着，例如，如果某些来自美国的协调员，请将标记颜色设置为红色（例如），我还要注意其他一些颜色标记。来自墨西哥的坐标使标记颜色变为蓝色。

这个例子只有两个国家，但我最多可以有N个国家，所以我需要N个彩色标记。

快速Photoshop以显示我想要的解决方案：

提前致谢。

Answer 1

您可以使用以下网址进行操作：

https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FFFFFF

它会生成一个标记，根据您指定的十六进制代码更改其颜色。在这种情况下，它是FFFFFF。

因此，在创建标记时，请使用此值添加键icon。在您的情况下，您可以在HEX代码的locations数组中添加第三个元素，然后：

marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=•|' + locations[i][2]
});

您也可以随机生成十六进制代码。在此处查找更多信息：Random HEX codes in Javascript

在Google地图上的国家/地区显示不同的颜色标记

1 个答案: