谷歌地图 api 地理定位和地点搜索
Posted
技术标签:
【中文标题】谷歌地图 api 地理定位和地点搜索【英文标题】：google maps api geolocation and place search 【发布时间】：2013-06-24 02:06:54 【问题描述】：我想在我的网络应用中包含谷歌地图，因为我正在使用谷歌地图 API。
我在地图上同时包含地点搜索和地理定位（我有一个用于地理定位的按钮），但我注意到一旦按下地理定位按钮，地点搜索就不起作用，地点搜索不起作用。
有什么想法吗？
这是我的代码
<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" >
<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" cellspacing="0" valign="center" style="background-color:rgba(240, 255, 255, 0.4) ;position:fixed; bottom:0;">
<tr >
<td >
<img src="browser_resources/close.png" class="button" onclick="window.close()" >
</td>
<td >
<img src="browser_resources/new_window.png" class="button" onclick="window.open('maps.html','_blank', 'location=no, menubar=no, status=no, titlebar=no' )" >
</td>
<td ></td>
<td id="divider" bgcolor="#999999">
</td>
<td ></td>
<td >
<img src="maps_resources/Search.png" class="button" onclick="$( '#dialog-message' ).dialog( 'open' ); " >
</td>
<td >
<img src="maps_resources/Search.png" class="button" onclick="geolocate()" >
</td>
<td ></td>
</tr>
</table>
</body>
</html>
【问题讨论】：
【参考方案1】：您正在使用新的地图实例覆盖geolocate 中的可见地图。但是用于场所相关代码的 Maps-instance 仍然是在 initialize 中创建的实例（它仍然作为对象存在，但不再绑定到您看到的地图）。因此，您的地点代码仍然有效，但您看不到任何更改。
解决方案：不要在 geolocate 内创建新的 Maps-instance，而是让 initialize 内创建的 Maps-instance 全局可访问（通过删除 var-keyword）
-
删除
initialize() 中的var-关键字：
varmap = new google.maps.Map(document.getElementById('map-canvas'), mapTypeId：google.maps.MapTypeId.ROADMAP );
注意：你已经定义了函数initialize() 2次，这里只有第2个函数很重要，第一个函数会被覆盖。
geolocate() 中删除它 map = new google.maps.Map(document.getElementById('map-canvas'),
地图选项）；
也将其从文档中删除：
这里不是问题，但是当你多次包含 API 脚本时可能会出现问题【讨论】：
对 Molle 博士的无知感到抱歉，但我该怎么做呢？ @edvilme：抱歉，我认为它现在已修复，因为您已经接受了答案。我在上面添加了详细信息。以上是关于谷歌地图 api 地理定位和地点搜索的主要内容，如果未能解决你的问题，请参考以下文章