在asp.net网页内生成热图包括母版页

Question

我正在使用此代码生成热图，但热图图层未显示，我的代码如下所示。这段代码中的错误是什么？

   <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="CrimeHeatmap.aspx.cs" Inherits="IraqCrimesAndInsidenceMapping.CrimeHeatmap" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">

我对谷歌地图使用以下定义：

    <script src="http://maps.google.com/maps?file=api&amp;key=MyKey&libraries=visualization"
    type="text/javascript" > </script >

但是当我用以下定义替换它时，不会查看地图

     <script src="http://maps.google.com/maps/api/js?key=MyKey"
    type="text/javascript" > </script >

我的脚本如下：

    <script type="text/javascript">
    var map = null;
     var heatmap;
function initialize()
 {
  if (GBrowserIsCompatible()) 
  {
    map = new google.maps.Map(document.getElementById("map_canvas"));
     var center = new GLatLng(37.775,-122.434);
     map.setCenter(center, 13);
     map.addControl(new GLargeMapControl());
     map.addControl(new GScaleControl());
     map.enableScrollWheelZoom();
     map.addControl(new GMapTypeControl());
     map.enableDoubleClickZoom();
      heatmap = new google.maps.visualization.HeatmapLayer({
      data: getPoints(),
      map: map});

  }

 }
   function getPoints() {
    return [
      new google.maps.LatLng(37.782551, -122.445368),
      new google.maps.LatLng(37.782745, -122.444586),
      new google.maps.LatLng(37.782842, -122.443688),
      new google.maps.LatLng(37.782919, -122.442815),
      new google.maps.LatLng(37.782992, -122.442112),
      new google.maps.LatLng(37.783100, -122.441461),
      new google.maps.LatLng(37.783206, -122.440829),
      new google.maps.LatLng(37.783273, -122.440324),
      new google.maps.LatLng(37.783316, -122.440023),
      new google.maps.LatLng(37.783357, -122.439794),
      new google.maps.LatLng(37.783371, -122.439687),
      new google.maps.LatLng(37.751266, -122.403355)
    ];
  }
 </script>


      </asp:Content>
     <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">  
  <br />
    <div id="map_canvas" style="width: 600px; height: 425px" >
  </div>
   <br />
    </asp:Content>

Answer 1

请使用此代码解决您的问题

   <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="heatmap.aspx.cs" Inherits="IraqCrimesAndInsidenceMapping.heatmap" %>
  <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js "></script>
  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YourCode&sensor=true&libraries=visualization"></script>

     </asp:Content>
     <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
     <div id="map_canvas" style="width: 300px; height: 300px">
     </div>
     <script type="text/javascript">
    $(document).ready(function () {
        var latlng = new google.maps.LatLng(37.775, -122.434);
        var myOptions = { zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.satellite };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        var heatmap = new google.maps.visualization.HeatmapLayer({ data: getPoints(), map: map});
    }); 
    function getPoints() {
    return [
      new google.maps.LatLng(37.782551, -122.445368),
      new google.maps.LatLng(37.782745, -122.444586),
      new google.maps.LatLng(37.782842, -122.443688),
      new google.maps.LatLng(37.782919, -122.442815),
      new google.maps.LatLng(37.782992, -122.442112),
      new google.maps.LatLng(37.783100, -122.441461),
      new google.maps.LatLng(37.783206, -122.440829),
      new google.maps.LatLng(37.783273, -122.440324),
      new google.maps.LatLng(37.783316, -122.440023),
      new google.maps.LatLng(37.783357, -122.439794),
      new google.maps.LatLng(37.783371, -122.439687),
      new google.maps.LatLng(37.783368, -122.439666),
      new google.maps.LatLng(37.783383, -122.439594),
      new google.maps.LatLng(37.783508, -122.439525),
      new google.maps.LatLng(37.783842, -122.439591),
      new google.maps.LatLng(37.784147, -122.439668),
      new google.maps.LatLng(37.784206, -122.439686),
      new google.maps.LatLng(37.784386, -122.439790),
      new google.maps.LatLng(37.784701, -122.439902),
      new google.maps.LatLng(37.784965, -122.439938),
      new google.maps.LatLng(37.785010, -122.439947),
      new google.maps.LatLng(37.785360, -122.439952),
      new google.maps.LatLng(37.751266, -122.403355)];        
}
</script>

] 1