[英]Change individual markers in google maps directions
I have an issue with adding individual markers in Google maps API.我在 Google 地图 API 中添加单个标记时遇到问题。 I searched a lot like the following link, Change individual markers in google maps directions api V3 .
我搜索了很多类似下面的链接, 更改谷歌地图方向 api V3 中的单个标记。 But I am unable to implement the same on my code.
但是我无法在我的代码上实现相同的功能。 With the help of
suppressMarkers: true
I am able to prevent the default markers.在
suppressMarkers: true
标记的帮助下suppressMarkers: true
我能够阻止默认标记。 Now only route directions are showing.现在只显示路线方向。 Now how can I add the makers for start point and end point.
现在如何为起点和终点添加制造商。 Following is my code.
以下是我的代码。
function GoogleMap_selected(){
var lattitude_value= document.getElementById('slectedLat').value;
var longitude_value= document.getElementById('slectedLon').value;
var from = new google.maps.LatLng(mylatitude, mylongitude);
var to = new google.maps.LatLng(lattitude_value, longitude_value);
var directionsService = new google.maps.DirectionsService();
var directionsRequest = {
origin: from,
destination: to,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC
};
this.initialize = function(){
var map = showMap_selected();
directionsService.route(
directionsRequest,
function(response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
new google.maps.DirectionsRenderer({
map: map,
directions: response,
suppressMarkers: true
});
}
else
{
alert("Unable to retrive route");
}
var leg = response.routes[ 0 ].legs[ 0 ];
makeMarker( leg.start_location, icons.start, "title" );
makeMarker( leg.end_location, icons.end, 'title' );
}
);
}
function makeMarker( position, icon, title ) {
new google.maps.Marker({
position: position,
map: map,
icon: icon,
title: title
});
}
var icons = {
start: new google.maps.MarkerImage(
// URL
'start.png',
// (width,height)
new google.maps.Size( 44, 32 ),
// The origin point (x,y)
new google.maps.Point( 0, 0 ),
// The anchor point (x,y)
new google.maps.Point( 22, 32 )
),
end: new google.maps.MarkerImage(
// URL
'end.png',
// (width,height)
new google.maps.Size( 44, 32 ),
// The origin point (x,y)
new google.maps.Point( 0, 0 ),
// The anchor point (x,y)
new google.maps.Point( 22, 32 )
)
};
var showMap_selected = function(){
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(lattitude_value, longitude_value),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("selected_map_canvas"), mapOptions);
return map;
}
}
Can anyone suggest me that how to implement adding of markers at both start and end points with respect to my code.任何人都可以建议我如何在我的代码的起点和终点实现添加标记。
Changes:变化:
function GoogleMap_selected() {
var lattitude_value = document.getElementById('slectedLat').value;
var longitude_value = document.getElementById('slectedLon').value;
var from = new google.maps.LatLng(mylatitude, mylongitude);
var to = new google.maps.LatLng(lattitude_value, longitude_value);
var directionsService = new google.maps.DirectionsService();
var directionsRequest = {
origin: from,
destination: to,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC
};
this.initialize = function () {
var map = showMap_selected();
directionsService.route(
directionsRequest,
function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
new google.maps.DirectionsRenderer({
map: map,
directions: response,
suppressMarkers: true
});
var leg = response.routes[0].legs[0];
makeMarker(leg.start_location, icons.start, "title", map);
makeMarker(leg.end_location, icons.end, 'title', map);
} else {
alert("Unable to retrive route");
}
});
}
function makeMarker(position, icon, title, map) {
new google.maps.Marker({
position: position,
map: map,
icon: icon,
title: title
});
}
var icons = {
start: new google.maps.MarkerImage(
// URL
'http://maps.google.com/mapfiles/ms/micons/blue.png',
// (width,height)
new google.maps.Size(44, 32),
// The origin point (x,y)
new google.maps.Point(0, 0),
// The anchor point (x,y)
new google.maps.Point(22, 32)),
end: new google.maps.MarkerImage(
// URL
'http://maps.google.com/mapfiles/ms/micons/green.png',
// (width,height)
new google.maps.Size(44, 32),
// The origin point (x,y)
new google.maps.Point(0, 0),
// The anchor point (x,y)
new google.maps.Point(22, 32))
};
var showMap_selected = function () {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(lattitude_value, longitude_value),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("selected_map_canvas"), mapOptions);
return map;
};
}
code snippet:代码片段:
// 32.715738, -117.1610838 // 40.7127837, -74.0059413 var mylatitude = 40.7127837; var mylongitude = -74.0059413; function GoogleMap_selected() { var lattitude_value = document.getElementById('slectedLat').value; var longitude_value = document.getElementById('slectedLon').value; var from = new google.maps.LatLng(mylatitude, mylongitude); var to = new google.maps.LatLng(lattitude_value, longitude_value); var directionsService = new google.maps.DirectionsService(); var directionsRequest = { origin: from, destination: to, travelMode: google.maps.DirectionsTravelMode.DRIVING, unitSystem: google.maps.UnitSystem.METRIC }; this.initialize = function() { var map = showMap_selected(); directionsService.route( directionsRequest, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { new google.maps.DirectionsRenderer({ map: map, directions: response, suppressMarkers: true }); var leg = response.routes[0].legs[0]; makeMarker(leg.start_location, icons.start, "title", map); makeMarker(leg.end_location, icons.end, 'title', map); } else { alert("Unable to retrive route"); } }); } function makeMarker(position, icon, title, map) { new google.maps.Marker({ position: position, map: map, icon: icon, title: title }); } var icons = { start: new google.maps.MarkerImage( // URL 'http://maps.google.com/mapfiles/ms/micons/blue.png', // (width,height) new google.maps.Size(44, 32), // The origin point (x,y) new google.maps.Point(0, 0), // The anchor point (x,y) new google.maps.Point(22, 32)), end: new google.maps.MarkerImage( // URL 'http://maps.google.com/mapfiles/ms/micons/green.png', // (width,height) new google.maps.Size(44, 32), // The origin point (x,y) new google.maps.Point(0, 0), // The anchor point (x,y) new google.maps.Point(22, 32)) }; var showMap_selected = function() { var mapOptions = { zoom: 12, center: new google.maps.LatLng(lattitude_value, longitude_value), mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("selected_map_canvas"), mapOptions); return map; }; } function initialize() { var instance = new GoogleMap_selected(); instance.initialize(); } google.maps.event.addDomListener(window, 'load', initialize);
html, body, #selected_map_canvas { height: 100%; margin: 0px; padding: 0px }
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry"></script> <div id="panel"> <input type="text" id="slectedLat" value="32.715738"></input> <input type="text" id="slectedLon" value="-117.1610838"></input> </div> <div id="selected_map_canvas"></div> <div id="directions-panel"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.