谷歌地图没有出现，但搜索框有
[英]google map does not appear but the search box does
问题描述
谷歌地图不会出现，但搜索框会出现。 我不知道这段代码有什么问题。 我什至设置了div大小，这可能是没有出现在屏幕上的原因。 我没有附上 CSS 文件。 我的代码如下：
HTML代码：
<body>
<div id="wrapper">
<nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="header-right">
<img src="logo (1).ico" height="70px" width="70px" alt="Invite Logo">
<img src="logo (2).ico" height="70px" width="70px" alt="Invite Logo">
</div>
</nav>
<nav class="navbar-default navbar-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<div class="user-img-div">
<img src="user.png" class="img-thumbnail" />
<div class="inner-text">
Khadiza Kobra
</div>
</div>
</li>
<li>
<a href="check-in.html"><i class="fa fa-dashboard "></i>Maps</a>
</li>
<li>
<a href="friends.html"><i class="fa fa-desktop"></i>My Circle</a>
</li>
<li>
<a class="active-menu-top" href="#"><i class="fa fa-yelp "></i>Settings<span class="fa arrow"></span></a>
<ul class="nav nav-second-level collapse in">
<li>
<a href="profile.html"><i class="fa fa-coffee"></i>Profile</a>
</li>
<li>
<a href="account settings.html"><i class="fa fa-flash "></i>account settings</a>
</li>
<li>
<a class="active-menu" href="index.html"><i class="fa fa-send "></i>logout</a>
</li>
</ul>
</li>
<li>
<a href="notifications.html"><i class="fa fa-flash "></i>notifications</a>
</li>
<li>
<a href="friends reviews.html"><i class="fa fa-anchor "></i>Friends reviews</a>
</li>
</ul>
</div>
</nav>
<div id="page-wrapper" >
<div id="page-inner" >
<div class="row">
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
<script>
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 23.685, lng: 90.3563},
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
var icon = {
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)
};
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
setMarkers(map);
}
var beaches = [
['Dhaka', 23.777176, 90.399452, 4],
['Mirpur 10', 23.8375, 90.3753, 5],
['Shahbag', 23.7381, 90.3954, 3],
['Dhanmondi 5', 23.7459, 90.3852, 2],
['MIST Mirpur', 23.8383, 90.3606, 1]
];
function setMarkers(map) {
var image = {
url: 'map_icon.png',
size: new google.maps.Size(20, 32),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, 32)
};
var shape = {
coords: [1, 1, 1, 20, 18, 20, 18, 1],
type: 'poly'
};
for (var i = 0; i < beaches.length; i++) {
var beach = beaches[i];
var marker = new google.maps.Marker({
position: {lat: beach[1], lng: beach[2]},
map: map,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}
</script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyBZlGIVcYhTwGPkeeZKj4GgcODjFps8y8U&sensor=true">
</script>
</body>
2 个解决方案
解决方案1
0 2016-03-31 18:01:48
尝试为您的地图 div 添加一个维度，例如：
<div id="map" style="width: 400px; height:400px;></div>
解决方案2
0 2016-04-01 00:52:18
您没有调用initAutocomplete函数。 将 &callback=initAutocomplete 添加到 API 的包含中（删除&sensor=true ，不再需要）：
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyBZlGIVcYhTwGPkeeZKj4GgcODjFps8y8U&callback=initAutocomplete">
或称之为：
google.maps.event.addDomListener(window, "load", initAutocomplete);
代码片段：
function initAutocomplete() { var map = new google.maps.Map(document.getElementById('map'), { center: { lat: 23.685, lng: 90.3563 }, zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); var input = document.getElementById('pac-input'); var searchBox = new google.maps.places.SearchBox(input); map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); map.addListener('bounds_changed', function() { searchBox.setBounds(map.getBounds()); }); var markers = []; searchBox.addListener('places_changed', function() { var places = searchBox.getPlaces(); if (places.length == 0) { return; } markers.forEach(function(marker) { marker.setMap(null); }); markers = []; var bounds = new google.maps.LatLngBounds(); places.forEach(function(place) { var icon = { 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) }; markers.push(new google.maps.Marker({ map: map, icon: icon, title: place.name, position: place.geometry.location })); if (place.geometry.viewport) { bounds.union(place.geometry.viewport); } else { bounds.extend(place.geometry.location); } }); map.fitBounds(bounds); }); setMarkers(map); } var beaches = [ ['Dhaka', 23.777176, 90.399452, 4], ['Mirpur 10', 23.8375, 90.3753, 5], ['Shahbag', 23.7381, 90.3954, 3], ['Dhanmondi 5', 23.7459, 90.3852, 2], ['MIST Mirpur', 23.8383, 90.3606, 1] ]; function setMarkers(map) { var image = { url: 'map_icon.png', size: new google.maps.Size(20, 32), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(0, 32) }; var shape = { coords: [1, 1, 1, 20, 18, 20, 18, 1], type: 'poly' }; for (var i = 0; i < beaches.length; i++) { var beach = beaches[i]; var marker = new google.maps.Marker({ position: { lat: beach[1], lng: beach[2] }, map: map, icon: image, shape: shape, title: beach[0], zIndex: beach[3] }); } } google.maps.event.addDomListener(window, "load", initAutocomplete);
#map { height: 400px; width: 400px; margin: 0px; padding: 0px }
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places"></script> <div id="wrapper"> <nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="header-right"> <img src="logo (1).ico" height="70px" width="70px" alt="Invite Logo"> <img src="logo (2).ico" height="70px" width="70px" alt="Invite Logo"> </div> </nav> <nav class="navbar-default navbar-side" role="navigation"> <div class="sidebar-collapse"> <ul class="nav" id="main-menu"> <li> <div class="user-img-div"> <img src="user.png" class="img-thumbnail" /> <div class="inner-text"> Khadiza Kobra </div> </div> </li> <li> <a href="check-in.html"><i class="fa fa-dashboard "></i>Maps</a> </li> <li> <a href="friends.html"><i class="fa fa-desktop"></i>My Circle</a> </li> <li> <a class="active-menu-top" href="#"><i class="fa fa-yelp "></i>Settings<span class="fa arrow"></span></a> <ul class="nav nav-second-level collapse in"> <li> <a href="profile.html"><i class="fa fa-coffee"></i>Profile</a> </li> <li> <a href="account settings.html"><i class="fa fa-flash "></i>account settings</a> </li> <li> <a class="active-menu" href="index.html"><i class="fa fa-send "></i>logout</a> </li> </ul> </li> <li> <a href="notifications.html"><i class="fa fa-flash "></i>notifications</a> </li> <li> <a href="friends reviews.html"><i class="fa fa-anchor "></i>Friends reviews</a> </li> </ul> </div> </nav> <div id="page-wrapper"> <div id="page-inner"> <div class="row"> <input id="pac-input" class="controls" type="text" placeholder="Search Box"> <div id="map"></div>
Google Map Markers没有出现在$ .getJSON Javascript中
[英]Google Map Markers does not appear in $.getJSON Javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.