页面加载时如何将我的地图标记设置在 div 的中心

Question

我实际上使用geocode 。

<?php
if($_REQUEST){

$data_arr = geocode($_REQUEST['search_city']);

if($data_arr){

$latitude = $data_arr[0];
$longitude = $data_arr[1];
$formatted_address = $data_arr[2];

?>

<div id="map_canvas" style="/*width:100%;*/ height:300px;">
    Loading map...
</div>

<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
<script type="text/javascript">
function init_map() {
    var myOptions = {
    zoom: 20,
    center: new google.maps.LatLng(<?php echo $latitude; ?>,<?php echo $longitude; ?>),
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(<?php echo $latitude; ?>,<?php echo $longitude; ?>
        ),
        title: '<?php echo $formatted_address; ?>
        });
        var bounds = new google.maps.LatLngBounds();
        bounds.extend(myLatLng);
        map.fitBounds(bounds);

        infowindow = new google.maps.InfoWindow({
        content: "
    <?php echo $formatted_address; ?>
        "
        });
        google.maps.event.addListener(marker, "click", function () {
        map.panTo(marker.getPosition());
        infowindow.open(map, marker);

        });
        infowindow.open(map, marker);
}

    google.maps.event.addDomListener(window, 'load', init_map);
</script>

<?php

}else{
echo "No map found.";
}
}

function geocode($address) {

    $address = urlencode($address);

    $url = "http://maps.google.com/maps/api/geocode/json?address={$address}";
    $resp_json = file_get_contents($url);
    $resp = json_decode($resp_json, true);
    if ($resp['status'] == 'OK') {

        $lati = $resp['results'][0]['geometry']['location']['lat'];
        $longi = $resp['results'][0]['geometry']['location']['lng'];
        $formatted_address = $resp['results'][0]['formatted_address'];

        if ($lati && $longi && $formatted_address) {

            $data_arr = array();

            array_push($data_arr, $lati, $longi, $formatted_address);
            return $data_arr;

        } else {
            return false;
        }

    } else {
        return false;
    }
}
?>

在这里，地图标记在地图的左上角是这样查看的，

我写了map.panTo(marker.getPosition()); 在google.maps.event.addListener(marker, "click", function () {}); 功能。

所以，如果标记被点击，我会回到地图的中心。

但是一旦页面加载，我需要在中心显示标记。

谢谢，

Answer 1

通过在myoptions变量中添加两个额外参数并根据需要更改位置而不是mapTypeControlOptions中的TOP_CENTER 。

var myOptions = {
    zoom: 20,
    center: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER
    }
};

https://developers.google.com/maps/documentation/javascript/examples/control-positioning