作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
有没有简单的解决方案来修复路由功能
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var digiLocation = { "lat" : "51.597336" , "long" : "-0.109035" };
$(document).ready(function() {
$("#direction-route").click(function(event){
event.preventDefault();
var locationStart = "turnpike lane"
calcRoute(locationStart)
});
var laLatLng;
initialize();
});
// Set pointer at the middle while resize
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
function calcRoute(locationStart){
var request = {
origin: locationStart,
destination:(digiLocation.lat, digiLocation.long),
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
myLatlng.setDirections(response);
}
});
}
function initialize() {
var myLatlng = new google.maps.LatLng(digiLocation.lat, digiLocation.long);
var myOptions = {
scrollwheel: false,
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [ { "stylers": [{ "saturation": -100 } ]}]
};
map = new google.maps.Map(document.getElementById('digi-map'), myOptions);
marker = new google.maps.Marker({
position: myLatlng,
icon: 'img/digi-marker.png',
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
最佳答案
天哪,这充满了错误! :-)
查看工作 fiddle :http://jsfiddle.net/manishie/5fGEZ/
JavaScript:
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var digiLocation = {
"lat": "51.597336",
"long": "-0.109035"
};
var myLatlng = new google.maps.LatLng(digiLocation.lat, digiLocation.long);
$(document).ready(function () {
$("#direction-route").click(function (event) {
event.preventDefault();
var locationStart = "turnpike lane"
calcRoute(locationStart)
});
var laLatLng;
initialize();
});
// Set pointer at the middle while resize
google.maps.event.addDomListener(window, "resize", function () {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
function calcRoute(locationStart) {
var request = {
origin: locationStart,
destination: new google.maps.LatLng(digiLocation.lat, digiLocation.long),
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
function initialize() {
var myOptions = {
scrollwheel: false,
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{
"stylers": [{
"saturation": -100
}]
}]
};
map = new google.maps.Map(document.getElementById('digi-map'), myOptions);
marker = new google.maps.Marker({
position: myLatlng,
icon: 'img/digi-marker.png',
map: map
});
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
关于javascript - 谷歌地图 API : how to show driving direction?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19193471/
leaflet:一个开源并且对移动端友好的交互式地图 JavaScript 库 中文文档: https://leafletjs.cn/reference.html 官网(英文): ht
我是一名优秀的程序员,十分优秀!