gpt4 book ai didi

javascript - jQuery 对话框窗口内的 Google Maps JavaScript API

转载 作者:行者123 更新时间:2023-11-29 19:54:13 24 4
gpt4 key购买 nike

我使用 Google Maps JavaScript API 来显示 map - https://developers.google.com/maps/documentation/javascript/

我需要该 API 中的某些静态 map 所没有的功能。

所以这个页面作为一个独立的页面工作得很好:

<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

<script>


function initialize() {

// Set map coordinates with lat and lng
var cord = new google.maps.LatLng(28.545078,-81.377196);

// Set map options
var mapOptions = {
zoom: 15,
center: cord,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

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


// Set map marker
var marker = new google.maps.Marker({
position: cord,
map: map,
title: 'Test'
});

}


// Load Map
google.maps.event.addDomListener(window, 'load', initialize);



</script>

</head>

<body>
<div id="map-canvas"style="width:600px; height:500px"></div>
</body>

</html>

我需要让该页面在 jQuery 对话框窗口中工作。

我这样调用对话框并加载外部页面:

<script type="text/javascript">

$(document).ready(function() {


$("#cc").click(function(){

$("#detailWin").dialog({
autoOpen: false,
modal: true,
width:700,
height:600,
show: "fade",
close: "fade",
open: function ()
{
$(this).load('p2.php');

}
});

$('#detailWin').dialog("open");


});

});

</script>

因此,当我将第一组代码包含到 maps.php 页面时,它不起作用。我意识到我不想在包含的页面上包含所有的和标签。我一直在尝试许多不同的方法,但我无法在对话框窗口中加载 map 。

我已经尝试使用 jQuery $.getScript() 加载 map API URL,但它没有帮助。

如果有人能帮我找出最好的方法来完成这项工作,我将不胜感激,因为我被困住了。

谢谢!

更新:

我最终让它像这样工作(这是第二页 maps.php):

<script type="text/javascript">

$(document).ready(function() {

function initialize() {

// Set map coordinates with lat and lng
var cord = new google.maps.LatLng(28.545078,-81.377196);

// Set map options
var mapOptions = {
zoom: 15,
center: cord,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

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

// Set map marker
var marker = new google.maps.Marker({
position: cord,
map: map,
title: 'Test'
});

}

// Load Map
google.maps.event.addDomListener(window, 'load', initialize);


initialize();

});


</script>


<div>

<div id="map-canvas"style="width:600px; height:500px"></div>

</div>

最佳答案

这里有两个重要的考虑因素:-

  • 确保父页面中包含所有 javascript/jQuery。不要尝试通过 AJAX 传递 js。
  • 确保只有在 Canvas 可见时才初始化 map 。初始化不可见的 Canvas 只会部分成功。

具体取决于您要执行的操作,您的代码可能是这样的:

$(document).ready(function() {
var $detailWin,
dialogInitialized,
map;

function getDialogContent() {
if(dialogInitialized) return;
dialogInitialized = true;//Well, at least initializing.
$.get('p2.php').done(function(html) {
$detailWin.html(html);
var cord = new google.maps.LatLng(28.545078, -81.377196);
var mapOptions = {
zoom: 15,
center: cord,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: cord,
map: map,
title: 'Test'
});
}).error(function(jqXHR, textStatus, errorThrown) {
$detailWin.text(textStatus);
});
}

$detailWin = $("#detailWin").dialog({
autoOpen: false,
modal: true,
width: 700,
height: 600,
show: "fade",
close: "fade",
open: getDialogContent
});

$("#cc").on('click', function() {
$detailWin.dialog("open");
});
});

注释:

  • 确保 p2.php , 提供了一个包含 map Canvas 的 HTML 片段,但没有 <head><body>标签,绝对没有 javascript。
  • 上面的代码对对话框(包括 map )进行了一次性初始化。如果您想在每次打开对话框时重新加载对话框(或它的某些方面,例如一组新的标记),情况会略有不同。

关于javascript - jQuery 对话框窗口内的 Google Maps JavaScript API,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16547779/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com