谷歌地图标记不在中心

Question

我正在实现 Google Map API，并在 jQuery 对话框中显示地图。地图显示正常，但标记位置不在中心，请指导我。

如何使标记位置和地图居中？

地图代码：

var myCenter = new google.maps.LatLng('@Model.Latitude', '@Model.Longitude'); 

function initialize() { 
    var mapProp = { 
        center: myCenter, 
        zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
    var marker = new google.maps.Marker({ 
        position: myCenter, 
        draggable: false, 
        animation: google.maps.Animation.DROP, 
    }); 

    marker.setMap(map); 
}

打开对话框的代码：

$("#googleMap").dialog({ 
    autoOpen: false, 
    height: 600, 
    width: 1000, 
    resizeStop: function (event, ui) { 
    google.maps.event.trigger(googleMap, 'resize') 
}, open: function (event, ui) { 
    google.maps.event.trigger(googleMap, 'resize'); }, 
}); 

$("#btnLocation").click(function () { 
    $("#googleMap").dialog("open"); 
});

HTML：

<div id="googleMap" style="width: 1000px; height: 500px"></div> 
<img src="map.jpg" alt="Set Location" id="btnLocation" style="cursor: pointer; height: 35px; width: 35px;" />

Answer 1

尝试以下方法：

1）在函数initialize之外定义map和marker，我们稍后会调用它们来使地图居中

var myCenter = new google.maps.LatLng('@Model.Latitude', '@Model.Longitude');

// DEFINE YOUR MAP AND MARKER 
var map = null, marker = null; 

function initialize() { 
    var mapProp = { 
        center: myCenter, 
        zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

     map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
     marker = new google.maps.Marker({ 
        position: myCenter, 
        draggable: false, 
        animation: google.maps.Animation.DROP, 
    }); 

    marker.setMap(map); 
}

2）修改对话框的“open”事件，在打开对话框时强制地图居中：

$("#googleMap").dialog({ 
    autoOpen: false, 
    height: 600, 
    width: 1000, 
    resizeStop: function (event, ui) { 
        google.maps.event.trigger(googleMap, 'resize') 
    }, 
    // OPEN EVENT MODIFIED !
    open: function (event, ui) { 
        google.maps.event.trigger(googleMap, 'resize'); 

        // Force the center of the map
        map.setCenter(marker.getPosition());
    }, 
}); 

试一试，让我知道这是否有效；）

Answer 2

您必须将地图的中心设置为您刚刚单击的坐标位置。

通过将以下代码添加到您的点击事件处理程序来做到这一点。

map.setCenter('MARKER'.getPosition());

这需要像这样添加到事件监听器中：

google.maps.event.addListener(marker, 'click', function() {
   map.setCenter(marker.getPosition());
});

如需完整示例，请查看 google maps api 示例：

https://developers.google.com/maps/documentation/javascript/examples/event-simple