Question

我在我的网站上显示默认当前位置标记的地图，然后我想在点击时添加标记并删除最后一个

以下是我的代码

var currlat = $('#currentlat').val();
        var currlong = $('#currentlong').val();
        if(currlat){
            currlat = currlat;
        }else{
            currlat = '25.2744';
        }
        if(currlong){
            currlong = currlong;
        }else{
            currlong = '133.7751';
        }
var myCenter=new google.maps.LatLng(currlat,currlong);

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("map"),mapProp);

var marker=new google.maps.Marker({
  position:myCenter,
  });

marker.setMap(map);
google.maps.event.addListener(map, 'click', function(event)
    {
        placeMarker(event.latLng);
    });
}
function placeMarker(location)
{
    console.log(location.lat());
     if (!marker) {
        // Create the marker if it doesn't exist
        marker = new google.maps.Marker({
        position: location,
        map: map
        });



    }
    // Otherwise, simply update its location on the map.
    else { marker.setPosition(location); }
    $('#currentLatitude').val(location.lat());
        $('#currentlongitude').val(location.lng());

}
google.maps.event.addDomListener(window, 'load', initialize);

添加此

后

var marker=new google.maps.Marker({
  position:myCenter,
  });

它仅显示当前位置标记和添加标记不起作用，或者如果我删除默认标记的代码，则添加标记功能完美地工作

请帮助，提前致谢

Answer 1

使用发布的代码，我收到一个javascript错误：Uncaught ReferenceError: marker is not defined。 marker变量是initialize函数的本地变量。一种选择是将marker移动到全局范围。

proof of concept fiddle

代码段

var marker;
var currlat = $('#currentlat').val();
var currlong = $('#currentlong').val();
if (currlat) {
  currlat = currlat;
} else {
  currlat = '25.2744';
}
if (currlong) {
  currlong = currlong;
} else {
  currlong = '133.7751';
}
var myCenter = new google.maps.LatLng(currlat, currlong);

function initialize() {
  var mapProp = {
    center: myCenter,
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map"), mapProp);

  marker = new google.maps.Marker({
    position: myCenter,
  });

  marker.setMap(map);
  google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng);
  });
}

function placeMarker(location) {
  console.log(location.lat());
  if (!marker) {
    // Create the marker if it doesn't exist
    marker = new google.maps.Marker({
      position: location,
      map: map
    });
  }
  // Otherwise, simply update its location on the map.
  else {
    marker.setPosition(location);
  }
  $('#currentLatitude').val(location.lat());
  $('#currentlongitude').val(location.lng());

}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="currentLatitude" />
<input id="currentlongitude" />
<div id="map"></div>

Answer 2

您的代码存在的问题是marker变量在placeMarker函数范围内不可用，因为它与initialize函数的范围相关联。您可以简单地将marker变量放在initialize函数之外，这样可以解决您的问题。

此外，这个结构非常脏：

    if(currlat){
        currlat = currlat;
    }else{
        currlat = '25.2744';
    }
    if(currlong){
        currlong = currlong;
    }else{
        currlong = '133.7751';
    }

它正在运作，但是这段代码：

if(!currlat) currlat = '25.2744';
if(!currlong)currlong = '133.7751';

更清洁，工作原理相同。

工作代码：

＆＃13;

var currlat = $('#currentlat').val();
var currlong = $('#currentlong').val();
if(!currlat) currlat = '25.2744';
if(!currlong)currlong = '133.7751';
var myCenter=new google.maps.LatLng(currlat,currlong);

var map = null;
var marker = null;
function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

map = new google.maps.Map(document.getElementById("map"),mapProp);

marker = new google.maps.Marker({
  position:myCenter,
});

marker.setMap(map);
google.maps.event.addListener(map, 'click', function(event)
    {
        placeMarker(event.latLng);
    });
}
function placeMarker(location)
{
    console.log(location.lat());
     if (!marker) {
        // Create the marker if it doesn't exist
        marker = new google.maps.Marker({
        position: location,
        map: map
        });



    }
    // Otherwise, simply update its location on the map.
    else { marker.setPosition(location); }
    $('#currentLatitude').val(location.lat());
        $('#currentlongitude').val(location.lng());

}
google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
        google.load("maps", "3",{other_params:"sensor=false"});
</script>
<body style="margin:0px; padding:0px;">
  <input style="float:left; clear:both;" placeholder="25.2744" id="currentLatitude" />
 <input style="float:left; clear:both;" placeholder="133.7751" id="currentlongitude" />
	 <div id="map" style="height:400px; width:500px;"></div>
</body>

＆＃13;

Google地图：显示默认标记，然后在点击时添加标记

2 个答案: