我如何在地图中有一些帖子是多输入值e.x：
我使用这个脚本来获取我稍后在div中显示的地图。
$(document).ready(function() {
//------- Google Maps ---------//
// Creating a LatLng object containing the coordinate for the center of the map
var lat = document.getElementById('userLat').value;
var lng = document.getElementById('userLng').value;
var latlng = new google.maps.LatLng(lat, lng);
// Creating an object literal containing the properties we want to pass to the map
var options = {
zoom: 15, // This number can be set to define the initial zoom level of the map
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP // This value can be set to define the map type ROADMAP/SATELLITE/HYBRID/TERRAIN
};
// Calling the constructor, thereby initializing the map
var map = new google.maps.Map(document.getElementById('map_div'), options);
// Define Marker properties
var imageuser = new google.maps.MarkerImage('img/pinfrend.png',
// This marker is 129 pixels wide by 42 pixels tall.
new google.maps.Size(38, 38),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 18,42.
new google.maps.Point(18, 38)
);
var image = new google.maps.MarkerImage('img/pinuser.png',
// This marker is 129 pixels wide by 42 pixels tall.
new google.maps.Size(38, 38),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 18,42.
new google.maps.Point(18, 38)
);
// Add Marker to display multi positions
var frendlat = document.getElementById('frendLat').value;
var frendlng = document.getElementById('frendLng').value;
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(frendlat, frendlng),
map: map,
icon: imageuser // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
});
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
icon: image // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
});
// Add listener for a click on the pin
google.maps.event.addListener(marker1, 'click', function() {
infowindow1.open(map, marker1);
});
// Add information window
var infowindow1 = new google.maps.InfoWindow({
content: createInfo('Evoluted New Media', 'Ground Floor,<br />35 Lambert Street,<br />Sheffield,<br />South Yorkshire,<br />S3 7BH<br /><a href="http://www.evoluted.net" title="Click to view our website">Our Website</a>')
});
// Create information window
function createInfo(title, content) {
return '<div class="infowindow"><strong>'+ title +'</strong><br />'+content+'</div>';
}
});
我有以下输入值：
<input id="userLat" type="text" name="val-lat" value="41.3275" />
<input id="userLat" type="text" name="val-lat" value="40.5486" />
<input id="userLat" type="text" name="val-lat" value="41.9637" />
<input id="userLng" type="text" name="val-lng" value="19.8189" />
<input id="userLng" type="text" name="val-lng" value="19.0056" />
<input id="userLng" type="text" name="val-lng" value="19.4513" />
现在我想在地图中为每个userLat + userLng显示一个图钉。
如何归档此结果？
我尝试过这个脚本，但我只得到一个引脚而不是三个引脚，因为我有三个值。
答案 0 :(得分：1)
您不能拥有多个具有相同ID的元素。您可以拥有多个具有相同类名的元素。如果将输入元素更改为使用class而不是ID，则可以使用getElementsByClassName获取元素数组：
HTML：
<input class="userLat" type="text" value="41.3275" />
<input class="userLat" type="text" value="40.5486" />
<input class="userLat" type="text" value="41.9637" />
<input class="userLng" type="text" value="19.8189" />
<input class="userLng" type="text" value="19.0056" />
<input class="userLng" type="text" value="19.4513" />
使用Javascript：
$(document).ready(function() {
//------- Google Maps ---------//
var markers = [] ;
var bounds = new google.maps.LatLngBounds();
function createMarker(latlng) {
bounds.extend(latlng);
var marker = new google.maps.Marker({
position: latlng
});
markers.push(marker);
}
var lat = document.getElementsByClassName('userLat');
var lng = document.getElementsByClassName('userLng');
for (var i=0; (i<lat.length && i< lng.length); i++) {
var latlng = new google.maps.LatLng(lat[i].value, lng[i].value);
createMarker(latlng);
}
// Creating an object literal containing the properties we want to pass to the map
var options = {
zoom: 15, // This number can be set to define the initial zoom level of the map
mapTypeId: google.maps.MapTypeId.ROADMAP // This value can be set to define the map type ROADMAP/SATELLITE/HYBRID/TERRAIN
};
// Calling the constructor, thereby initializing the map
var map = new google.maps.Map(document.getElementById('map_div'), options);
for (var i=0; i<markers.length; i++) {
markers[i].setMap(map);
}
// center and zoom the map to show the markers
map.fitBounds(bounds);
答案 1 :(得分：0)
试试这个，希望你能理解， google map marker for multiple pin out example，你可以填充lat，long through array
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
// Define your locations: HTML content for the info window, latitude, longitude
var locations = [
['<h4>Bondi Beach</h4>', -33.890542, 151.274856],
['<h4>Coogee Beach</h4>', -33.923036, 151.259052],
['<h4>Cronulla Beach</h4>', -34.028249, 151.157507],
['<h4>Manly Beach</h4>', -33.80010128657071, 151.28747820854187],
['<h4>Maroubra Beach</h4>', -33.950198, 151.259302]
];
// 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: 10,
center: new google.maps.LatLng(-37.92, 151.25),
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>
</body>
</html>