Google Map API V3，setPosition/setCenter无法正常工作 [英] Google Map api V3, setPosition/setCenter is not working

问题描述

我需要在两个地方显示Google地图. 我在两个地图上都使用相同的代码(我的意思是我在两个地图上都使用了相同的代码). 您可以在下面的链接中找到这两张地图的屏幕截图.

There are two places where i need to show google maps. I'm using same code for both maps(I mean I'm reusing same code for both maps). Below are links where you can find screen shots of those two maps.

https://drive.google.com/file/d/0B2JnvvXSAALUNMVV1F1B /a>-map1

https://drive.google.com/file/d/0B2JnvvXsAALUdlVzemRVMzNMajF4OFB1V0JXc0RuN1p4eWFV/view - map1

https://drive.google.com/file/d/0B2JnvvXS2Y1 -map2

我正在以bootstarp模式显示第二张地图(map2)

I'm showing second map(map2) in bootstarp modal

第一个地图(map1)运行正常.但是在第二个map(map2)中，尽管我使用了setCenter方法，但标记未显示在地图的中心(而是显示在左上角). 我应该怎么做才能将标记放置在地图中心(在第二张地图中)?

first map(map1) is working fine. But in second map(map2), though I have used setCenter method, marker is not showing at center of the map(instead it is showing at top left corner). what should i do to place marker at center of the map(in second map)?

下面是我的代码.

initialize: function(options){
  //initializing the geocoder
  this.geocoder = new google.maps.Geocoder();
  
  this.map;				
},

//on show of the view
//onShow is a marionette method, which will be triggered when view is shown
onShow: function(){
  var address = this.model.get("address");
  //render the map with dummy latLang
  this.renderMap();
  
  //render the Map with Proper address
  if(address!== ""){
    this.renderMapWithProperAddress(address);
  }
},
  
renderMap: function(){
  var mapCanvas = document.getElementById("mapCanvas"), self = this,
  
  mapOptions = {
    center: new google.maps.LatLng(64.855, -147.833),//dummy latLang
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoomControl: false,
    mapTypeControl: false,
    streetViewControl:false
  };
  
  //initializing google map
  self.map = new google.maps.Map(mapCanvas, mapOptions);
  
  $("#myModal").on("shown.bs.modal",function(){
    google.maps.event.trigger(self.map, "resize");
  });  
},
  
  
renderMapWithProperAddress: function(address){
  var self = this,marker;
  
  self.geocoder.geocode( { "address": address}, function(results, status) {
	if (status == google.maps.GeocoderStatus.OK) {
		
        self.map.setCenter(results[0].geometry.location);
        
        marker = new google.maps.Marker({
          map: self.map,
          position: results[0].geometry.location,
          title: address
        });
				      
    } else {
				        
      alert("Geocode was not successful for the following reason: " + status);
				      
    }
	
  });
}

推荐答案

我的猜测是，在没有看到您的代码的情况下，您需要在显示引导程序模式后触发地图调整大小事件.

My guess, without seeing your code, is that you need to trigger a map resize event after the bootstrap modal has been shown.

引导程序模式

地图事件

$('#myModal').on('shown.bs.modal', function () {
    google.maps.event.trigger(map, 'resize');
});

修改:

这是一个完整且有效的示例.根据我的评论，您应该1)触发地图调整大小，2)将地图中心设置为标记坐标.

Here is a complete and working example. As per my comment, you should 1) Trigger a map resize and 2) set the map center to your marker coordinates.

var center = new google.maps.LatLng(59.76522, 18.35002);

function initialize() {

    var mapOptions = {
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: center
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var marker = new google.maps.Marker({
        map: map,
        position: center
    });
}

$('.launch-map').on('click', function () {

    $('#modal').modal({
        backdrop: 'static',
        keyboard: false
    }).on('shown.bs.modal', function () {
        google.maps.event.trigger(map, 'resize');
        map.setCenter(center);
    });
});

initialize();

JSFiddle演示

这篇关于Google Map API V3，setPosition/setCenter无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！