extjs 4 구 글 맵 사용
6567 단어 google map
<script src="../ext4/examples/ux/GMapPanel.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>
그 중에서 GMapPanel. js 는 extjs 에서 자체 적 으로 가 져 온 것 이 고 코드 는?
/**
* @author Shea Frederick
*/
Ext.define('Ext.ux.GMapPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.gmappanel',
requires: ['Ext.window.MessageBox'],
initComponent : function(){
Ext.applyIf(this,{
plain: true,
gmapType: 'map',
border: false
});
this.callParent();
},
afterFirstLayout : function(){
var center = this.center;
this.callParent();
if (center) {
if (center.geoCodeAddr) {
this.lookupCode(center.geoCodeAddr, center.marker);
} else {
this.createMap(center);
}
} else {
Ext.Error.raise('center is required');
}
},
createMap: function(center, marker) {
var options = Ext.apply({}, this.mapOptions);
options = Ext.applyIf(options, {
zoom: 14,
center: center,
mapTypeId: google.maps.MapTypeId.HYBRID
});
this.gmap = new google.maps.Map(this.body.dom, options);
if (marker) {
this.addMarker(Ext.applyIf(marker, {
position: center
}));
}
Ext.each(this.markers, this.addMarker, this);
this.fireEvent('mapready', this, this.gmap);
},
addMarker: function(marker) {
marker = Ext.apply({
map: this.gmap
}, marker);
if (!marker.position) {
marker.position = new google.maps.LatLng(marker.lat, marker.lng);
}
var o = new google.maps.Marker(marker);
Ext.Object.each(marker.listeners, function(name, fn){
google.maps.event.addListener(o, name, fn);
});
return o;
},
lookupCode : function(addr, marker) {
this.geocoder = new google.maps.Geocoder();
this.geocoder.geocode({
address: addr
}, Ext.Function.bind(this.onLookupComplete, this, [marker], true));
},
onLookupComplete: function(data, response, marker){
if (response != 'OK') {
Ext.MessageBox.alert('Error', 'An error occured: "' + response + '"');
return;
}
this.createMap(data[0].geometry.location, marker);
},
afterComponentLayout : function(w, h){
this.callParent(arguments);
this.redraw();
},
redraw: function(){
var map = this.gmap;
if (map) {
google.maps.event.trigger(map, 'resize');
}
}
});
구 글 맵 을 표시 하 는 코드 는?
var mapOptions =
{
zoom: 7, // 0( , ) 19( , )
center: new google.maps.LatLng(23, 114), //
mapTypeId: google.maps.MapTypeId.ROADMAP, //ROADMAP - SATELLITE- Google HYBRID- TERRAIN-
scaleControl: true, //
mapTypeControl: true
};
var mapPanel = Ext.create('Ext.ux.GMapPanel',{
title:'Google Map',
name:'pic',
height:500,
align:'center',
width:this.mapWidth,
mapOptions:mapOptions
});
var items = [
container,mapPanel
];
var formPanel = Ext.create('Ext.form.Panel',{
layout:'form',
buttonAlign:'center',
bodyStyle: 'background:white; padding:10px;',
labelAlign:'right',
border:false,
items:items,
buttons:[{text:' ',iconCls:'save',name:'save',parent:this},
{text:' ',iconCls:'cancel',parent:this,handler:function(){
window.AddAdWindow.hide();
var form = this.up('form').getForm();
}}]
});
지도 에 표 시 를 추가 하고 텍스트 상자 에 경 위 를 읽 습 니 다.
registerAction:function(){
var me = this;
var map = me.down('gmappanel').gmap;
if(map){
if(!this.marker){
this.marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
draggable: true,
title: "position"
});
var marker = this.marker;
google.maps.event.addListener(marker, "dragend", function(event) {
var latLng = event.latLng;
var picField = me.down('textfield[name=pic]');
if(picField){
picField.setValue(latLng.lat()+":"+latLng.lng())
}
console.log(latLng.lat()+":"+latLng.lng()+":"+map.getZoom());
});
}
}
}
지도 에 표 시 된 위치 설정
this.marker.setPosition(new google.maps.LatLng(x, y));
this.down('gmappanel').gmap.setCenter(new google.maps.LatLng(x, y));
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
google maps marker LatLng to screen point fromLatLngToContainerPixelgoogle maps marker LatLng to screen point fromLatLngToContainerPixel 오버레이를 호출합니다.getProjection().fromLatLngToContainerP...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.