Question

我正在尝试将Google maps Places search box集成到我的jQuery Mobile App中。

我在jQuery Mobile中创建了一个首选样式的搜索框。我想使用此搜索框而不是标准的谷歌搜索框。但由于某些原因，我的搜索框样式被Google地图搜索框样式所覆盖，如下图所示（1）。有人可以建议我一种方法来实现image2中显示的所需结果。还请找到我的完整代码。我会感激任何人的帮助。

enter image description here

下图（2）显示了我想要实现的目标。

Desired Location box styling

完整代码

<!DOCTYPE html>

<html>
<head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.css">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js"></script>
    <!-- Google maps source for places seearch box and map display on page initilization-->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

    <style>
        #map-page, #map_canvas { width: 100%; height: 80%; padding: 0; }

        .container_16, #set_location {
        z-index:1;
        }

        .container_16 .alpha { clear-left: 0; }

        .grid_3,.grid_13{ margin: 0; padding: 1.5% !important; border: 0; float: left; }

        .container_16 { overflow: hidden; }

        .container_16 .grid_3 { 
    width: 15.75% !important;
        }

        .container_16 .grid_13 { 
    width: 78.25% !important;
        }
    </style>

    <script>
        function initialize() {

  var markers = [];
  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var defaultBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(-33.8902, 151.1759),
      new google.maps.LatLng(-33.8474, 151.2631));
  map.fitBounds(defaultBounds);

  // Create the search box and link it to the UI element.
  var input = /** @type {HTMLInputElement} */(
      document.getElementById('search_location')); // pac-input changed to search_location
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  var searchBox = new google.maps.places.SearchBox(
    /** @type {HTMLInputElement} */(input));

  // [START region_getplaces]
  // Listen for the event fired when the user selects an item from the
  // pick list. Retrieve the matching places for that item.
  google.maps.event.addListener(searchBox, 'places_changed', function() {
    var places = searchBox.getPlaces();

    for (var i = 0, marker; marker = markers[i]; i++) {
      marker.setMap(null);
    }

    // For each place, get the icon, place name, and location.
    markers = [];
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) {
      var image = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      };

      // Create a marker for each place.
      var marker = new google.maps.Marker({
        map: map,
        icon: image,
        title: place.name,
        position: place.geometry.location
      });

      markers.push(marker);

      bounds.extend(place.geometry.location);
    }

    map.fitBounds(bounds);
  });


  // [END region_getplaces]

  // Bias the SearchBox results towards places that are within the bounds of the
  // current map's viewport.
  google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds = map.getBounds();
    searchBox.setBounds(bounds);
  });

}

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

</head>

<body>
<div data-role="page" id="map-page" data-url="map-page">
    <div data-role="header" data-theme="a">
    <div>
        <img id='houseid' style='width:120px; ' src="" alt="logo"/> 
    </div>
    <div>
        <a href="#popup_cancel" data-rel="popup" data-position-to="window" data-transition="pop" class=" ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-delete ui-btn-icon-left ui-btn-right ui-btn-a">Cancel</a>
    </div>
    </div>

    <div class='container_16 ui-corner-all' style='background-color: white; z-index:1000000000 !important; ' >
    <div class='grid_3' style='padding-top:0% !important; padding-bottom:0% !important;'>
        <a id='location' style='padding: 0%; margin-top: 0.65em;' href="#" onclick='get_location()' class="ui-btn ui-corner-all ui-mini">
        <img id='location_img' style='width:20px; padding:5px;' src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSwWvXKHpBpZ04VsfcHHtdjyHWhOrNq1zjDPWKg4vrg35wiPD8S8DQBSg" alt="HouseID">
        </a>
    </div>
    <div class='grid_13' style='padding-top:0% !important; padding-bottom:0% !important;'>
        <input id='search_location' type='search' style=''>
    </div>
    </div>

    <div role="main" class="ui-content" id="map_canvas" style='padding:0%;'>
        <!-- map loads here... -->
    </div>
</div>



<div data-role="popup" id="popup_cancel" data-overlay-theme="b" data-theme="a" data-dismissible="false" style="max-width:400px;"> 
    <div data-role="header" data-theme="a"> <!-- This div element is not allowing Google map to render -->
    <h1>Cancel ?</h1>
    </div>

    <div role="main" class="ui-content">
        <h5 class="ui-title">Are you sure you want to cancel and go back?</h5>
        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a ui-mini" data-rel="back">Cancel</a>
        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a ui-mini" data-rel="back" data-transition="flow">Delete</a>
    </div>
</div>

</body>
</html>

Answer 1

删除第51行：

map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

此行的目的是将元素“input”嵌入到特定位置“TOP_LEFT”的地图中。 See google documentation。我用这个评论来试验你的代码，并观察你正在寻找的结果。

覆盖Google地图会在jqm中放置搜索框样式

1 个答案: