Css 覆盖Google Maps在jqm中放置搜索框样式
我正在尝试集成到我的jQuery移动应用程序中 我在jQuery Mobile中创建了一个带有首选样式的搜索框。我想用这个搜索框代替标准的谷歌搜索框。但由于某些原因，我的搜索框样式被谷歌地图搜索框样式所覆盖，如下图（1）所示。有人能给我推荐一种方法来达到图2所示的预期效果吗。请也找到我的完整代码。我将感谢任何人的帮助 下图（2）显示了我试图实现的目标 完整代码Css 覆盖Google Maps在jqm中放置搜索框样式,css,google-maps,jquery-mobile,google-maps-api-3,css-position,Css,Google Maps,Jquery Mobile,Google Maps Api 3,Css Position,我正在尝试集成到我的jQuery移动应用程序中 我在jQuery Mobile中创建了一个带有首选样式的搜索框。我想用这个搜索框代替标准的谷歌搜索框。但由于某些原因，我的搜索框样式被谷歌地图搜索框样式所覆盖，如下图（1）所示。有人能给我推荐一种方法来达到图2所示的预期效果吗。请也找到我的完整代码。我将感谢任何人的帮助 下图（2）显示了我试图实现的目标 完整代码 <!DOCTYPE html> <html> <head> <title>
<!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>
页面标题
#地图页，地图画布{宽度：100%；高度：80%；填充：0；}
.container_16，#set_位置{
z指数：1；
}
.container_16.alpha{clear left:0；}
.grid_3、.grid_13{margin:0；padding:1.5%！重要；边框：0；float:left；}
.container_16{溢出：隐藏；}
.container_16.grid_3{
宽度：15.75%！重要；
}
.container_16.grid_13{
宽度：78.25%！重要；
}
函数初始化（）{
var标记=[]；
var map=new google.maps.map（document.getElementById（'map_canvas'）{
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var defaultBounds=new google.maps.LatLngBounds(
新的google.maps.LatLng（-33.8902151.1759），
新的google.maps.LatLng（-33.8474151.2631））；
map.fitBounds（defaultBounds）；
//创建搜索框并将其链接到UI元素。
变量输入=/**@type{HTMLInputElement}*/(
document.getElementById（'search_location'）；//pac输入更改为search_location
map.controls[google.maps.ControlPosition.TOP_LEFT].push（输入）；
var searchBox=new google.maps.places.searchBox(
/**@type{HTMLInputElement}*/（输入））；
//[开始区域\u getplaces]
//侦听当用户从中选择项目时激发的事件
//选择列表。检索该项目的匹配位置。
google.maps.event.addListener（搜索框，'places_changed'，函数（）{
var places=searchBox.getPlaces（）；
for（var i=0，marker；marker=markers[i]；i++）{
marker.setMap（空）；
}
//对于每个位置，获取图标、地名和位置。
标记=[]；
var bounds=new google.maps.LatLngBounds（）；
for（var i=0，place；place=places[i]；i++）{
变量图像={
url:place.icon，
大小：新谷歌地图大小（71,71），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（17,34），
scaledSize:new google.maps.Size（25,25）
};
//为每个地方创建一个标记。
var marker=new google.maps.marker({
地图：地图，
图标：图像，
标题：place.name，
位置：place.geometry.location
});
标记器。推（标记器）；
扩展（place.geometry.location）；
}
映射边界（bounds）；
});
//[结束区域\u getplaces]
//将搜索框结果偏向在搜索范围内的位置
//当前地图的视口。
google.maps.event.addListener（映射'bounds_changed'，函数（）{
var bounds=map.getBounds（）；
searchBox.setBounds（边界）；
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
取消？
您确定要取消并返回吗？
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);