我正在实施Google Map API,并在jQuery对话框中显示地图.地图显示正常,但标记位置不在中心,所以请指导我. 如何将标记位置和地图置于中心? 地图代码: var myCenter = new google.maps.LatLng('@Mode
如何将标记位置和地图置于中心?
地图代码:
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;" />请尝试以下方法:
1)在函数初始化之外定义地图和标记,我们稍后会调用它们使地图居中
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)修改对话框的“打开”事件,以在打开对话框时强制映射中心:
$("#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()); }, });
试一下,让我知道这是否有效;)