如何使用JavaScript在Google地图中设置标记
[英]How to set marker in google map using javascript
问题描述
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 谢谢
4 个解决方案
解决方案1
4 已采纳 2013-06-04 07:06:06
please try this. 请尝试这个。 hope it help. 希望对您有所帮助。 1. make map as global variable. 1.将地图设为全局变量。 2. initialize map 3. add marker on button click event. 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>
解决方案2
3 2013-06-04 07:05:13
data is array which contains lat and lng data是包含lat和lng的array
function addMarker(data) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map
});
解决方案3
0 2013-06-04 07:06:40
You need to put the part: 您需要放置零件：
var marker = new google.maps.Marker({
[...]
});
inside a onclick event listener. 在onclick事件监听器中。
The jQuery way to do this with a button element: 使用button元素执行此操作的jQuery方法：
$('button').on('click', function() {
var marker = new google.maps.Marker({
[...]
});
});
You have to think about making the variables map and latLng global. 您必须考虑使变量map和latLng全局变量。
解决方案4
-1 2013-06-04 07:08:34
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
});
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.