Question

"image map". 地图上的符号是我在Google API中添加到地图中的自定义标记。

要设置自己的位置，我会使用存储在数据库中的一些coords。

我想用一些像这样的矩形来改变它：

我不能使用一个独特的“样本矩形”来重复，因为它不会遵循道路方向。

这是我的代码（PHP / JavaScript）。

<?php 
$array_sensori = array();
$array_sensori = SensoreDAO::readArrayAllSensori($_SESSION['id_comune'], 0; ?>
   <script>
function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 20,
    mapTypeId: 'terrain',
    mapTypeControl: false,
    styles: [{featureType: "poi", elementType: "labels", stylers: [{ visibility: "off" }]}, {featureType: "landscape", stylers: [{ visibility: "simplified"}]}],
    streetViewControl: false,
    center: segn
});
<?php /*
var marker = new google.maps.Marker({
    position: segn,
    map: map
}); */
?>
<?php 
$i = 1;
$sensore = new Sensore();       

foreach ($array_sensori as $sensore){
    echo 'var contentString'.$i.' = \'<div id="content">\'+
                        \'<h1 id="firstHeading" class="firstHeading">Sensore '.$sensore->getIdSens().'</h1>\'+
                        \'<div id="bodyContent">\'+
                        \'<p>Strada: '.StradaDAO::readStrada($sensore->getIdStrada()).'<br>\'+
                        \'Comune: '.ComuneDAO::readComune($sensore->getIdComune()).'</p>\'+
                        \'</div></div>\'
    ';

    $cambio_stato = new CambioStato();

    try{
        $cambio_stato = CambioStatoDAO::readLastById($sensore->getIdSens());
    }catch (DaoException $e){
        //echo "Caught LoginException ('{$e->getMessage()}')<br>{$e}<br>";
        $cambio_stato->setStato(0);
    }

    switch ($cambio_stato->getStato()){
        case 1:
            $ico ='Ico_Sensori_Occupato.png';
            break;
        case 0:
            $ico ='Ico_Sensori_Libero.png';
            break;
        }

    echo 'var infowindow'.$i.' = new google.maps.InfoWindow({
            content: contentString'.$i.'
            });
        var prev_infowindow =false;

        var icon_source =\'../main/images/'.$ico.'\';

        var marker'.$i.' = new google.maps.Marker({
            position: {lat: '.$sensore->getLatitudine().', lng: '.$sensore->getLongitudine().'},
            map: map,
            icon: icon_source,
            });


        marker'.$i.'.addListener(\'click\', function() {
            if( prev_infowindow ) {
                prev_infowindow.close();
            }

            prev_infowindow = infowindow'.$i.';
            infowindow'.$i.'.open(map, marker'.$i.');

            if (marker'.$i.'.getAnimation() !== null) {
                 marker'.$i.'.setAnimation(null);
            } else {
                 marker'.$i.'.setAnimation(google.maps.Animation.BOUNCE);
            }

            setTimeout(function () {marker'.$i.'.setAnimation(null); }, 3000);
        });

    ';
    $i++;
}?>
}
</script>

我的代码说明。

我从数据库中获取了一个包含我的元素，它们的坐标和一些信息的数组。（它们是“Sensore”类的对象）
比我初始化地图，对于数组的每个元素，我设置了一个自定义标记。
CambioStato将阅读这些传感器的状态，并根据它，我通过开关为标记选择一个不同的图标。

我如何达到我的要求？

我试图绘制折线。除非我可以改变线的形状，否则会失败。即正方形和不同颜色的边框。

我试图绘制矩形。这失败了，因为我有很多传感器并且用Google API绘制它我需要四个顶点的坐标。

Answer 1

这是我发现问题的解决方案。 "image map".

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 19,
    mapTypeId: 'terrain',
    mapTypeControl: false,
    styles: [{featureType: "poi", elementType: "labels", stylers: [{ visibility: "off" }]}, {featureType: "landscape", stylers: [{ visibility: "simplified"}]}],
    streetViewControl: false,
    center: segn
});

var iconSymbol1 = {
        path: 'M 0 0 L 40 0 L 40 60 L 0 60 Z',
        anchor: new google.maps.Point(0, 0),
        scale: 0.35,
        strokeColor: '#000000',
        strokeWeight: 1,
        strokeOpacity: 1,
        fillColor: 'steelblue',
        fillOpacity: 0.8,
    };
var iconSymbol2 = {
        path: 'M 0 0 L 40 0 L 40 60 L 0 60 Z',
        anchor: new google.maps.Point(0, 0),
        scale: 0.36,
        strokeColor: '#000000',
        strokeWeight: 1,
        strokeOpacity: 1,
        fillColor: '#FFFFFF',
        fillOpacity: 0.8,
    };
<?php 
//Reading all polyline paths (on which I'll draw SVG rectangle symbols) associated to the 'comune'
$polyline_array = array();
$polyline_array = PolyLinePathDAO::readArrayAllPolylinePath($id_comune);
$array_sensori = array();
$array_sensori = SensoreDAO::readArrayAllSensori($id_comune, $polyline_array[0]->getIdStrada());
$indice_path = 0; //I need to have count of the polylines number
$indice_sensore = 0; 
$last_id_strada = $polyline_array[0]->getIdStrada();

foreach ($polyline_array as $polyline){
    //if the polyline refers to another street, I have to read the sensors of that street and restart $indice_sensore
    if($polyline->getIdStrada() != $last_id_strada ){
        $array_sensori = SensoreDAO::readArrayAllSensori($id_comune, $polyline->getIdStrada());
        $indice_sensore = 0;
    }

    //calculating the offset for each rectangle
    $offset_lat = ($polyline->getEndLat() - $polyline->getStartLat())/$polyline->getNumSensori();
    $offset_lon = ($polyline->getEndLon() - $polyline->getStartLon())/$polyline->getNumSensori();

    $last_path_lat = $polyline->getStartLat();
    $last_path_lon = $polyline->getStartLon();

    //starting calculating paths for the single sensors and setting polyoptions
    for($i=0; $i<$polyline->getNumSensori();$i++){
        echo 'var sensorePath'.$indice_path.' = [];
                sensorePath'.$indice_path.'.push(new google.maps.LatLng('.round($last_path_lat,7).', '.round($last_path_lon,7).'));
                sensorePath'.$indice_path.'.push(new google.maps.LatLng('.round(($last_path_lat+$offset_lat),7).', '.round(($last_path_lon+$offset_lon),7).'));
            ';

        $last_path_lat = $last_path_lat+$offset_lat;
        $last_path_lon = $last_path_lon+$offset_lon;

        echo 'var polyOpts'.$indice_path.' = {
                map: map,
                path: sensorePath'.$indice_path.',
                icons: [{
                    icon: iconSymbol1
                }],
                strokeWeight: 0
            }
            polyline'.$indice_path.' = new google.maps.Polyline(polyOpts'.$indice_path.');
        ';

        //Change color based on sensor state
        $cambio_stato = new CambioStato();

        try{
            $cambio_stato = CambioStatoDAO::readLastById($array_sensori[$indice_sensore]->getIdSens());
        }catch (DaoException $e){
            //echo "Caught LoginException ('{$e->getMessage()}')<br>{$e}<br>";
            $cambio_stato->setStato(0);
        }

        if($cambio_stato->getStato() == 1){
            echo 'polyline'.$indice_path.'.setOptions({icons: [{ icon: iconSymbol2 }] });';
        }

        $indice_path++;
        $indice_sensore++;

    } //for

    $last_id_strada = $polyline->getIdStrada();
} //foreach
?>
}
</script>

我的代码说明 我开始初始化地图和矩形图标。这些都是用SVG制作的。从DB我读取了我需要绘制项目的起点和终点（坐标）。我也知道物品的数量。多亏了我能够计算每个物体的纬度和经度偏移。所以迭代地我绘制它们，创建折线并将SVG元素设置为像simbol（Google API）。

在图像中，您可以看到最终效果。它仍然不完美，但我正在研究它。我感谢scaisEdge的建议。我希望这对其他人有所帮助。

在地图上绘制特定元素

1 个答案: