1

Iam在像這樣的參數(58.39847354300152,15.579836368560791)中獲取地圖起點和終點緯度lng,並且必須爲兩者設置兩個不同的標記..現在我可以設置只有一個標記開始或end..how爲同時設置如何在谷歌地圖中設置開始和結束點標記API

function markerStartEnd(map,startPoint,endPoint,startTime,endTime){ 
var anchor = new google.maps.Point(20,41), 
    size = new google.maps.Size(41,41), 
    origin = new google.maps.Point(0,0), 
    icon = new google.maps.MarkerImage('../../static/js/start.png',size,origin,anchor); 
new google.maps.Marker({icon:icon,map:map,position:startPoint}); 
new google.maps.Label({ position: startPoint, map: map, content:startTime}); 

icon = new google.maps.MarkerImage('../../static/js/end.png',size,origin,anchor); 
new google.maps.Marker({icon:icon,map:map,position:endPoint}); 
new google.maps.Label({ position: endPoint, map: map, content:endTime}); 

}

+1

參考此鏈接 - http://stackoverflow.com/questions/3548920/google-maps-api-v3-多標記上,精確,同點 –

回答

1

我獲得與發佈代碼中的錯誤:Uncaught TypeError: google.maps.Label is not a constructor。沒有google.maps.Label班。如果我刪除它,你的代碼就可以工作。

proof of concept fiddle

代碼片段:

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    markerStartEnd(map, new google.maps.LatLng(40.7127837, -74.00594130000002), new google.maps.LatLng(40.735657, -74.1723667), "10:00", "10:20"); 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    bounds.extend(new google.maps.LatLng(40.7127837, -74.00594130000002)); 
 
    bounds.extend(new google.maps.LatLng(40.735657, -74.1723667)); 
 
    map.fitBounds(bounds); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize); 
 

 
function markerStartEnd(map, startPoint, endPoint, startTime, endTime) { 
 
    var anchor = new google.maps.Point(20, 41), 
 
    size = new google.maps.Size(41, 41), 
 
    origin = new google.maps.Point(0, 0), 
 
    icon = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/blue.png', size, origin, anchor); 
 
    new google.maps.Marker({ 
 
    icon: icon, 
 
    map: map, 
 
    position: startPoint 
 
    }); 
 
    /* new google.maps.Label({ 
 
    position: startPoint, 
 
    map: map, 
 
    content: startTime 
 
    }); */ 
 

 
    icon = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/green.png', size, origin, anchor); 
 
    new google.maps.Marker({ 
 
    icon: icon, 
 
    map: map, 
 
    position: endPoint 
 
    }); 
 
    /* new google.maps.Label({ 
 
    position: endPoint, 
 
    map: map, 
 
    content: endTime 
 
    }); */ 
 
}
html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>