谷歌地图API:热图&搜索-无法合并到单个映射中
Google Maps API: Heatmap & Search - Cannot merge into single map
我正在尝试使用Google地图和Twitter API来从Twitter生成某个主题/关键字的城市可搜索热图。
我有热图和搜索图分别工作，但找不到任何关于如何合并这两张地图的文档，所以一张地图有一个可以按城市搜索的热图。
如果删除中的&callback=initAutocomplete
script async defer
src="https://maps.googleapis.com/maps/api/js?libraries=visualization,places&callback=initMap&callback=initAutocomplete"
这将显示热图，但没有搜索栏。如果你把它留在里面，它会显示带有热图按钮的搜索栏。搜索栏可以工作，但如果你导航到旧金山，热图上就没有点了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Heatmaps</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#floating-panel {
background-color: #fff;
border: 1px solid #999;
left: 25%;
padding: 5px;
position: absolute;
top: 10px;
z-index: 5;
}
#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 300px;
}
#pac-input:focus {
border-color: #4d90fe;
}
.pac-container {
font-family: Roboto;
}
</style>
</head>
<body>
<div id="floating-panel">
<button onclick="toggleHeatmap()">Toggle Heatmap</button>
<button onclick="changeGradient()">Change gradient</button>
<button onclick="changeRadius()">Change radius</button>
<button onclick="changeOpacity()">Change opacity</button>
</div>
<div id="map"></div>
<script>
// This example requires the Visualization library. Include the libraries=visualization
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization">
var map, heatmap;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 37.775, lng: -122.434},
mapTypeId: google.maps.MapTypeId.SATELLITE
});
heatmap = new google.maps.visualization.HeatmapLayer({
data: getPoints(),
map: map
});
}
function toggleHeatmap() {
heatmap.setMap(heatmap.getMap() ? null : map);
}
function changeGradient() {
var gradient = [
'rgba(0, 255, 255, 0)',
'rgba(0, 255, 255, 1)',
'rgba(0, 191, 255, 1)',
'rgba(0, 127, 255, 1)',
'rgba(0, 63, 255, 1)',
'rgba(0, 0, 255, 1)',
'rgba(0, 0, 223, 1)',
'rgba(0, 0, 191, 1)',
'rgba(0, 0, 159, 1)',
'rgba(0, 0, 127, 1)',
'rgba(63, 0, 91, 1)',
'rgba(127, 0, 63, 1)',
'rgba(191, 0, 31, 1)',
'rgba(255, 0, 0, 1)'
]
heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
}
function changeRadius() {
heatmap.set('radius', heatmap.get('radius') ? null : 20);
}
function changeOpacity() {
heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
}
// Heatmap data: 500 Points
function getPoints() {
return [
new google.maps.LatLng(37.782551, -122.445368),
new google.maps.LatLng(37.782745, -122.444586),
new google.maps.LatLng(37.782842, -122.443688),
new google.maps.LatLng(37.782919, -122.442815),
new google.maps.LatLng(37.782992, -122.442112),
new google.maps.LatLng(37.783100, -122.441461),
new google.maps.LatLng(37.783206, -122.440829),
new google.maps.LatLng(37.783273, -122.440324),
new google.maps.LatLng(37.783316, -122.440023),
new google.maps.LatLng(37.783357, -122.439794),
new google.maps.LatLng(37.783371, -122.439687),
new google.maps.LatLng(37.783368, -122.439666),
new google.maps.LatLng(37.783383, -122.439594),
new google.maps.LatLng(37.783508, -122.439525),
new google.maps.LatLng(37.783842, -122.439591),
new google.maps.LatLng(37.784147, -122.439668),
new google.maps.LatLng(37.784206, -122.439686),
new google.maps.LatLng(37.784386, -122.439790),
new google.maps.LatLng(37.784701, -122.439902),
new google.maps.LatLng(37.784965, -122.439938),
new google.maps.LatLng(37.785010, -122.439947),
new google.maps.LatLng(37.785360, -122.439952),
new google.maps.LatLng(37.785715, -122.440030),
new google.maps.LatLng(37.786117, -122.440119),
new google.maps.LatLng(37.786564, -122.440209),
new google.maps.LatLng(37.786905, -122.440270),
new google.maps.LatLng(37.786956, -122.440279),
new google.maps.LatLng(37.800224, -122.433520),
new google.maps.LatLng(37.800155, -122.434101),
new google.maps.LatLng(37.800160, -122.434430),
new google.maps.LatLng(37.800378, -122.434527),
new google.maps.LatLng(37.800738, -122.434598),
new google.maps.LatLng(37.800938, -122.434650),
new google.maps.LatLng(37.801024, -122.434889),
new google.maps.LatLng(37.800955, -122.435392),
new google.maps.LatLng(37.800886, -122.435959),
new google.maps.LatLng(37.800811, -122.436275),
new google.maps.LatLng(37.800788, -122.436299),
new google.maps.LatLng(37.800719, -122.436302),
new google.maps.LatLng(37.800702, -122.436298),
new google.maps.LatLng(37.800661, -122.436273),
new google.maps.LatLng(37.800395, -122.436172),
new google.maps.LatLng(37.800228, -122.436116),
new google.maps.LatLng(37.800169, -122.436130),
new google.maps.LatLng(37.800066, -122.436167),
new google.maps.LatLng(37.784345, -122.422922),
new google.maps.LatLng(37.784389, -122.422926),
new google.maps.LatLng(37.784437, -122.422924),
new google.maps.LatLng(37.784746, -122.422818),
new google.maps.LatLng(37.785436, -122.422959),
new google.maps.LatLng(37.786120, -122.423112),
new google.maps.LatLng(37.786433, -122.423029),
new google.maps.LatLng(37.786631, -122.421213),
new google.maps.LatLng(37.786660, -122.421033)
];
}
</script>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
<script>
// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
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)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?libraries=visualization,places&callback=initMap&callback=initAutocomplete">
</script>
</body>
</html>
在两个独立的初始化函数中创建了两个独立映射。
一种选择：
- 移除其中一个映射（确保剩余的initialize函数初始化全局
map变量） -
在onload函数中同时调用
initMap和initAutocomplete（或将它们组合为一个函数）。google.maps.event.addDomListener（窗口，'load'，function（）{initMap（）；initAutocomplete（）})；
概念验证小提琴（将搜索框移动到浮动面板上）
代码片段：
// This example requires the Visualization library. Include the libraries=visualization
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization">
var map, heatmap;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {
lat: 37.775,
lng: -122.434
},
mapTypeId: google.maps.MapTypeId.SATELLITE
});
heatmap = new google.maps.visualization.HeatmapLayer({
data: getPoints(),
map: map
});
}
function toggleHeatmap() {
heatmap.setMap(heatmap.getMap() ? null : map);
}
function changeGradient() {
var gradient = [
'rgba(0, 255, 255, 0)',
'rgba(0, 255, 255, 1)',
'rgba(0, 191, 255, 1)',
'rgba(0, 127, 255, 1)',
'rgba(0, 63, 255, 1)',
'rgba(0, 0, 255, 1)',
'rgba(0, 0, 223, 1)',
'rgba(0, 0, 191, 1)',
'rgba(0, 0, 159, 1)',
'rgba(0, 0, 127, 1)',
'rgba(63, 0, 91, 1)',
'rgba(127, 0, 63, 1)',
'rgba(191, 0, 31, 1)',
'rgba(255, 0, 0, 1)'
]
heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
}
function changeRadius() {
heatmap.set('radius', heatmap.get('radius') ? null : 20);
}
function changeOpacity() {
heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
}
// Heatmap data: 500 Points
function getPoints() {
return [
new google.maps.LatLng(37.782551, -122.445368),
new google.maps.LatLng(37.782745, -122.444586),
new google.maps.LatLng(37.782842, -122.443688),
new google.maps.LatLng(37.782919, -122.442815),
new google.maps.LatLng(37.782992, -122.442112),
new google.maps.LatLng(37.783100, -122.441461),
new google.maps.LatLng(37.783206, -122.440829),
new google.maps.LatLng(37.783273, -122.440324),
new google.maps.LatLng(37.783316, -122.440023),
new google.maps.LatLng(37.783357, -122.439794),
new google.maps.LatLng(37.783371, -122.439687),
new google.maps.LatLng(37.783368, -122.439666),
new google.maps.LatLng(37.783383, -122.439594),
new google.maps.LatLng(37.783508, -122.439525),
new google.maps.LatLng(37.783842, -122.439591),
new google.maps.LatLng(37.784147, -122.439668),
new google.maps.LatLng(37.784206, -122.439686),
new google.maps.LatLng(37.784386, -122.439790),
new google.maps.LatLng(37.784701, -122.439902),
new google.maps.LatLng(37.784965, -122.439938),
new google.maps.LatLng(37.785010, -122.439947),
new google.maps.LatLng(37.785360, -122.439952),
new google.maps.LatLng(37.785715, -122.440030),
new google.maps.LatLng(37.786117, -122.440119),
new google.maps.LatLng(37.786564, -122.440209),
new google.maps.LatLng(37.786905, -122.440270),
new google.maps.LatLng(37.786956, -122.440279),
new google.maps.LatLng(37.800224, -122.433520),
new google.maps.LatLng(37.800155, -122.434101),
new google.maps.LatLng(37.800160, -122.434430),
new google.maps.LatLng(37.800378, -122.434527),
new google.maps.LatLng(37.800738, -122.434598),
new google.maps.LatLng(37.800938, -122.434650),
new google.maps.LatLng(37.801024, -122.434889),
new google.maps.LatLng(37.800955, -122.435392),
new google.maps.LatLng(37.800886, -122.435959),
new google.maps.LatLng(37.800811, -122.436275),
new google.maps.LatLng(37.800788, -122.436299),
new google.maps.LatLng(37.800719, -122.436302),
new google.maps.LatLng(37.800702, -122.436298),
new google.maps.LatLng(37.800661, -122.436273),
new google.maps.LatLng(37.800395, -122.436172),
new google.maps.LatLng(37.800228, -122.436116),
new google.maps.LatLng(37.800169, -122.436130),
new google.maps.LatLng(37.800066, -122.436167),
new google.maps.LatLng(37.784345, -122.422922),
new google.maps.LatLng(37.784389, -122.422926),
new google.maps.LatLng(37.784437, -122.422924),
new google.maps.LatLng(37.784746, -122.422818),
new google.maps.LatLng(37.785436, -122.422959),
new google.maps.LatLng(37.786120, -122.423112),
new google.maps.LatLng(37.786433, -122.423029),
new google.maps.LatLng(37.786631, -122.421213),
new google.maps.LatLng(37.786660, -122.421033)
];
}
// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initAutocomplete() {
/* map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -33.8688,
lng: 151.2195
},
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
}); */
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
// map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
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)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', function() {
initMap();
initAutocomplete()
});html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto', 'sans-serif';
line-height: 30px;
padding-left: 10px;
}
#floating-panel {
background-color: #fff;
border: 1px solid #999;
left: 25%;
padding: 5px;
position: absolute;
top: 10px;
z-index: 5;
}
#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 300px;
}
#pac-input:focus {
border-color: #4d90fe;
}
.pac-container {
font-family: Roboto;
}<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places,visualization"></script>
<div id="floating-panel">
<button onclick="toggleHeatmap()">Toggle Heatmap</button>
<button onclick="changeGradient()">Change gradient</button>
<button onclick="changeRadius()">Change radius</button>
<button onclick="changeOpacity()">Change opacity</button>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
</div>
<div id="map"></div>相关文章：
- JQuery合并了keyup和focusout两个函数
- Javascript，有没有一种方法可以将数组写成没有逗号或空格的单个文本字符串
- 如何使用javascript获取嵌套对象中所有子对象的单个属性
- 是否可以禁用jquery中的单个单选按钮
- JSON重构(合并内容）与javascript
- 谷歌地图API:热图&搜索-无法合并到单个映射中
- 压缩脚本和样式，并将所有js和样式引用合并为单个引用，以优化网站性能
- 将培根流中的所有值合并到单个数组中
- 如何将这些函数合并为具有属性的单个函数
- 使用lodash将重复对象合并到单个数组中
- 合并对象&对单个属性javascript求和
- Javascript -合并单个对象属性
- 合并两个数据uri以创建单个图像
- 如何将两个对象合并为包含方法的单个对象
- 使用rowspan将重复值单元格合并为具有相同空间的单个单元格
- CoffeeScript:使用lodash(_.js）将列表合并为单个列表
- 我可以将z索引层合并到单个图像中吗
- Angular:使用gulp将Angular js文件合并为单个js文件后出现错误
- 将从多个网页中抓取的数据合并为单个页面
- 如何将异构数组合并到MongoDb中的单个文档
