javascript 如何使用javascript在谷歌地图中设置标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16911608/
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
How to set marker in google map using javascript
提问by Monk L
I am using the below javascript code to show map and marker.The marker is loading while map load,but i want to load the marker if the button named "Add marker" is clicked.The marker should points to the current location.How to do this here.
我正在使用下面的 javascript 代码来显示地图和标记。地图加载时正在加载标记，但如果单击名为“添加标记”的按钮，我想加载标记。标记应指向当前位置。如何在这里做。
js.
js。
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
function initialize() {
var latLng = new google.maps.LatLng(-29.3456, 151.4346);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Marker',
map: map,
draggable: true
});
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
html
html
<div id="mapCanvas"></div>
Thanks
谢谢
采纳答案by Hasina
please try this. hope it help. 1. make map as global variable. 2. initialize map 3. add marker on button click event.
请试试这个。希望有帮助。1. 将地图设为全局变量。2. 初始化地图 3. 在按钮点击事件上添加标记。
<script type="text/javascript">
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
};
jQuery("$addmarker").click(function(){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(23.72, 72.100),
title: 'Marker',
map: map,
draggable: true
});
})
</script>
Here is my complete sample code.
这是我的完整示例代码。
<script type="text/javascript">
var map;
function initialize()
{
var mapOptions = {
center: new google.maps.LatLng('23.11', '71.00'),
zoom: 2,
scrollwheel: false,
disableDefaultUI: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
}
function addMarker()
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(23.72, 72.100),
map: map,
});
}
</script>
</HEAD>
<BODY onload="initialize();">
<div id="map_canvas" style="width:700px; height:500px;"></div>
<input type="button" id="addMarker" value="addMarker" onclick="addMarker();"/>
</BODY>
</HTML>
回答by Sankalp Mishra
datais arraywhich contains lat and lng
data是array包含 lat 和 lng
function addMarker(data) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map
});
回答by michelgotta
You need to put the part:
你需要把部分：
var marker = new google.maps.Marker({
[...]
});
inside a onclickevent listener.
在onclick事件侦听器中。
The jQuery way to do this with a buttonelement:
使用button元素执行此操作的 jQuery 方法：
$('button').on('click', function() {
var marker = new google.maps.Marker({
[...]
});
});
You have to think about making the variables mapand latLngglobal.
您必须考虑使变量map和latLng全局变量。
回答by Subir Kumar Sao
var map; // Declare map as global.
function initialize() {
var latLng = new google.maps.LatLng(-29.3456, 151.4346);
map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
// Call addMarker on click of the button.
function addMarker(){
var latLng = new google.maps.LatLng(-29.3456, 151.4346); // Put lat long as desired.
var marker = new google.maps.Marker({
position: latLng,
title: 'Marker',
map: map,
draggable: true
});
}
