$(document).ready(function() {
var markers = [
{
"lat": '51.508742',
"lng": '-0.12085'
}
];
window.onload = function () {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
mapTypeId: google.maps.MapTypeId.ROADMAP,
fullscreenControl: true,
styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#6195a0"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"landscape","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#e6f3d6"},{"visibility":"on"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45},{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#f4d2c5"},{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"labels.text","stylers":[{"color":"#4e4e4e"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#f4f4f4"}]},{"featureType":"road.arterial","elementType":"labels.text.fill","stylers":[{"color":"#787878"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#eaf6f8"},{"visibility":"on"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#eaf6f8"}]}]
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
}
$("#tab_id_1 li").click(function() {
event.preventDefault();
var data_lat1 = $(this).attr('data-lat-1');
var data_lng1 = $(this).attr('data-lng-1');
var data_lat2 = $(this).attr('data-lat-2');
var data_lng2 = $(this).attr('data-lng-2');
map(data_lat1,data_lng1,data_lat2,data_lng2);
});
function map(data_lat1,data_lng1,data_lat2,data_lng2){
$("#tab_id_1 li").on("click",function(){
var markers = [
{
"lat": ''+ data_lat1 +'',
"lng": ''+ data_lng1 +''
}
,
{
"lat": ''+ data_lat2 +'',
"lng": ''+ data_lng2 +''
}
];
console.log(markers);
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
mapTypeId: google.maps.MapTypeId.ROADMAP,
fullscreenControl: true,
styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#6195a0"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"landscape","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#e6f3d6"},{"visibility":"on"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45},{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#f4d2c5"},{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"labels.text","stylers":[{"color":"#4e4e4e"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#f4f4f4"}]},{"featureType":"road.arterial","elementType":"labels.text.fill","stylers":[{"color":"#787878"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#eaf6f8"},{"visibility":"on"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#eaf6f8"}]}]
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var infoWindow = new google.maps.InfoWindow();
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
icon: "marker-icon.png"
});
latlngbounds.extend(marker.position);
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
//***********ROUTING****************//
//Intialize the Path Array
var path = new google.maps.MVCArray();
//Intialize the Direction Service
var service = new google.maps.DirectionsService();
//Set the Path Stroke Color
var poly = new google.maps.Polyline({ map: map, strokeColor: '#f09c00', strokeOpacity: 1.0, strokeWeight: 5 });
//Loop and Draw Path Route between the Points on MAP
for (var i = 0; i < lat_lng.length; i++) {
if ((i + 1) < lat_lng.length) {
var src = lat_lng[i];
var des = lat_lng[i + 1];
path.push(src);
poly.setPath(path);
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
}
});
}
}
});
}
});
请帮忙！当第一次按下时，没有任何反应，那么当你再次按下其中一个“li”时，坐标会发送1个数组，第三次发送时发送2个数组，第四次发送3个数组，第五次发送4个阵列，我怎么能解决问题，当我推送只发送1个阵列时，抱歉我的英文不好。
<ul id="tab_id_1" class="uk-nestable" data-uk-nestable="{group:'my-group', maxDepth:1}">
<li data-lat-1="51.5501741" data-lng-1="-0.003371000000015556" data-lat-2="-33.88081" data-lng-2="-33.88081" class="uk-nestable-item">
<input type="hidden" name="id_1[]" value="9">
<div class="uk-nestable-panel">
<div>
<div class="table dd_table">
<div>Sat30</div>
<div>Nr.Q767</div>
<div>DELIVERY</div>
<div>754876</div>
<div><a href="....." title="View JOB"><i class="fa fa-eye"></i></a></div>
</div>
</div>
</div>
</li>
<li data-lat-1="48.57340529999999" data-lng-1="7.752111300000024" data-lat-2="51.5111922" data-lng-2="51.5111922" class="uk-nestable-item">
<input type="hidden" name="id_1[]" value="7">
<div class="uk-nestable-panel">
<div>
<div class="table dd_table">
<div>Sat30</div>
<div>Nr.W996</div>
<div>DELIVERY</div>
<div>5365-64</div>
<div><a href="....." title="View JOB"><i class="fa fa-eye"></i></a></div>
</div>
</div>
</div>
</li>
<li data-lat-1="48.57340529999999" data-lng-1="7.752111300000024" data-lat-2="52.19173" data-lng-2="52.19173" class="uk-nestable-item">
<input type="hidden" name="id_1[]" value="11">
<div class="uk-nestable-panel">
<div>
<div class="table dd_table">
<div>Sat30</div>
<div>Nr.J765</div>
<div>PICK-UP/DELIVERY</div>
<div>MD-2038/3811-558</div>
<div><a href="......" title="View JOB"><i class="fa fa-eye"></i></a></div>
</div>
</div>
</div>
</li>
</ul>
答案 0 :(得分：0)
请删除
$("#tab_id_1 li").on("click",function(){
在地图函数内重新声明..
这应该可以解决你的问题。