Google地图标记不在中心位置

问题描述

我正在实施Google Map API，并使用jQuery对话框显示地图。地图显示正常，但标记位置不在中心，所以请引导我。

我如何制作标记位置和地图中心？

地图代码：

  var myCenter = new google.maps.LatLng（'@ Model.Latitude'，'@Model.Longitude ）; 
 
函数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 =googleMapstyle =width：1000px; height：500px>< / div> 
< img src =map.jpgalt =设置位置id =btnLocationstyle =cursor：pointer; height：35px; width：35px; /> 
  

解决方案

请尝试以下操作：

1）在函数<$ c $外定义 map 和 marker c> initialize ，我们稍后会调用它们来放置地图中心

  var myCenter = new google.maps.LatLng（'@ Model.Latitude'，'@ Model.Longitude'）; 
 
 //定义您的地图和标记
 var map = null，marker = null; 
 
函数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， '调整大小'）
}，
 // OPEN EVENT MODIFIED！
 open：function（event，ui）{
 google.maps.event.trigger（googleMap，'resize' ）; 
 
 //强制地图中心
 map.setCenter（marker.getPosition（））; 
}，
}）; 
  

请尝试让我知道这是否有效;）

I am implementing Google Map API and I show the map in jQuery Dialog Box. The Map is showing fine but the marker position in not in center, SO please guide me.

How can I make the marker position and map in center?

Code for the map:

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);
}

Code opening the dialog box:

$("#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;" />

解决方案

Try the following:

1) Define map and marker outside the function initialize, we'll call these later to center the map

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) Modify the "open" event of the dialog box to force the map center when opening the dialog box:

$("#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());
    },
});

Have a try and let me know if this works ;)

这篇关于Google地图标记不在中心位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！