未捕获的 InvalidValueError：setMap：不是 Map 的实例答案

【问题标题】：Uncaught InvalidValueError: setMap: not an instance of Map未捕获的 InvalidValueError：setMap：不是 Map 的实例
【发布时间】：2013-11-29 00:22:43
【问题描述】：

当我使用 sencha touch2.2.1 时，我遇到了一个问题。在查看器中：

items: [{
    id: 'mapCanvas',
    xtype:'map',
    useCurrentLocation: true,
}]

在控制器中：

var map= Ext.getCmp('mapCanvas');
console.dir(map);
var marker= new google.maps.Marker({
                position: new google.maps.LatLng(25,118),
            });
marker.setMap(map);

报告错误：

未捕获的 InvalidValueError：setMap：不是 Map 的实例，也不是 StreetViewPanorama 的实例

我可以看到地图，但我看不到标记，如何解决这个问题？

【问题讨论】：

标签： google-maps sencha-touch

【解决方案1】：

您可以使用标记的setMap()方法直接将标记添加到地图中，如下例所示：

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});

// To add the marker to the map, call setMap();
marker.setMap(map);

【讨论】：

【解决方案2】：

map 不是谷歌地图的实例。

var map= Ext.getCmp('mapCanvas').getMap(); // add getMap() here to get the map instance
console.dir(map);
var marker= new google.maps.Marker({
    position: new google.maps.LatLng(25,118),
});
marker.setMap(map);

【讨论】：

【解决方案3】：

var map 是一个 HTML 元素，你需要一个 google.maps.Map 对象的实例

var map = google.maps.Map(document.querySelector("#mapCanvas"),{
      center: new google.maps.LatLng(24.027872, -104.655278),
      zoom: 12
    });

那么……

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

【讨论】：

【解决方案4】：

mapCanvas 是保存地图实例的 Ext 地图组件。

var map= Ext.getCmp('mapCanvas');
console.dir(map);
var marker= new google.maps.Marker({
                    position: new google.maps.LatLng(25,118),
              });
marker.setMap(map.getMap());

【讨论】：

【解决方案5】：

试试这个：

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

它对我有用！

【讨论】：

那么setMap和map有什么区别呢？
Jip，我可以确认这对我也有效....但我不知道为什么？更多信息会很棒！

【解决方案6】：

试试这个：

var  latlngbounds = new google.maps.LatLngBounds(),
     position = new google.maps.LatLng(25,118),
     marker = new google.maps.Marker({
            position : position,
            map : map
        }); 

latlngbounds.extend(position);

map.fitBounds(latlngbounds);

这里的map 是渲染的google.map.Map 实例

【讨论】：

【解决方案7】：

marker.setMap 方法期望参数是 google.maps.Map 对象。这不是其中之一：

var map= Ext.getCmp('mapCanvas');

【讨论】：