javascript Google Maps API v3 - 初始化后添加标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28978913/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps API v3 - Add marker after initialize
提问by WhoopitySchmoopity
My end-goal: Load only map markers within current map viewport and if map is moved, reload map markers within new viewport.
我的最终目标：仅加载当前地图视口内的地图标记，如果移动地图，则在新视口内重新加载地图标记。
As far as I know, to do this I need the map corner coordinates which I can only load once the map is idle, that way I can pass these coords to my PHP file to query my database and output the XML for the map markers within the corners (I'm trying to reduce the stress on my DB by restricting the query to only the relevant map area). I'm having trouble adding a dummy marker post-initialize (see code below). It's simply not loading the marker, everything else works fine.
据我所知，要做到这一点，我需要地图角坐标，我只能在地图空闲时加载它，这样我就可以将这些坐标传递给我的 PHP 文件以查询我的数据库并输出地图标记的 XML角落（我试图通过将查询限制为仅相关地图区域来减轻我的数据库的压力）。我在初始化后添加虚拟标记时遇到问题（请参阅下面的代码）。它只是没有加载标记，其他一切正常。
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var map = new google.maps.Map(document.getElementById("googleMap"), {
zoom: 12,
center: new google.maps.LatLng(40.779502, -73.967857)
});
google.maps.event.addListener(map, 'idle', function() {
/*bounds = map.getBounds();
ne = bounds.getNorthEast();
sw = bounds.getSouthWest();
window.top.showBounds();*/
TestMarker();
});
}
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
// Testing the addMarker function
function TestMarker() {
CentralPark = new google.maps.LatLng(40.779502, -73.967857);
addMarker(CentralPark);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
回答by geocodezip
You don't need to wait for the idle event. The map bounds are available the first time the 'bounds_changed' event fires.
您无需等待空闲事件。地图边界在 'bounds_changed' 事件第一次触发时可用。
Wait for the bounds_changed event; whenever the bounds changes (including the first time), then update your markers on the map.
等待 bounds_changed 事件；每当边界发生变化时（包括第一次），然后更新地图上的标记。
code snippet:
代码片段：
var map;
var bounds;
function initialize() {
map = new google.maps.Map(document.getElementById("googleMap"), {
zoom: 12,
center: new google.maps.LatLng(40.779502, -73.967857)
});
google.maps.event.addListener(map, 'bounds_changed', function() {
bounds = map.getBounds();
ne = bounds.getNorthEast();
sw = bounds.getSouthWest();
document.getElementById('mapBounds').innerHTML = bounds.toUrlValue(6);
TestMarker();
});
}
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
// Testing the addMarker function
function TestMarker() {
CentralPark = new google.maps.LatLng(40.779502, -73.967857);
addMarker(CentralPark);
}
google.maps.event.addDomListener(window, 'load', initialize);html,
body,
#googleMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="mapBounds"></div>
<div id="googleMap" style="border: 2px solid #3872ac;"></div>回答by Barhum
Why don't you add another listener event inside your initialize function:
为什么不在初始化函数中添加另一个侦听器事件：
google.maps.event.addListener(map, 'dragend', function(){
var latlng = new google.maps.LatLng(35, -90);
var marker = new google.maps.Marker({
position: latlng
});
marker.setMap(map)
});
回答by Hazarapet Tunanyan
Google Maps Marker adding is very simple thing.I've created an example, for you.In this page there is some basic examples of google maps markers
添加谷歌地图标记是很简单的事情。我已经为你创建了一个例子。在这个页面中有一些谷歌地图标记的基本示例
http://www.w3docs.com/learn-javascript/google-maps-markers.html
http://www.w3docs.com/learn-javascript/google-maps-markers.html
