問題描述
向 Sencha Touch 谷歌地圖添加標記 (Adding Marker to Sencha Touch Google Maps)
Hi I am trying to add a marker to sencha touch v.2.2.1 google maps. I can see the map, but not the marker. I also added the required lib: <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
config: {
items: [{
xtype: 'map',
itemId: 'mapHomeView',
width: Ext.os.deviceType == 'Phone' ? null : 1500,
height: Ext.os.deviceType == 'Phone' ? null : 350,
useCurrentLocation: true,
listeners: {
maprender: function(extMapComponent, googleMapComp){
var marker = new google.maps.Marker({
title: 'test',
position: new google.maps.LatLng (49.279989, ‑123.126333),
map: Ext.ComponentQuery.query('#mapHomeView')[0].map,
// map: googleMapComp,
});
marker.setMap(Ext.ComponentQuery.query('#mapHomeView')[0].map);
}
}]
}
I am using google chrome, for testing the app. I enabled the location requests in the settings.
Neither the line map: ... nor the commented map: ... line is working.
參考解法
方法 1:
This solved my problem. I found it in the examples of sencha touch:
config: {
control: {
'map[itemId="mapHomeView"]': {
maprender: 'mapHomeViewMapRenderer'
}
}
},
mapHomeViewMapRenderer: function(comp, map) {
var map = Ext.ComponentQuery.query('#mapHomeView')[0].getMap();
var image = new google.maps.MarkerImage(
'resources/images/point.png',
new google.maps.Size(32, 31),
new google.maps.Point(0, 0),
new google.maps.Point(16, 31)
);
var shadow = new google.maps.MarkerImage(
'resources/images/shadow.png',
new google.maps.Size(64, 52),
new google.maps.Point(0, 0),
new google.maps.Point(‑5, 42)
);
var position = new google.maps.LatLng(49.279989, ‑123.126333);
var marker = new google.maps.Marker({
position: position,
title: 'test',
shadow: shadow,
icon: image,
map: map
});
},