Question

我有两个用于通过jquery渲染地图的脚本。

一个人在这里：

<script>
var geocoder;
var map;
  var infowindow;

  function initialize() {
    geocoder = new google.maps.Geocoder();
    var loca = new google.maps.LatLng(41.7475, -74.0872);

    map = new google.maps.Map(document.getElementById('map'), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: loca,
      zoom: 12
    });

  }

  function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      for (var i = 0; i < results.length; i++) {
        createMarker(results[i]);
      }
    }
  }

  function createMarker(place) {
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
      map: map,
      position: place.geometry.location
    });

    google.maps.event.addListener(marker, 'mouseover', function() {
      infowindow.setContent(place.name);
      infowindow.open(map, this);
        });
        }

   function codeAddress() {
   var address = document.getElementById("address").value;
   geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
     map.setCenter(results[0].geometry.location);
     var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
    });
    var request = {
      location: results[0].geometry.location,
      radius: 50000,
      name: 'ski',
      keyword: 'mountain',
      type: ['park']
    };
    infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);
    service.nearbySearch(request, callback);
  } else {
    alert("Geocode was not successful for the following reason: " + status);
  }
});
}

  google.maps.event.addDomListener(window, 'load', initialize);
</script>

呈现一张Google地图，要求用户输入他们的位置，然后在地图上精确定位。

这一个：

<script type="text/javascript">
// Define your locations: HTML content for the info window, latitude, longitude

var locations = [

  ['<h4><a href="#">My Home</a></h4>', 19.114282,72.871037]
,

  ['<h4><a href="#">My parents home</a></h4>', 18.9443219,72.8227124]


];


// Setup the different icons and shadows
var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/icons/';

var icons = [
  iconURLPrefix + 'red-dot.png',
  iconURLPrefix + 'green-dot.png',
  iconURLPrefix + 'blue-dot.png',
  iconURLPrefix + 'orange-dot.png',
  iconURLPrefix + 'purple-dot.png',
  iconURLPrefix + 'pink-dot.png',      
  iconURLPrefix + 'yellow-dot.png'
]
var icons_length = icons.length;


var shadow = {
  anchor: new google.maps.Point(15,33),
  url: iconURLPrefix + 'msmarker.shadow.png'
};

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 2,

  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControl: false,
  streetViewControl: false,
  panControl: false,
  zoomControlOptions: {
     position: google.maps.ControlPosition.LEFT_BOTTOM
  }
});

var infowindow = new google.maps.InfoWindow({
  maxWidth: 160
});

var marker;
var markers = new Array();

var iconCounter = 0;

// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon : icons[iconCounter],
    shadow: shadow
  });

  markers.push(marker);

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));

  iconCounter++;
  // We only have a limited number of possible icon colors, so we may have to restart the counter
  if(iconCounter >= icons_length){
    iconCounter = 0;
  }
}

function AutoCenter() {
  //  Create a new viewpoint bound
  var bounds = new google.maps.LatLngBounds();
  //  Go through each...
  $.each(markers, function (index, marker) {
    bounds.extend(marker.position);
  });
  //  Fit these bounds to the map
  map.fitBounds(bounds);
}
AutoCenter();
 </script>

使用我已定义在地图上精确定位的两个标记呈现Google地图。

我的问题是如何将这两个脚本结合起来在一张地图上呈现整个内容？请帮助/指导我。

修改将此脚本添加到组合脚本的底部，我能够自动成功检测用户的地理位置。但是地图并没有集中在这一点上。也需要帮助。

  // Check if user support geo-location
   if (navigator.geolocation) {
   navigator.geolocation.getCurrentPosition(function(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    var geolocpoint = new google.maps.LatLng(latitude, longitude);

    var mapOptions = {
        zoom: 8,
        center: geolocpoint,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
    // Place a marker
    var geolocation = new google.maps.Marker({
        position: geolocpoint,
        map: map,
        title: 'Your geolocation',
        icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
    });
});
  }

Answer 1

除了添加标记之外，您没有对geolocpoint变量执行任何操作。您需要在某个时刻使用map.setCenter(geolocpoint);将地图置于用户位置的中心位置。

这是您的小提琴更新：http://jsfiddle.net/upsidown/fY7Bx/5/

希望这有帮助。

结合jquery映射脚本

1 个答案: