查看this question以查看一切正常的代码设置。
我正在使用这个完全相同的自适应地图解决方案的房地产网站,但我在网站上有许多页面需要地图(属性详细信息页面)所以我需要一种方法来嵌入lat / long坐标每个属性详细信息页面都有外部initialize()
脚本,但我无法使用它。
我在lat
脚本中添加了2 long
/ initialize()
个var:
function initialize(lat, long) {
var myLatlng = new google.maps.LatLng(lat, long);
然后在需要地图的页面上我尝试了这个:
<script>
window.onload = function() {
if (typeof(map) != 'undefined') {
initialize(-33.867487,151.20699);
}
}
</script>
但是没有拾取坐标:
我确定这与即中的所有内容的加载有关initialize()
脚本是通过jQuery load()
进行AJAX的,然后一旦加载了地图通过jQuery的$.getScript
加载API,这一切都发生在$(window).load
上。我只是坚持拉/长坐标如何配合这个设置?
- 编辑 -
我会尽可能简单地分解代码设置:
在我的外部全局JS文件中,我已经设置了使用Enquire JS库的自适应Google Map解决方案:
$(window).load(function() {
var mapContainer = $('.map'),
mapStaticContainer = $('.map__static'),
mapDynamicContainer = $('<div class="map__dynamic"/>');
/* --Enquire library-- */
enquire.register(BPlap, {
deferSetup: true,
setup: function() {
mapContainer.prepend(mapDynamicContainer);
mapDynamicContainer.html('<span class="preloader"><span class="preloader__spinner"></span> <em>Loading map…</em></span>').load('/includes/modules/adaptive-google-map/js.php', function() {
$.getScript('http://maps.google.com/maps/api/js?sensor=false&callback=initialize', function(){});
});
},
// Not palm size viewport
match: function() {
mapStaticContainer.hide();
mapDynamicContainer.show();
// Need this so the map fully renders when going from `match` -> `unmatch` -> `match`
if (typeof(map) != 'undefined') {
var center = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
}
},
// Palm size viewport
unmatch: function() {
mapStaticContainer.show();
mapDynamicContainer.hide();
}
}, true).listen();
});
通过jQuery load()
进行AJAX文件的内容: /includes/modules/adaptive-google-map/js.php :
<div id="map_canvas"></div>
<script>
//function initialize() {
function initialize(lat, long) {
var myLatlng = new google.maps.LatLng(lat, long);
//var myLatlng = new google.maps.LatLng(-33.867487, 151.20699);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
animation: google.maps.Animation.DROP
});
// Center Google Maps on browser resize (https://stackoverflow.com/questions/8792676/center-google-maps-v3-on-browser-resize-responsive)
var center;
function calculateCenter() {
center = map.getCenter();
}
google.maps.event.addDomListener(map, 'idle', function() {
calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(center);
});
}
</script>
如果我在上面的initialize()
脚本(注释掉的行)中对lat / long coords进行硬编码,那么当我尝试传入lat
/ long
var时,一切正常从页面内插入我不能做的地图。
答案 0 :(得分:0)
我想通了,我需要从这里删除变种:
function initialize(lat, long) {
就是这样:
function initialize() {
var myLatlng = new google.maps.LatLng(lat, long);
然后在地图使用的页面上只有这个内联JS:
<script>
var lat = 53.43072,
long = -3.049134;
</script>