如何使用javascript在谷歌地图中设置标记答案

【问题标题】：How to set marker in google map using javascript如何使用javascript在谷歌地图中设置标记
【发布时间】：2013-05-30 11:33:29
【问题描述】：

我正在使用下面的 javascript 代码来显示地图和标记。地图加载时正在加载标记，但是如果单击名为“添加标记”的按钮，我想加载标记。标记应指向当前位置.如何在此处执行此操作。

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

<div id="mapCanvas"></div>

谢谢

【问题讨论】：

标签： javascript jquery html google-maps google-maps-markers

【解决方案1】：

请试试这个。希望它有所帮助。 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>

这是我的完整示例代码。

<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>

【讨论】：

此地图正在加载，但点击添加标记，标记未显示
@MonkL，请将位置属性设置为新的 google.maps.Latlng(latitude, longitude);我已经检查了这段代码。它在地图中单击按钮时添加标记。
是的，我在单独的 html 中测试了您的代码，它正在工作需要更多帮助。现在标记设置为某个固定的纬度和对数，我需要将它设置在当前位置，你能告诉我该怎么办。
@MonkL，我很抱歉。我从未尝试过获取当前位置。但谷歌地图提供了获取当前位置的 api。你可以通过搜索谷歌地图来实现它。
@MonkL，您可以使用stackoverflow.com/questions/13780583/…的答案获取当前位置

【解决方案2】：

data 是 array 包含 lat 和 lng

   function addMarker(data) {
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(data.lat, data.lng),
          map: map
        });

【讨论】：

我用你的功能更新了这些功能“var marker = new google.maps.Marker”，它不起作用
如果你想有多个标记..递归使用它。对于一个标记，使用它而不使用它，并在定义 var map 后放置它
我收到此错误“未捕获的类型错误：无法读取未定义的属性 'lat'”
你把你的纬度和纬度放在数据数组里了吗？？

【解决方案3】：

你需要放零件：

var marker = new google.maps.Marker({
   [...]
});

在onclick 事件监听器中。

使用 button 元素执行此操作的 jQuery 方法：

$('button').on('click', function() {
   var marker = new google.maps.Marker({
      [...]
   });
});

您必须考虑将变量 map 和 latLng 设为全局变量。

【讨论】：

【解决方案4】：

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
  });
}

【讨论】：