Question

我有以下要求，并尝试使用jQUery实现此目的：

获取当前位置并在Google地图中显示标记
现在使用有效的邮政编码

我能够显示当前位置，但不知道如何使用有效的邮政编码更改它，任何人都可以建议

以下是代码：

＆＃13;

var map, infoWindow;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 6
        });
        infoWindow = new google.maps.InfoWindow;

        // Try HTML5 geolocation.
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };

            infoWindow.setPosition(pos);
            infoWindow.setContent('Location found.');
            infoWindow.open(map);
            map.setCenter(pos);
          }, function() {
            handleLocationError(true, infoWindow, map.getCenter());
          });
        } else {
          // Browser doesn't support Geolocation
          handleLocationError(false, infoWindow, map.getCenter());
        }
      }

      function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
                              'Error: The Geolocation service failed.' :
                              'Error: Your browser doesn\'t support geolocation.');
        infoWindow.open(map);
      }
	  
//Call this wherever needed to actually handle the display
function codeAddress(zipCode) {
    geocoder.geocode( { 'address': zipCode}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        //Got result, center the map and put it out there
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }
  $("input").keyup(function(){
    alert("enter valid zip code");
  });

＆＃13;

.greybg {
	background-color: #e1e1e1;
}
.whitebg {
	background-color: #fff;
}
#map {
	height: 100%;
	min-height:400px;
	width:100%;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container whitebg">
<div class="row">
	<div class="col-md-6">
    	<div class="form-group">
        	<input class="form-control" placeholder="Enter Zip Code">
        </div>
    </div>
    <div class="col-md-6">
    	<div id="map"></div>
    </div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCSnB7VUKtqjRqKC-3KA9nccHAX3PaMkIc&callback=initMap">
    </script>

＆＃13;

Answer 1

获取当前位置并设置标记

#blue-div {
    background-color: blue;
    display: inline-block;
    z-index: 99;
    position: absolute;
}
#main {
    z-index: 98;
    position: relative;
}

2.现在使用有效的邮政编码

<script>
  function initmap(){
    navigator.geolocation.getCurrentPosition(currentLocation);
  }

  function currentLocation (position){
    var uluru = {lat: position.coords.latitude, lng: position.coords.longitude};
    map = new google.maps.Map(document.getElementById('map'), {
      zoom:10,
      center: uluru
    });
    marker = new google.maps.Marker({
      position: uluru,
      map:map
    })

  }

</script>
<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD7g2FDEEEv1iAzha8xDJUvM1rN0yhaRgU&callback=initmap">
</script>

</script>

JS

<p>Please enter your zip:</p>
<input id="zip" type="text" name="zip">
<input type="button" value="search" onclick="loadMapByZip()">

使用有效的邮政编码更改标记的位置

1 个答案: