Search jQuery

jQuery Forum

Screen name:
gujian

gujian's Profile

2 Posts

6 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

jquery mobile dialog and google map problem
[9Replies]
- 12-Dec-2012 03:05 AM
- Forum: jQuery Mobile
hi guys

   i have a problem with jqm and google map.

i want to use a dialog to get the user's address input and translate the address to lat and lng and set the map's center to the location.

   i use google geocode service and set center function, the problem is:

when i use safari of iphone4s , and chrome desktop version , it is ok, but i use chrome mobile version or firefox ver 15 16 17 even 18 on my android phone(HTC THUNDERBOLT ), the map can not display completely, it only load part map and the style of map ,such as the tool bar at right top map become unnormal.

    in addition there exist a strange problem, if i set the textbox with a initial value, and i dont change the value,the map can display correctly, if i input my address, the google geocode service can get the lat and

lng data but the map seems collapse, it only dispaly part of map and can not drag to the center of the screen.

what happened and how can i fix it? thank u.

the code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Google Maps</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <style>
        #map-page, #map-canvas {
            width: 100%;
            height: 100%;
            padding: 0;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="JS/map.js"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false&language=zh"></script>

</head>
<body>

    <div data-role="page" id="map-page">
        <div data-role="header">
            <a href="#" data-icon="home" data-iconpos="notext" data-direction="reverse"></a>
            <h1>Maps</h1>
        </div>

        <div data-role="content" id="map-canvas">
            
        </div>
        <div id="btn-inputAddress" style="display: block; position: absolute; z-index: 10000; right: 4px; bottom: 90px;">
            <a href="#userInputDialog" data-ajax="false">
                <img src="Images/userinput.png" class="thumbImage" alt="输入您的位置" /></a>
            
        </div>
     </div>
    
    <div data-role="dialog" id="userInputDialog">
        <div data-role="header">
            <h1>请输入地址！</h1>
        </div>

        <div data-role="content" data-theme="e">
            INPUT ADDRESS HERE
  <p>
            <label for="text">ADDRESS:</label>
            <input type="text" name="addressText" id="addressText" value="上海市浦东新区浦东南路浦电路" placeholder="您的地址" data-theme="d" />
            
            &nbsp&nbsp&nbsp&nbsp<a href="javascript:OKinner();" data-role="button" data-inline="true">&nbsp&nbsp&nbsp&nbsp&nbsp好的&nbsp&nbsp&nbsp&nbsp </a>
            <a href="javascript:Cancel();" data-role="button" data-inline="true" data-theme="a">取消</a>
        </div>
        <script>
            function OK() {
                // process dialog...
                // alert("i know");
                var userInput = "";
                userInput = $("#addressText").val();
                alert(userInput);

                $('.ui-dialog').dialog('close');
            }
            function Cancel() {
                // process dialog...
                // alert("i know");

                // popMessage("我在外面获取一个全局消息" + globalVar);
                // close dialog
                $('.ui-dialog').dialog('close');
            }
        </script>
    </div>
</body>
</html>

THE js(map.js):

var map;

function OKinner() {
    // process dialog...
    // alert("i know");
    //var userInput = "";
    var userInput = $("#addressText").val();
    alert("user input address is：" + userInput);
    // popMessage("用户输入：" + userInput);
    // close dialog
    $('.ui-dialog').dialog('close');
    // geocoder = new google.maps.Geocoder();
    getLatLng(userInput);
    //没用
    // map.checkResize();
    // return false;
}

$( "#map-page" ).live( "pageinit", function() {

var defaultLatLng = new google.maps.LatLng(34.0983425, -118.3267434); // Default to Hollywood, CA when no geolocation support

if ( navigator.geolocation ) {
  function success(pos) {
   // Location found, show map with these coordinates
   drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
  }

  function fail(error) {
   console.log(error);
   drawMap(defaultLatLng); // Failed to find location, show default map
  }

  // Find the users current position. Cache the location for 5 minutes, timeout after 6 seconds
  navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
} else {
  drawMap(defaultLatLng); // No geolocation support, show default map
}

function drawMap(latlng) {
  var myOptions = {
   zoom: 15,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

  // Add an overlay to the map of current lat/lng
  var marker = new google.maps.Marker({
   position: latlng,
   map: map,
   title: "Greetings!"
  });
}

});

//用户输入地址后转换用户输入的地址到经纬度，并以该位置居中并显示marker
function getLatLng(userInputAddress) {
    //解析用户文本地址到经纬度
    alert("getlnglat!");
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': userInputAddress }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            alert("getLatLng通过地址获取的经纬度是：" + results[0].geometry.location);
            //actionType = "userInput";
            ShowPointedPosition(results[0].geometry.location);

        }
        else {
            // 正向地址解析失败
            alert("您指定了一个不合法的位置!");

        }

    });

}

// 显示一个指定位置以及信息，弹出infowindow
function ShowPointedPosition(pointedLocation) {
    alert("您指定的位置的经纬度是:" + pointedLocation);

    var strResult = "<br/>";

    currentLocationMarker = new google.maps.Marker({
        position: pointedLocation,
        map: map,
        animation: google.maps.Animation.DROP,
    });

    //将指定的位置在地图上居中
    map.setCenter(pointedLocation);
    //google.maps.event.trigger(map, 'tileloaded');

}

the picture:

the navbar css cannot work when i use link to navigate and use data-ajax=true
[2Replies]
- 26-Nov-2012 12:49 AM
- Forum: jQuery Mobile
hi guys

    i have a problem about the navbar。

    when i use a custom css to change the style of the navbar , if i load the page from the explorer's address bar, the css works, and when i use a a href to navigate to this page , the css cannot work , the nav bar's height and font become large, and i refresh the page the css work again.

    and when i cancel the data-ajax property, set the data-ajax=false, the css work again,so can i use the data-ajax=true and the css at the same time?

   thank you!

    the code is :

    index.html:

   <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>welcome</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
   <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>


<div data-role="page">
<div data-role="header">
  <h1>welcome！</h1>
</div>
     <div id="logo">
              <img src="Images/HomeLogo.jpg" height="220" />
    </div>
<div data-role="content">
         <a href="tabbar.html"   data-transition="slide" data-ajax="false" data-role="button">navigate to tab bar！</a>


</div>
   </div>

</body>
</html>

the nav page tabbar.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tab Bar Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<style>
  .ui-navbar-custom .ui-btn .ui-btn-inner
        { font-size: 11px!important; padding-top: 24px!important; padding-bottom: 0px!important; }
  .ui-navbar-custom .ui-btn .ui-icon
        { width: 30px!important; height: 20px!important; margin-left: -15px!important; box-shadow: none!important;
          -moz-box-shadow: none!important; -webkit-box-shadow: none!important;
          -webkit-border-radius: none!important; border-radius: none!important; }
  #home .ui-icon { background: url(../images/53-house-w.png) 50% 50% no-repeat; background-size: 22px 20px; }
  #movies .ui-icon { background: url(../images/107-widescreen-w.png) 50% 50% no-repeat; background-size: 25px 17px; }
  #theatres .ui-icon { background: url(../images/15-tags-w.png) 50% 50% no-repeat; background-size: 20px 20px; }
</style>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>

<div data-role="page">
<div data-role="header">
  <h1>Movies</h1>
</div>

<div data-role="content">
  <ul data-role="listview">
   <li>
     <a href="#">
    <img src="../images/kungfupanda2.jpg" />
    <h3>Kung Fu Panda</h3>
    <p>Rated: PG</p>
    <p>Runtime: 95 min.</p>
     </a>
   </li>
   <li>
     <a href="#">
    <img src="../images/pirates.jpg" />
    <h3>Pirates</h3>
    <p>Rated: PG-13</p>
    <p>Runtime: 137 min.</p>
     </a>
   </li>
   <li>
     <a href="#">
    <img src="../images/X-MenFirstClass.jpg" />
    <h3>X-Men</h3>
    <p>Rated: PG-13</p>
    <p>Runtime: 131 min.</p>
     </a>
   </li>
   <li>
     <a href="#">
    <img src="../images/kungfupanda2.jpg" />
    <h3>Kung Fu Panda 3D</h3>
    <p>Rated: PG</p>
    <p>Runtime: 95 min.</p>
     </a>
   </li>
  </ul>
</div>


<div data-role="footer" class="ui-navbar-custom" data-position="fixed">
  <div data-role="navbar" class="ui-navbar-custom">
   <ul>
    <li><a href="#" id="home" data-icon="custom">Home</a></li>
    <li><a href="#" id="movies" data-icon="custom" class="ui-btn-active">Movies</a></li>
    <li><a href="#" id="theatres" data-icon="custom">Theatres</a></li>
   </ul>
  </div>
</div>
</div>

</body>
</html>

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend