个人中心
gpt4 book ai didi

css - 覆盖谷歌地图在 jqm 中放置搜索框样式

转载 作者：行者123 更新时间：2023-12-02 08:37:11 25 4
gpt4 key购买 nike

我正在尝试整合 Google maps Places search box进入我的 jQuery 移动应用程序。

我在 jQuery Mobile 中创建了一个带有首选样式的搜索框。我想使用这个搜索框而不是标准的谷歌搜索框。但出于某种原因，我的搜索框样式被谷歌地图搜索框样式覆盖，如下图 (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>

最佳答案

删除第 51 行:

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

此行的目的是将元素“input”嵌入 map 的特定位置“TOP_LEFT”。 See google documentation .我试用了您的代码并将其注释掉，并观察到您正在寻找的结果。

关于css - 覆盖谷歌地图在 jqm 中放置搜索框样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20236812/

25 4 0
文章推荐： requirejs - 通过 requirejs 加载 slickgrid
文章推荐： batch-file - 执行第一个命令后批处理文件停止执行
文章推荐： c - 有效地使用 cuda 共享内存来存储字符
文章推荐： less - 基于参数存在的条件混合
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com