Question

我有一个谷歌地图HTML代码，目前正在使用，但我想将其转换为Jquery格式，并且遇到了一些问题。我只是上传有效的HTML，如果有人可能告诉我如何将其实现为JQuery格式，我会很感激。每次我尝试过，我都会让地图在左上角短暂显示，然后被JQuery覆盖并获得一个空白的JQuery页面。感谢。

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

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="js/jquery-1.10.1.js"></script>   
<script src="js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script>

<style>
  html, body, #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>
var map;
var genMarker;
var xdata;
var ydata;

xdata = 33.061414;
ydata = -83.225214;
function HomeControl(controlDiv, map) {

  //Set CSS styles for the DIV containing the control
  //Setting padding to 5 px will offset the control
  //from the edge of the map
  controlDiv.style.padding = '5px';

  //Set CSS for the control border
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = 'white';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '2px';
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to set marker';
  controlDiv.appendChild(controlUI);

  //Set CSS for the control interior
  var controlText = document.createElement('div');
  controlText.style.fontFamily = 'Arial,sans-serif';
  controlText.style.fontSize = '12px';
  controlText.style.paddingLeft = '4px';
  controlText.style.paddingRight = '4px';
  controlText.innerHTML = '<b>Set Marker</b>';
  controlUI.appendChild(controlText);

  //Click event will generate new marker.
  google.maps.event.addDomListener(controlUI, 'click', function() 
  {
    myLatlng = new google.maps.LatLng(xdata, ydata);
    genMarker = myLatlng;

    //To add the marker to the map, use the 'map' property
    var marker = new google.maps.Marker(
    {
        position: genMarker,
        map: map,
        title:"Test Marker!"
    });

    xdata =xdata + .0001;
    ydata =ydata + .0001;

  });
}

function initialize() 
{
    var myLatlng = new google.maps.LatLng(33.061414, -83.226385);
    var mapOptions = 
    {
        zoom: 18,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };

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

  //Create the DIV to hold the control and
  //call the HomeControl() constructor passing
  //in this DIV.
  var homeControlDiv = document.createElement('div');
  var homeControl = new HomeControl(homeControlDiv, map);

  homeControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

  </head>
  <body>
<div id="map-canvas"></div>
<div data-role="page">
<div data-role="content">   
    <p>Page content goes here.</p>      
</div><!-- /content -->
</div><!-- /page -->

</body>
</html>

编辑：这是我在JQuery中的代码。

HTML / jQuery的：

    <!-- 
    ******************************************************************
    Test Maps PAGE
    ******************************************************************
    Goes to google maps image of lockerly
    -->
    <div data-role="page" id="map-page" data-url="map-page" data-add-back-btn="true">
        <div data-role="header" data-theme="a">
            <h1>Maps</h1>
        </div>
        <div role="main" class="ui-content" id="map-canvas">
            <p> Page Content goes here.</p>
        </div>
    </div>

将Javascript移动到html页面标题中调用的JS文件中，并将CSS添加到预构建的样式表中，该样式表也加载到html页面的标题中。（未显示）

将HTML Doc转换为JQuery Doc

0 个答案: