谷歌Maps Api相当新。我有一个数据数组，我想循环遍历并在地图上绘制。看似相当简单，但我发现的所有多标记教程都相当复杂。
让我们以谷歌网站的数据数组为例:
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
我只是想绘制所有这些点，并在单击时弹出一个infoWindow来显示名称。
当前回答
异步版本:
<script type="text/javascript">
function initialize() {
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
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
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +
'callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
其他回答
我知道这个答案太迟了。但我希望这也能帮助到其他开发者。: -) 下面的代码将使用信息窗口在谷歌地图上添加多个标记。 这段代码可以用来在地图上绘制任意数量的标记。 请将您的谷歌映射API键放在此代码的正确位置。(我已将其标记为“您的API密钥”)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Google Map</title>
<style>
#map{
height: 600px;
width: 100%;
}
</style>
</head>
<body>
<h1>My Google Map`</h1>
<div id="map"></div>
<script>
function initMap(){
//Map options
var options = {
zoom:9,
center:{lat:42.3601, lng:-71.0589}
}
// new map
var map = new google.maps.Map(document.getElementById('map'), options);
// customer marker
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png';
//array of Marrkeers
var markers = [
{
coords:{lat: 42.4668, lng: -70.9495},img:iconBase,con:'<h3> This Is your Content <h3>'
},
{
coords:{lat: 42.8584, lng: -70.9300},img:iconBase,con:'<h3> This Is your Content <h3>'
},
{
coords:{lat: 42.7762, lng: -71.0773},img:iconBase,con:'<h3> This Is your Content <h3>'
}
];
//loopthrough markers
for(var i = 0; i <markers.length; i++){
//add markeers
addMarker(markers[i]);
}
//function for the plotting markers on the map
function addMarker (props){
var marker = new google.maps.Marker({
position: props.coords,
map:map,
icon:props.img
});
var infoWindow = new google.maps.InfoWindow({
content:props.con,
});
marker.addListener("click", () => {
infoWindow.open(map, marker);
});
}
}
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=**YourAPIKey**&callback=initMap"
defer
></script>
</body>
</html>
已接受的答案，在ES6中重写:
$(document).ready(() => {
const mapEl = $('#our_map').get(0); // OR document.getElementById('our_map');
// Display a map on the page
const map = new google.maps.Map(mapEl, { mapTypeId: 'roadmap' });
const buildings = [
{
title: 'London Eye, London',
coordinates: [51.503454, -0.119562],
info: 'carousel'
},
{
title: 'Palace of Westminster, London',
coordinates: [51.499633, -0.124755],
info: 'palace'
}
];
placeBuildingsOnMap(buildings, map);
});
const placeBuildingsOnMap = (buildings, map) => {
// Loop through our array of buildings & place each one on the map
const bounds = new google.maps.LatLngBounds();
buildings.forEach((building) => {
const position = { lat: building.coordinates[0], lng: building.coordinates[1] }
// Stretch our bounds to the newly found marker position
bounds.extend(position);
const marker = new google.maps.Marker({
position: position,
map: map,
title: building.title
});
const infoWindow = new google.maps.InfoWindow();
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', () => {
infoWindow.setContent(building.info);
infoWindow.open(map, marker);
})
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
})
})
来自谷歌Map API示例:
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
setMarkers(map, beaches);
}
/**
* Data for the markers consisting of a name, a LatLng and a zIndex for
* the order in which these markers should display on top of each
* other.
*/
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
function setMarkers(map, locations) {
// Add markers to the map
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var image = new google.maps.MarkerImage('images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(20, 32),
// 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 0,32.
new google.maps.Point(0, 32));
var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}
根据Daniel Vassallo的回答，下面是一个以更简单的方式处理闭包问题的版本。
因为所有的标记都有一个单独的InfoWindow，而且JavaScript并不关心你是否给对象添加了额外的属性，你所需要做的就是给标记的属性添加一个InfoWindow，然后调用InfoWindow本身的.open() !
编辑:有了足够的数据，页面加载可能会花费很多时间，因此与其使用标记构造InfoWindow，不如只在需要时进行构造。注意，用于构造InfoWindow的任何数据都必须作为属性(data)追加到Marker。还要注意，在第一次单击事件之后，infoWindow将作为它的标记的属性持久化，因此浏览器不需要不断地重构。
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-33.92, 151.25)
});
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,
data: {
name: locations[i][0]
}
});
marker.addListener('click', function() {
if(!this.infoWindow) {
this.infoWindow = new google.maps.InfoWindow({
content: this.data.name;
});
}
this.infoWindow.open(map,this);
})
}
来源链接
演示链接
完整的HTML代码
在单击或悬停时显示InfoWindow。 只会显示一个InfoWindow
<!DOCTYPE html>
<html>
<head>
<style>
/* <span class="metadata-marker" style="display: none;" data-region_tag="css"></span> Set the size of the div element that contains the map */
#map {
height: 400px;
/* The height is 400 pixels */
width: 100%;
/* The width is the width of the web page */
}
</style>
<script>
var map;
var InforObj = [];
var centerCords = {
lat: -25.344,
lng: 131.036
};
var markersOnMap = [{
placeName: "Australia (Uluru)",
LatLng: [{
lat: -25.344,
lng: 131.036
}]
},
{
placeName: "Australia (Melbourne)",
LatLng: [{
lat: -37.852086,
lng: 504.985963
}]
},
{
placeName: "Australia (Canberra)",
LatLng: [{
lat: -35.299085,
lng: 509.109615
}]
},
{
placeName: "Australia (Gold Coast)",
LatLng: [{
lat: -28.013044,
lng: 513.425586
}]
},
{
placeName: "Australia (Perth)",
LatLng: [{
lat: -31.951994,
lng: 475.858081
}]
}
];
window.onload = function () {
initMap();
};
function addMarkerInfo() {
for (var i = 0; i < markersOnMap.length; i++) {
var contentString = '<div id="content"><h1>' + markersOnMap[i].placeName +
'</h1><p>Lorem ipsum dolor sit amet, vix mutat posse suscipit id, vel ea tantas omittam detraxit.</p></div>';
const marker = new google.maps.Marker({
position: markersOnMap[i].LatLng[0],
map: map
});
const infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 200
});
marker.addListener('click', function () {
closeOtherInfo();
infowindow.open(marker.get('map'), marker);
InforObj[0] = infowindow;
});
// marker.addListener('mouseover', function () {
// closeOtherInfo();
// infowindow.open(marker.get('map'), marker);
// InforObj[0] = infowindow;
// });
// marker.addListener('mouseout', function () {
// closeOtherInfo();
// infowindow.close();
// InforObj[0] = infowindow;
// });
}
}
function closeOtherInfo() {
if (InforObj.length > 0) {
/* detach the info-window from the marker ... undocumented in the API docs */
InforObj[0].set("marker", null);
/* and close it */
InforObj[0].close();
/* blank the array */
InforObj.length = 0;
}
}
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: centerCords
});
addMarkerInfo();
}
</script>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</body>
</html>
