Question

我有一个谷歌地图，其中包含由HTML的地理定位.watcPosition生成的标记。我希望标记在我点击按钮时更新它在其他位置的位置。我可以获得为按钮存储的坐标，以便在div上打印，这意味着该功能正常工作，但是当我将标记作为目标时，没有任何反应。 JS：

//Function to fetch coordinates
            window.onload(findLocation());
            var x = document.getElementById("where");

            function findLocation() 
            {
                if (navigator.geolocation) 
                {
                    navigator.geolocation.watchPosition(locatorMap);
                } 
                else 
                { 
                    x.innerHTML = "Please allow access to location.";
                }
            }

            //Setting up map
            function locatorMap(position) 
            {
                //Location description array
                var buttons = ["DIT Aungier Street:", "DIT Kevin Street:", "DIT Bolton Street:", "DIT GrangeGorman"];

                //Coordinates Array
                var coordinates = [];
                    coordinates[0]= {lat: 53.3385, lng: -6.2666};
                    coordinates[1]= {lat: 53.3375, lng: -6.2677};
                    coordinates[2]= {lat: 53.3515, lng: -6.2694};
                    coordinates[3]= {lat: 53.3548, lng: -6.2794};

                myLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                var a0 = document.getElementById("aungier"), a1 = document.getElementById("kevin"), a2 = document.getElementById("bolton"), a3 = document.getElementById("grange");
                a0.onclick = function()
                {
                    myLocation = coordinates[0],
                    where.innerHTML = buttons[0];
                };

                a1.onclick = function()
                {
                    myLocation = coordinates[1],
                    where.innerHTML = buttons[1];
                };

                a2.onclick = function()
                {
                    myLocation = coordinates[2],
                    where.innerHTML = buttons[2];
                };

                a3.onclick = function()
                {
                    myLocation = coordinates[3],
                    where.innerHTML = buttons[3];
                };

                //Map specs
                var map = new google.maps.Map(document.getElementById("mapOne"), 
                {
                    zoom: 16,
                    disableDefaultUI: true,
                    mapTypeId: google.maps.MapTypeId.TERRAIN
                });

                var marker = new google.maps.Marker
                ({
                    map: map,
                    position: myLocation,
                    animation: google.maps.Animation.DROP,
                    title: "You are here"
                });

                map.setCenter(myLocation);
            }

Answer 1

将地图和标记变量放在全局范围内
单击按钮时更改标记和地图中心

即

a0.onclick = function() {
    myLocation = coordinates[0],
    where.innerHTML = buttons[0];
    setMap(myLocation);
};

function setMap(position) {
  if (marker.setPosition) marker.setPosition(myLocation);
  if (map.setCenter) map.setCenter(myLocation);
}

proof of concept fiddle

代码段

//Function to fetch coordinates
// window.onload(findLocation());
google.maps.event.addDomListener(window,'load',function() {findLocation();});
var x = document.getElementById("where");
var marker;
var map;

function findLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(locatorMap);
  } else {
    x.innerHTML = "Please allow access to location.";
  }
}

//Setting up map
function locatorMap(position) {
  //Location description array
  var buttons = ["DIT Aungier Street:", "DIT Kevin Street:", "DIT Bolton Street:", "DIT GrangeGorman"];

  //Coordinates Array
  var coordinates = [];
  coordinates[0] = {
    lat: 53.3385,
    lng: -6.2666
  };
  coordinates[1] = {
    lat: 53.3375,
    lng: -6.2677
  };
  coordinates[2] = {
    lat: 53.3515,
    lng: -6.2694
  };
  coordinates[3] = {
    lat: 53.3548,
    lng: -6.2794
  };

  myLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var a0 = document.getElementById("aungier"),
    a1 = document.getElementById("kevin"),
    a2 = document.getElementById("bolton"),
    a3 = document.getElementById("grange");
  a0.onclick = function() {
    myLocation = coordinates[0],
      where.innerHTML = buttons[0];
      setMap(myLocation);
  };

  a1.onclick = function() {
    myLocation = coordinates[1],
      where.innerHTML = buttons[1];
      setMap(myLocation);
  };

  a2.onclick = function() {
    myLocation = coordinates[2],
      where.innerHTML = buttons[2];
      setMap(myLocation);
  };

  a3.onclick = function() {
    myLocation = coordinates[3],
      where.innerHTML = buttons[3];
      setMap(myLocation);
  };

  //Map specs
  map = new google.maps.Map(document.getElementById("mapOne"), {
    zoom: 16,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  marker = new google.maps.Marker({
    map: map,
    position: myLocation,
    animation: google.maps.Animation.DROP,
    title: "You are here"
  });

  map.setCenter(myLocation);
}
function setMap(position) {
  if (marker.setPosition) marker.setPosition(myLocation);
  if (map.setCenter) map.setCenter(myLocation);
}

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="aungier" value="aungier" type="button" /type="button" >
<input id="kevin" value="kevin" type="button" type="button" />
<input id="bolton" value="bolton" type="button" type="button" />
<input id="grange" value="grange" type="button" />
<div id="mapOne"></div>
<div id="where"></div>

更新GoogleMaps上的标记位置

1 个答案: