问题
我需要在Google地图中实现多个标记。
标记在Google地图中不可见。
HTML代码
<span class="latitude" data-val={{value.latitude}} value={{value.latitude}} data-long={{value.longitude}} data-name="{{value.name}}"></span>
js代码
var zindex = 0;
var locations = [];
$.each($('.latitude'), function(index, value) {
//console.log($(this).data('val'));
var lat = $(this).data('val');
var longs = $(this).data('long');
locations.push($(this).data('name'));
locations.push($(this).data('val'));
locations.push($(this).data('long'));
locations.push(zindex);
console.log(locations);
// console.log("---------");
// console.log(longs);
// console.log(zindex);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(lat, longs),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
html: locations[0],
//icon: image
});
console.log(locations[i]);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
zindex++;
});
json
["Conference Planning Meeting", 25.788969, -80.226439, 0, "Darwin Festival", -12.462827, 130.841777, 1, "Indiana State Fair", 39.768403, -86.158068, 2, "ICTP-CIMPA Advanced School", "-13.525000", -71.972222, 3, "HR Management MBA", 25.271139, 55.307485, 4, "10-day Finance & Accounting MBA", 25.271139, 55.307485, 5, "Leadership and Management Skills for the 21st Century", 51.511214, -0.119824, 6, "Results-Based Management and Performance Indicators", "45.508670", -73.553993, 7, "Capital Budgeting and Financial Management in the Public Sector", "45.508670", -73.553993, 8, "IDPM Accreditation Training Session", "45.508670", -73.553993, 9, "PPMS Accreditation Training Session", "45.508670", -73.553993, 10, "Erie County Fair", 42.715893, -78.829477, 11, "International Conference of Physics Students", 45.813029, 15.977895, 12, "Iowa State Fair", 41.600545, -93.609106, 13, "Illinois State Fair", 42.101483, -72.589811, 14, "Missouri State Fair", 38.704461, -93.228261, 15, "West Virginia State Fair", 40.964529, "-76.884410", 16, "Central States Fair", 44.080543, -103.231015, 17, "Wilson County Fair", "36.208110", -86.291102, 18, "Miami County Fair", 42.605589, "-83.149930", 19, "Montgomery County Agricultural Fair", 39.143441, -77.201371, 20, "Flowers And Honey All Year Round", "59.934280", 30.335099, 21, "School Fair", 47.026859, 28.841551, 22, "Singapore World Stamp Exhibition", 1.280095, 103.850949, 23, "Wilderness Medicine Conference", -33.867487, "151.206990", 24…]
因此，阅读代码很困难，但是这里有一个示例，该示例为每个span带有“位置”类的元素创建一个标记，并使用以下数据属性：（data-lat纬度），data-lng（经度）和data-name。
var map,
infowindow,
locations = [];
$(document).ready(function() {
//initialize the map
map = new google.maps.Map($('#map')[0], {
zoom: 10,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//initialize the infowindow
infowindow = new google.maps.InfoWindow();
//will use to fit all markers on map
var bounds = new google.maps.LatLngBounds()
//get locations
$('.location').each(function(i, el) {
var latitude = $(el).data('lat')
var longitude = $(el).data('lng')
var latlng = new google.maps.LatLng(latitude, longitude)
//initialize marker
var marker = new google.maps.Marker({
position: latlng,
map: map,
name: $(el).data('name')
})
//include this marker in resulting view
bounds.extend(latlng)
//Notice the scope of the callback; `this` is context of clicked marker
google.maps.event.addListener(marker, 'click', (function(e) {
infowindow.close()
infowindow.setContent(this.name)
infowindow.open(map, marker)
}).bind(marker));
//add to collection so it can be accessed later
locations.push(marker)
});
//set the map to show all markers
map.fitBounds(bounds);
});html, body,
#map {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
span.location {
display: none;
}<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>
<span class="location" data-lat="25.788969" data-lng="-80.226439" data-name="Conference Planning Meeting">Conference Planning Meeting</span>
<span class="location" data-lat="-12.462827" data-lng="130.841777" data-name="Darwin Festival">Darwin Festival</span>
<span class="location" data-lat="39.768403" data-lng="-86.158068" data-name="Indiana State Fair">Indiana State Fair</span>
<span class="location" data-lat="-13.525000" data-lng="-71.972222" data-name="ICTP-CIMPA Advanced School">ICTP-CIMPA Advanced School</span>
<span class="location" data-lat="25.271139" data-lng="55.307485" data-name="HR Management MBA">HR Management MBA</span>
<span class="location" data-lat="25.271139" data-lng="55.307485" data-name="10-day Finance & Accounting MBA">10-day Finance & Accounting MBA</span>
<span class="location" data-lat="51.511214" data-lng="-0.119824" data-name="Leadership and Management Skills for the 21st Century">Leadership and Management Skills for the 21st Century</span>
<span class="location" data-lat="45.508670" data-lng="-73.553993" data-name="Results-Based Management and Performance Indicators">Results-Based Management and Performance Indicators</span>
<span class="location" data-lat="45.508670" data-lng="-73.553993" data-name="Capital Budgeting and Financial Management in the Public Sector">Capital Budgeting and Financial Management in the Public Sector</span>
<span class="location" data-lat="45.508670" data-lng="-73.553993" data-name="IDPM Accreditation Training Session">IDPM Accreditation Training Session</span>
<span class="location" data-lat="45.508670" data-lng="-73.553993" data-name="PPMS Accreditation Training Session">PPMS Accreditation Training Session</span>
<span class="location" data-lat="42.715893" data-lng="-78.829477" data-name="Erie County Fair">Erie County Fair</span>
<span class="location" data-lat="45.813029" data-lng="15.977895" data-name="International Conference of Physics Students">International Conference of Physics Students</span>
<span class="location" data-lat="41.600545" data-lng="-93.609106" data-name="Iowa State Fair">Iowa State Fair</span>
<span class="location" data-lat="42.101483" data-lng="-72.589811" data-name="Illinois State Fair">Illinois State Fair</span>
<span class="location" data-lat="38.704461" data-lng="-93.228261" data-name="Missouri State Fair">Missouri State Fair</span>
<span class="location" data-lat="40.964529" data-lng="-76.884410" data-name="West Virginia State Fair">West Virginia State Fair</span>
<span class="location" data-lat="44.080543" data-lng="-103.231015" data-name="Central States Fair">Central States Fair</span>
<span class="location" data-lat="36.208110" data-lng="-86.291102" data-name="Wilson County Fair">Wilson County Fair</span>
<span class="location" data-lat="42.605589" data-lng="-83.149930" data-name="Miami County Fair">Miami County Fair</span>
<span class="location" data-lat="39.143441" data-lng="-77.201371" data-name="Montgomery County Agricultural Fair">Montgomery County Agricultural Fair</span>
<span class="location" data-lat="59.934280" data-lng="30.335099" data-name="Flowers And Honey All Year Round">Flowers And Honey All Year Round</span>
<span class="location" data-lat="47.026859" data-lng="28.841551" data-name="School Fair">School Fair</span>
<span class="location" data-lat="1.280095" data-lng="103.850949" data-name="Singapore World Stamp Exhibition">Singapore World Stamp Exhibition</span>
<span class="location" data-lat="-33.867487" data-lng="151.206990" data-name="Wilderness Medicine Conference">Wilderness Medicine Conference</span>
<div id="map"></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句