使用jQuery load（）在Div内的页面上加载Javascript

Question

I have this page that uses Google Maps Javascript API (extPage.php): 我有使用Google Maps Javascript API（extPage.php）的页面：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<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() {

    var cord = new google.maps.LatLng(28.545078,-81.377196);

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

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

}

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


</script>

</head>

<body>

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

</body>

</html>

That page loads fine as is but I am trying to load into a div on another page. 该页面按原样可以正常加载，但是我正尝试加载到另一页的div中。 I am doing it like this (test.php): 我正在这样做（test.php）：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script type="text/javascript">


    $(document).ready(function() {

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

            $("#extDiv").load('extPage.php');

        });

    });


</script>

</head>


<body>

<input type="button" id="LoadBut" value="Load">

<div id="extDiv"></div>


</body>

</html>

When I run it just like this I get an error ReferenceError: google is not defined . 当我像这样运行时，出现错误ReferenceError: google is not defined 。 I've tried moving the <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> to the test.php page. 我尝试将<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>移到test.php页面。 The error message goes away but the map does not load. 错误消息消失，但地图未加载。

I've never been to sure about the best way to handle Javascript on a page inside of a div like this. 我从来没有像这样确定div内页面上处理Javascript的最佳方法。

Any help with this would be great. 任何帮助都会很棒。

Thanks! 谢谢！

Answer 1

From what I understand of your requirements, you can use the Google Static Maps API , whcih does not require any JavaScript. 据我对您的要求的了解，您可以使用Google Static Maps API ，不需要任何JavaScript。

You just place an img tag with a reference to a static map url into your page with the appropriate parameters. 您只需将带有静态映射URL引用的img标记放入具有适当参数的页面中即可。 For your example: 例如：

<div id="extDiv">
    <img src="https://maps.googleapis.com/maps/api/staticmap?center=28.545078,-81.377196&zoom=15&size=600x500&maptype=roadmap&sensor=false" />
</div>

See the note at the top of the documentation to see if the inclusion of API keys are applicable to your project. 请参阅文档顶部的注释，以了解包含API密钥是否适用于您的项目。

使用jQuery load（）在Div内的页面上加载Javascript

问题描述

1 个解决方案

解决方案1
0 2013-05-07 01:03:11

使用jQuery load（）在Div内的页面上加载Javascript

问题描述

1 个解决方案

解决方案1 0 2013-05-07 01:03:11

解决方案1
0 2013-05-07 01:03:11