- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想在我的 Web 应用程序中包含 Google map ,为此我使用了 google maps API。
我在 map 上同时包含地点搜索和地理定位(我有一个地理定位按钮),但我发现按下地理定位按钮后地点搜索不起作用,地点搜索不起作用。
有什么想法吗?
这是我的代码
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="theme.css">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style type="text/css" media="screen">
</style>
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
#target
{
width: 10%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
/*map*/
// Enable the visual refresh
google.maps.visualRefresh = true;
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
/*map end*/
/*search*/
function initialize() {
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);
var input = /** @type {HTMLInputElement} */(document.getElementById('target'));
var searchBox = new google.maps.places.SearchBox(input);
var markers = [];
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
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)
};
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);
});
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
/*end search*/
</script>
<script>
/*geolocation*/
var map;
function geolocate() {
var mapOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Current Location'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
/*/geolocation*/
</script>
</head>
<body>
<!--search dialog-->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#dialog-message" ).dialog({ autoOpen: false });
$(' #dialog-message ').dialog({dialogClass:'search'});
$( "#dialog-message" ).dialog({
modal: true,
});
});
</script>
<style type="text/css" media="screen">
.search { background:rgba(240, 255, 255, 0.4);}
.ui-widget-header {font-family: source sans pro; background: white; border: none; border-radius: 0px}
.pac-container {font-family: source sans pro !important; font-size: 20px !important; min-height: 20% !important}
</style>
<div style="font-family: source sans pro;" id="dialog-message" title="Download complete" class="draggable" >
<p>
<div id="panel" width="100%" height="100%">
<input type="text" id="target" placeholder="Search Box" style="width: 100%; font-family: source sans pro; font-size: 20px; height: auto">
</div>
</div>
<!--/search dialog-->
<table>
<div id="map-canvas"></div>
<table id="commandbar" width="100%" height="5%" cellspacing="0" valign="center" style="background-color:rgba(240, 255, 255, 0.4) ;position:fixed; bottom:0;">
<tr height="2.5%">
<td width="2.5%" height="2.5%" >
<img src="browser_resources/close.png" class="button" onclick="window.close()" width="10em">
</td>
<td width="2.5%" height="2.5%" >
<img src="browser_resources/new_window.png" class="button" onclick="window.open('maps.html','_blank', 'location=no, menubar=no, status=no, titlebar=no' )" width="100%">
</td>
<td width="1px"></td>
<td width="1px" id="divider" bgcolor="#999999">
</td>
<td width="1px"></td>
<td width="2.5%">
<img src="maps_resources/Search.png" class="button" onclick="$( '#dialog-message' ).dialog( 'open' ); " width="100%">
</td>
<td width="2.5%">
<img src="maps_resources/Search.png" class="button" onclick="geolocate()" width="100%">
</td>
<td width="95%"></td>
</tr>
</table>
</body>
</html>
最佳答案
您正在使用新的 map 实例覆盖 geolocate
中的可见 map 。但是用于与地点相关的代码的 Maps-instance 仍然是在 initialize 中创建的实例(它仍然作为一个对象存在,但不再绑定(bind)到你看到的 map )。因此,您的地点代码仍然有效,但您看不到任何变化。
解决方案:不是在 geolocate
中创建新的 map 实例,而是让在 initialize
中创建的 map 实例全局可访问(通过删除 var 关键字)
initialize()
中的 var
-关键字: varmap = new google.maps.Map(document.getElementById('map-canvas'), { mapTypeId: google.maps.MapTypeId.ROADMAP });
注意:您已经定义函数 initialize()
2 次,这里只有第二个函数很重要,第一个函数将被覆盖。
geolocate()
中移除这个 map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"><script>
关于javascript - google maps api 地理定位和地点搜索,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17267122/
$query = "SELECT Name, CountryCode FROM City ORDER BY Name"; if ($result = $mysqli->query($query)) {
我是 GWT 的新手,我的英语不太好,请见谅。 我需要使用 GWT 创建一个网站。该网站具有层次结构:主要的全局标题和几个按钮。每个按钮都会打开应用程序的新部分,该部分有自己的子选项卡。每个子选项卡都
我正在尝试使用此网站 https://www.timeanddate.com/weather/通过打开如下 URL 使用 BeautifulSoup4 抓取天气数据: quote_page=r"htt
由于我要在移动应用中使用谷歌地图和地点,因此我不希望任何东西减慢应用加载速度。 我发现在边缘网络上,我的应用程序启动速度非常慢。我所有的js都是本地的,所以只有谷歌地图和地点需要很长时间才能加载(如果
我可以通过带有位置 ID 的图形 API 发送查询来返回位置的详细信息,但是我希望实现相反的结果 - 通过发送包含位置名称(城市,州等)。这可能吗? 最佳答案 这在几种不同的方法下是可能的。您可以使用
我正在尝试返回仅限于某种区域的自动完成结果 - the (regions) type collection instructs the Places service to return any res
我有一个多语言网站... 我在 visual studio 中为语言(en + 我的语言)制作了两个文件夹,并为每个文件夹制作了我的网站! 对于一种语言的网站,我有一门类(class)可以根据我的文化
我使用 this向FS请求获取 field 但有些场馆与要求的位置之间的距离超过 500 米。换句话说,ll 和 radius 参数没有像我预期的那样工作。因为我希望拥有所请求区域的所有 field
如果我有一段文本,例如包含一篇加泰罗尼亚语报纸文章,我如何从该文本中找到所有城市? 我一直在查看 python 的 nltk 包,我已经下载了加泰罗尼亚语的语料库 (nltk.corpus.cess_
R 的帮助系统很棒,我喜欢几乎所有函数的帮助页面都包含一个示例,但有时我希望有一种方法可以查看示例代码的结果,而无需复制并粘贴到我当前的 session 中。这对于图形功能来说是双重的。 有没有办法执
我想实现类似的效果,其中引脚被分组在一起,然后当您接近点时用动画分开。当您选择带有地理标记应用的地点时,会在“照片”应用中看到此效果 最佳答案 似乎没有,但有一个第三方库提供了此功能: http://
我在报表生成器/设计模式中看到,有一个“位置”和“位置”属性,可让您设置表格应显示在距顶部或左侧的距离。 我的问题是,有没有办法在同一位置设置 2 个或更多表格(即页面顶部,从顶部开始 0,从左边开始
所以,我有一个 Spring MVC 应用程序,我想要一种方法来确定资源何时不支持特定媒体类型。我正在考虑使用自定义 View 解析器来执行此操作...如果没有一个 View 解析器找到 View 名
有了这个类 import UIKit import CoreLocation private let geometryKey = "geometry" private let locationKey
我正在构建一个系统,其中应该有一个包含组织、位置、部门和用户的数据库。它们按照您的预期连接起来: 每个组织可以包含一个或多个地点 每个地点(建筑物)可以包含一个或多个部门 每个部门工作一名或多名用户
我一直在旧项目上使用 Google place API,但在那些项目中我必须选择一个地方,然后 API 返回给我相关信息地方... 问题是使用相同的 API 我可以请求一个地方,例如 Restaura
这里我有一个脚本,它通过 google places api 显示对象的开放时间。 http://jsbin.com/ATaZEXE/4 现在我想将 .label 类的背景颜色更改为“红色”,如果 p
我正在开发一款 Google map 应用,目标用户可能需要关于特定位置的路线,这些位置只能通过应用中的经纬度获知。 问题是方向需要解析为人类可读的名称,最好是任何位置都可以相对于另一个附近的位置进行
我正在开发一款应用程序,我相信它会对学生有所帮助。我想根据位置包括天气(仅温度)。例如,如果我要从一个城市前往另一个城市,我希望它能针对新城市自动更新。我该怎么做?对于我的第二个问题,我还想将日期(即
我正在使用上游模块来平衡我的网站。出于某种原因,我必须将一些请求重定向到指定的服务器。简而言之:我想将 domain.com 重定向到指定的服务器,domain.com/anything 可以由上游模
我是一名优秀的程序员,十分优秀!