Html GoogleMapsAPI：利用总标记生成变量
抱歉，如果之前已经回答了这个问题。我在做标题时被警告可能有类似的问题，但我没有发现任何东西。我正在做一个基于位置数据的统计程序，但我不知道如何实际使用生成的结果作为变量。下面的代码是我工作的基础，并根据纬度和经度提供了多达60家附近的餐厅。有没有办法获取生成的标记的总数，并将其转换为一个变量，该变量可以在其他对象中引用，例如HTML表，或引用变量的其他类似项？此外，提供的API应该可以工作，但是您可能需要自己的API密钥来实现这一点Html GoogleMapsAPI：利用总标记生成变量,html,api,google-maps,counter,Html,Api,Google Maps,Counter,抱歉，如果之前已经回答了这个问题。我在做标题时被警告可能有类似的问题，但我没有发现任何东西。我正在做一个基于位置数据的统计程序，但我不知道如何实际使用生成的结果作为变量。下面的代码是我工作的基础，并根据纬度和经度提供了多达60家附近的餐厅。有没有办法获取生成的标记的总数，并将其转换为一个变量，该变量可以在其他对象中引用，例如HTML表，或引用变量的其他类似项？此外，提供的API应该可以工作，但是您可能需要自己的API密钥来实现这一点 <!DOCTYPE html> <html&
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Place search pagination</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#right-panel {
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#right-panel select, #right-panel input {
font-size: 15px;
}
#right-panel select {
width: 100%;
}
#right-panel i {
font-size: 12px;
}
#right-panel {
font-family: Arial, Helvetica, sans-serif;
position: absolute;
right: 5px;
top: 60%;
margin-top: -195px;
height: 330px;
width: 200px;
padding: 5px;
z-index: 5;
border: 1px solid #999;
background: #fff;
}
h2 {
font-size: 22px;
margin: 0 0 5px 0;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
height: 271px;
width: 200px;
overflow-y: scroll;
}
li {
background-color: #f1f1f1;
padding: 10px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
li:nth-child(odd) {
background-color: #fcfcfc;
}
#more {
width: 100%;
margin: 5px 0 0 0;
}
</style>
<script>
// 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">
var map;
function initMap() {
// Create the map.
var pyrmont = {lat: -33.866, lng: 151.196};
map = new google.maps.Map(document.getElementById('map'), {
center: pyrmont,
zoom: 17
});
// Create the places service.
var service = new google.maps.places.PlacesService(map);
var getNextPage = null;
var moreButton = document.getElementById('more');
moreButton.onclick = function() {
moreButton.disabled = true;
if (getNextPage) getNextPage();
};
// Perform a nearby search.
service.nearbySearch(
{location: pyrmont, radius: 500, type: ['restaurants']},
function(results, status, pagination) {
if (status !== 'OK') return;
createMarkers(results);
moreButton.disabled = !pagination.hasNextPage;
getNextPage = pagination.hasNextPage && function() {
pagination.nextPage();
};
});
}
function createMarkers(places) {
var bounds = new google.maps.LatLngBounds();
var placesList = document.getElementById('places');
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,
title: place.name,
position: place.geometry.location
});
var li = document.createElement('li');
li.textContent = place.name;
placesList.appendChild(li);
document.getElementById('number_results').innerHTML = placesList.children.length + " returned";
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
}
</script>
</head>
<body>
<div id="map"></div>
<div id="right-panel">
<h2>Results</h2>
<div id="number_results"></div>
<ul id="places"></ul>
<button id="more">More results</button>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBYoCkx3owRBY3uLwBvW36B0GNeMQtBm1o&libraries=places&callback=initMap" async defer></script>
</body>
</html>
结果
更多结果
document.getElementById("val").innerHTML = "Based on your latitude of " + lat + " and longitude of " + lng + ", the total number of libraries are: " + document.getElementById('places').children.length + ".";
createMarkers#地图{
身高：100%；
}
html，
身体{
身高：100%；
保证金：0；
填充顶部：10px；
左侧填充：10px；
右边填充：10px；
背景色：#fff
}
#右面板{
字体系列：“机器人”，“无衬线”；
线高：30px；
左侧填充：10px；
}
#右面板选择，
#右面板输入{
字体大小：15px；
}
#右面板选择{
宽度：100%；
}
#右面板i{
字体大小：12px；
}
#右面板{
字体系列：Arial、Helvetica、无衬线字体；
位置：绝对位置；
右：5px；
最高：60%；
利润上限：-395px；
高度：650px；
宽度：200px；
填充：10px；
左侧填充：10px；
z指数：10；
边框：1px实心#999；
背景：#fff；
}
氢{
字体大小：23px；
保证金：0.5px 0；
}
保险商实验室{
列表样式类型：无；
填充：0；
保证金：0；
高度：580px；
宽度：200px；
溢出y：滚动；
}
李{
背景色：#ffc965；
填充物：5px；
文本溢出：省略号；
空白：nowrap；
溢出：隐藏；
}
李：第n个孩子（单数）{
背景色：#fff065；
}
#更多{
宽度：100%；
保证金：5px0；
}
输入[类型=文本]，
挑选{
宽度：100%；
填充：12px 20px；
利润率：8px0；
显示：内联块；
边框：1px实心#ccc；
边界半径：4px；
框大小：边框框；
背景色：#ffefe5
}
.集装箱{
边界半径：5px；
背景色：#fff填充：80px；
宽度：80%
}
钮扣{
宽度：100%；
背景色：#8f20b6；
颜色：白色；
填充：14px 20px；
利润率：8px0；
边界：无；
边界半径：4px；
光标：指针；
}
按钮：悬停{
背景色：#cba00d；
}
桌子{
宽度：100%；
背景色：#8f20b6；
颜色：白色；
填充：25px 0px；
利润率：8px0；
边界：无；
光标：指针；
}
拉特
液化天然气
提交
位置
更多结果
var red_图标http://maps.google.com/mapfiles/ms/icons/red-dot.png';
var映射；
var lat=41.18076；
液化天然气风险=-73.20537；
函数initMap（）{
//创建地图。
变量集={
拉特：拉特，
液化天然气：液化天然气
};
map=new google.maps.map（document.getElementById（'map'）{
中心：设定，
缩放：13
});
google.maps.event.addListener（映射，'click'，函数（e）{
document.getElementById（'lat'）。value=e.latLng.lat（）；
document.getElementById（'lng'）。value=e.latLng.lng（）；
})
//创建places服务。
var service=newgoogle.maps.places.PlacesService（地图）；
var getNextPage=null；
var moreButton=document.getElementById（'more'）；
moreButton.onclick=函数（）{
moreButton.disabled=true；
if（getNextPage）getNextPage（）；
};
//执行附近的搜索。
服务，近距离搜索({
地点:集,，
半径：9500，
关键词：“图书馆”
},
功能（结果、状态、分页）{
如果（状态！=='OK'）返回；
创建标记（结果）；
moreButton.disabled=！pagination.hasNextPage；
getNextPage=pagination.hasNextPage&&function（）{
分页。下一页（）；
};
});
}
函数createMarkers（位置）{
var bounds=new google.maps.LatLngBounds（）；
var placesList=document.getElementById（'places'）；
for（var i=0，place；place=places[i]；i++）{
var marker=new google.maps.marker({
地图：地图，
图标：红色图标，
标题：place.name，
位置：place.geometry.location
});
var li=document.createElement（'li'）；
li.textContent=place.name；
placesList.appendChild（li）；
document.getElementById（'number_results'）。innerHTML=placesList.childrence.length+“returned”；
扩展（place.geometry.location）；
var spookRating1=li*100
}
映射边界（bounds）；
document.getElementById（“val”）.innerHTML=“根据您的纬度“+lat+”和经度“+lng+”，库的总数为：“+document.getElementById（'places'）.children.length+”；
}
职能转变中心（）{
var newLat=parseFloat（document.getElementById（“lat”）.value）；
var newLng=parseFloat（document.getElementById（“lng”）.value）；
地图设置中心({
拉特：纽拉特，
液化天然气：新液化天然气
});
返回false；
}
results.lengthfunction createMarkers(places) {
var bounds = new google.maps.LatLngBounds();
var placesList = document.getElementById('places');
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: red_icon,
title: place.name,
position: place.geometry.location
});
var li = document.createElement('li');
li.textContent = place.name;
placesList.appendChild(li);
document.getElementById('number_results').innerHTML = placesList.children.length + " returned";
bounds.extend(place.geometry.location);
var spookRating1 = li * 100
}
map.fitBounds(bounds);
document.getElementById("val").innerHTML = "Based on your latitude of " + lat + " and longitude of " + lng + ", the total number of libraries are: " + document.getElementById('places').children.length + ".";
}