在Jquery中打开谷歌地图

Open Google map in Jquery

本文关键字：谷歌地图 Jquery      更新时间：2023-09-26

我有3个页面，一个是显示来自php页面数据的html，以及处理数据并从数据库中获取数据的php页面，最后一个是js页面。

我的问题是我在PHP页面中有谷歌地图代码，我不会在HTML页面中打印它。

现在我通过jQuery发送它并在HTML页面中打开它，但它不起作用???为什么。

如果我从 PHP 页面复制代码并将其粘贴到 HTML 页面中，谷歌地图将被打开......那么问题出在哪里呢？

<style>
      #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style><script src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'></script>
    <script>
function initialize() {
  var myLatlng = new google.maps.LatLng(24.701564296830245,46.76211117183027);
  var mapOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Hello World!'
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
    </script>
<div id='map-canvas'></div>
这是

"如何通过jquery将上面的map代码从php页面发送到html页面"的示例。

PHP（地图.php）：

<?php
echo "
<div id='map-canvas' style='height: 100%; margin: 0px; padding: 0px'></div>
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'></script>
<script>
function initialize() {
  var myLatlng = new google.maps.LatLng(24.701564296830245,46.76211117183027);
  var mapOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Hello World!'
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>";
?>

我在发布后短暂地更改了上面的代码，因为我不确定浏览器将如何异步解析<body>中的<style>。 我还在<script>之前移动了上面的div#map-canvas，以便在脚本执行之前存在 HTML。

网页：

<head>
<script>
$.ajax({
  url: "map.php",
})
.done(function( msg ) {
  $('#where_map_is_going').html(msg);
});
</script>
</head>
<body>
<div id="where_map_is_going"></div>
相关文章：