我知道我的问题不是很具体而且非常笼统。对于那个很抱歉。我是谷歌地图API的新手，不确定什么是最佳或典型的方法。如果你能引导我走向总体方向......
我想建立一个网站，具有以下功能：
感谢您的帮助
答案 0 :(得分：1)
添加了代码实现（仅限客户端）。但需要进行一些调整，以便按要求工作。
- 显示带有标记的地图，突出显示用户的POI
这需要使用后端服务器完成。在页面加载时，从服务器获取详细信息作为响应并将其保存在markers数组中。加载后，迭代数组并在初始化地图时添加标记。
- 每个人都应该能够添加额外的标记（最好是标题，描述和照片）
在以下代码中添加了功能。但是数据不会存储在后端（需要根据需求实现）。目前，标记详细信息存储在本地markers数组中。确保只有在将数据保存到数据库后才将其添加到数组中。
- 除了我以外，任何人都不得更改旧标记。
添加了这些功能（但仅作为静态）。在编辑/删除标记之前需要检查用户范围，并且必须根据您的要求实施。
- 我是否需要担心API请求？例如，如果设置了100个标记并且1000个用户加载了网站，那么已经产生了100,000个请求吗？
API请求仅适用于地图，不适用于标记。根据{{3}}，每24小时可免费提取25000个请求。如果请求超出了免费限制，请参阅定价页面以获取更多信息。
P.S：1。在脚本中添加API密钥。 2.在脚本中使用Google Guides。
<!DOCTYPE html>
<html>
<head>
<style>
.googlemap
{
margin : 0 auto;
height : 600px;
width : 600px;
}
.main_content
{
display: inline-block;
height: 100px;
}
.infowin
{
width:250px;
max-height:200px;
padding : 5px;
background: #fab9b9;
display:inline-block;
}
.infowin_img
{
float:left;
margin:0;
width:70px;
height: 100%;
background: #0db99e;
}
.infowin_img > img
{
height: 100%;
width: 70px;
}
.infowin_content
{
float: left;
margin:0;
background: #1e72d3;
height:100%;
width :180px;
color:white;
padding: 5px;
overflow: scroll;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.btn_div
{
bottom: 0;
width: 100%;
margin: 0 auto;
text-align: center;
}
.button
{
padding: 3px;
width:100px;
color:white;
cursor:pointer;
border-radius: 5px;
text-align: center;
display: inline-block;
}
.edit_btn
{
border: 1px solid #277107;
background: #2e8608;
}
.edit_btn:hover
{
background: #206004;
}
.remove_btn
{
border: 1px solid #e54646;
border-radius: 5px;
background: #dd5f5f;
}
.remove_btn:hover
{
background: #e32424;
}
</style>
</head>
<body>
<div id="googlemap" class="googlemap"></div>
<div id="form" hidden>
<table>
<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>
<tr><td>Description:</td> <td><input type='text' id='description'/> </td> </tr>
<tr><td>Image:</td> <td><input type='file' id='photo'/> </td> </tr>
<tr><td></td> <td><input type='button' value='Save' onclick="GoogleMap.saveLocation()"/> </td> </tr>
</table>
</div>
<div id="infowin" hidden>
<div class="infowin">
<div class="main_content">
<div class="infowin_img">
<img src="dummy.jpg">
</div>
<div class="infowin_content">
<span>PLACE_NAME</span><br>
<span>PLACE_DESCRIPTION</span><br>
<span>Added by : ADDED_BY</span>
</div>
</div>
<div class="btn_div">
<div class="button edit_btn" onclick="GoogleMap.editLocation()">Edit Location</div>
<div class="button remove_btn" onclick="GoogleMap.removeLocation()">Remove Location</div>
</div>
</div>
</div>
<script>
var CommonUtil = (function(){
return {
getInputValue : function(id){
return document.getElementById(id).value;
},
setInputValue : function(id, value){
document.getElementById(id).value = value;
}
};
})();
var GoogleMap = (function(){
var map, selectedmarker, markers=[], infowindow;
var formcontent = document.getElementById("form").innerHTML,
detailscontent = document.getElementById("infowin").innerHTML;
return {
initialize : function(){
map = new google.maps.Map(document.getElementById('googlemap'), {
center: new google.maps.LatLng(52.302516, 16.414546), //Setting Initial Position
zoom: 6,
});
map.addListener("click",function(event){
GoogleMap.addLocation(event.latLng);
})
},
addLocation : function(latlng){
var marker = new google.maps.Marker({
position: latlng,
map: map,
label: markers.length+1
});
marker.addListener("click",function(){
selectedmarker=this;
GoogleMap.showPlaceDetailsToUser(this);
});
GoogleMap.getPlaceDetailsFromUser(marker);
markers.push(marker);
selectedmarker=marker;
},
removeLocation : function(){
markers.splice(markers.indexOf(selectedmarker),1);
if(selectedmarker)
{
selectedmarker.setMap(null);
}
},
editLocation : function(){
GoogleMap.showPlaceDetailsToUser(selectedmarker,true);
CommonUtil.setInputValue("name",selectedmarker.placeInfo.name);
CommonUtil.setInputValue("description",selectedmarker.placeInfo.description);
CommonUtil.setInputValue("photo",selectedmarker.placeInfo.photo);
},
saveLocation : function(){
selectedmarker.placeInfo = selectedmarker.placeInfo || {};
selectedmarker.placeInfo.name = CommonUtil.getInputValue("name")
selectedmarker.placeInfo.description = CommonUtil.getInputValue("description");
selectedmarker.placeInfo.photo = CommonUtil.getInputValue("photo");
selectedmarker.placeInfo.addedBy = Math.random().toString(36).substr(2, 5);
GoogleMap.showPlaceDetailsToUser(selectedmarker);
},
getPlaceDetailsFromUser : function(marker){
GoogleMap.showInfoWindow(formcontent, marker);
},
showPlaceDetailsToUser : function(marker, isedit){
var content = marker.placeInfo && !isedit ? detailscontent.replace("PLACE_NAME",marker.placeInfo.name||"NO_NAME").replace("PLACE_DESCRIPTION",marker.placeInfo.description||"NO_DESCRIPTION").replace("ADDED_BY",marker.placeInfo.addedBy) : formcontent;
GoogleMap.showInfoWindow(content, marker);
},
showInfoWindow : function(content, marker){
if(infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content:content});
infowindow.open(map, marker);
}
}
})();
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=GoogleMap.initialize" type="text/javascript"></script>
</body>
</html>