我正在尝试创建与此类似的东西 http://kronista.co/projects/2014/rock_al_parque/artistas_internacionales.html
这是我到目前为止所拥有的 http://ilg.knibbshost.co.uk/index.php/about-us/where-world/
我想从中心点创建多条折线 以及有多个标记
目前我已经创建了多个标记，但还未能找出多条折线。
为了让事情变得更复杂，我想通过json传递这些数据，这是我到目前为止的javascript。任何帮助将不胜感激。
google.maps.event.addDomListener(window, 'load', init);
var map;
function init() {
var mapOptions = {
center: new google.maps.LatLng(21.596151, -6.309816),
zoom: 3,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
},
disableDoubleClickZoom: false,
mapTypeControl: false,
scaleControl: false,
scrollwheel: false,
panControl: false,
streetViewControl: false,
draggable: true,
overviewMapControl: false,
overviewMapControlOptions: {
opened: false,
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{
"featureType": "water",
"stylers": [{
"color": "#009ee3"
}, {
"visibility": "on"
}]
}, {
"featureType": "landscape",
"stylers": [{
"color": "#f2f2f2"
}]
}, {
"featureType": "road",
"stylers": [{
"saturation": -100
}, {
"lightness": 45
}]
}, {
"featureType": "road.highway",
"stylers": [{
"visibility": "simplified"
}]
}, {
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#444444"
}]
}, {
"featureType": "transit",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"stylers": [{
"visibility": "off"
}]
}],
}
var polyline;
var lineCoordinates = [
[51.4604728, -0.1830378],
[44.0715858, 27.2454436]
];
function addAnimatedPolyline() {
//First we iterate over the coordinates array to create a
// new array which includes objects of LatLng class.
var pointCount = lineCoordinates.length;
var linePath = [];
for (var i = 0; i < pointCount; i++) {
var tempLatLng = new google.maps.LatLng(lineCoordinates[i][0], lineCoordinates[i][1]);
linePath.push(tempLatLng);
}
// Defining arrow symbol
var arrowSymbol = {
strokeColor: '#000',
scale: 3,
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
// Polyline properties are defined below
var lineOptions = {
path: linePath,
icons: [{
icon: arrowSymbol
//offset: '100%'
}],
strokeWeight: 2,
strokeColor: '#000',
strokeOpacity: 1
}
polyline = new google.maps.Polyline(lineOptions);
// Polyline is set to current map
polyline.setMap(map);
// Calling the arrow animation function
animateArrow();
}
function animateArrow() {
var counter = 0;
var accessVar = window.setInterval(function () {
counter = (counter + 1) % 350;
var arrows = polyline.get('icons');
arrows[0].offset = (counter / 2) + '%';
polyline.set('icons', arrows);
}, 50);
}
var mapElement = document.getElementById('theworld');
var map = new google.maps.Map(mapElement, mapOptions);
addAnimatedPolyline();
var locations = [
['ABC Books', 'New Zealand Auckland', 'Books', '140 orders processed each month', 'International Mail, Uk courier, Fulfilment', 51.4604728, -0.1830378, 'https://mapbuildr.com/assets/img/markers/solid-pin-red.png'],
['AIM International', 'South Africa Nampar', 'Health Supplements', '100 orders processed each month', 'Uk courier, fulfilment', 41.4604728, -0.1830378, 'https://mapbuildr.com/assets/img/markers/solid-pin-red.png']
//['name', 'name', 'undefined', 'undefined', 'undefined', 51.4604728, -0.1830378, 'https://mapbuildr.com/assets/img/markers/solid-pin-red.png'],
//['name', 'name', 'undefined', 'undefined', 'undefined', 51.4604728, -0.1830378, 'https://mapbuildr.com/assets/img/markers/solid-pin-red.png']
];
for (i = 0; i < locations.length; i++) {
if (locations[i][1] == 'undefined') {
description = '';
} else {
description = locations[i][1];
}
if (locations[i][2] == 'undefined') {
telephone = '';
} else {
telephone = locations[i][2];
}
if (locations[i][3] == 'undefined') {
email = '';
} else {
email = locations[i][3];
}
if (locations[i][4] == 'undefined') {
web = '';
} else {
web = locations[i][4];
}
if (locations[i][7] == 'undefined') {
markericon = '';
} else {
markericon = locations[i][7];
}
marker = new google.maps.Marker({
icon: markericon,
position: new google.maps.LatLng(locations[i][5], locations[i][6]),
map: map,
title: locations[i][0],
desc: description,
tel: telephone,
email: email,
web: web
});
link = '';
bindInfoWindow(marker, map, locations[i][0], description, telephone, email, web, link);
}
function bindInfoWindow(marker, map, title, desc, telephone, email, web, link) {
var infoWindowVisible = (function () {
var currentlyVisible = false;
return function (visible) {
if (visible !== undefined) {
currentlyVisible = visible;
}
return currentlyVisible;
};
}());
iw = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function () {
if (infoWindowVisible()) {
iw.close();
infoWindowVisible(false);
} else {
var html = "<div style='color:#000;background-color:#fff;padding:5px;width:150px;'><h4>" + title + "</h4><p>" + desc + "<p><p>" + telephone + "<p><p>" + email + "<p><p>" + web + "<p></div>";
iw = new google.maps.InfoWindow({
content: html
});
iw.open(map, marker);
infoWindowVisible(true);
}
});
google.maps.event.addListener(iw, 'closeclick', function () {
infoWindowVisible(false);
});
}
}
答案 0 :(得分：0)
这种地图如果你使用Cartodb代替gmaps，它很容易创建。
例如：