Nik*_*dev 3 jquery jquery-ui google-maps-api-3
我正在实施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);
}
Run Code Online (Sandbox Code Playgroud)
代码打开对话框:
$("#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");
});
Run Code Online (Sandbox Code Playgroud)
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;" />
Run Code Online (Sandbox Code Playgroud)
请尝试以下方法:
1)定义map和marker在函数外部initialize,我们稍后将这些称为中心地图
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);
}
Run Code Online (Sandbox Code Playgroud)
2)修改对话框的"打开"事件,以在打开对话框时强制映射中心:
$("#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());
},
});
Run Code Online (Sandbox Code Playgroud)
如果有效,试试让我知道;)
| 归档时间: |
|
| 查看次数: |
12116 次 |
| 最近记录: |