获取latlng并在两个latlng之间绘制折线 [英] Get latlng and draw a polyline between that two latlng
本文介绍了获取latlng并在两个latlng之间绘制折线的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的代码中有一些问题,首先我想从两个文本框中获取我的指定地址/城市名称,然后将其从位置的latlng转换为position的latlng,最后我要绘制一个折线这些点和标记之间的点也,但现在我想在这些点之间画一条线。但仍然不能工作这个代码也没有在控制台中的任何错误。代码在这里为您提供帮助。
I have some issue in my code in that first I want to get latlng of my given address/city name from two text boxes after that i converts it to from position's latlng and to position's latlng and at last i want to draw a polyline between these point and markers on both point also, But now i am trying to draw a line between these points. But still not working this code also no any error in console also. code is here for your help.
function getRoute(){
var from_text = document.getElementById("travelFrom").value;
var to_text = document.getElementById("travelTo").value;
if(from_text == ""){
alert("Enter travel from field")
document.getElementById("travelFrom").focus();
}
else if(to_text == ""){
alert("Enter travel to field");
document.getElementById("travelTo").focus();
}
else{
//google.maps.event.addListener(map, "", function (e) {
var myLatLng = new google.maps.LatLng(28.6667, 77.2167);
var mapOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var geocoder = new google.maps.Geocoder();
var address1 = from_text;
var address2 = to_text;
var from_latlng,to_latlng;
//var prepath = path;
//if(prepath){
// prepath.setMap(null);
//}
geocoder.geocode( { 'address': address1}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
{
// do something with the geocoded result
// alert(results[0].geometry.location);
from_latlng = results[0].geometry.location;
// from_lat = results[0].geometry.location.latitude;
// from_lng = results[0].geometry.location.longitude;
// alert(from_latlng);
}
});
geocoder.geocode( { 'address': address2}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
{
// do something with the geocoded result
to_latlng = results[0].geometry.location;
// to_lat = results[0].geometry.location.latitude;
// to_lng = results[0].geometry.location.longitude;
// results[0].geometry.location.longitude
// alert(to_latlng)
}
});
setTimeout(function(){
var flightPlanCoordinates = [
new google.maps.LatLng(from_latlng),
new google.maps.LatLng(to_latlng)
];
//alert("123")
var polyline;
polyline = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
polyline.setMap(map);
// assign to global var path
// path = polyline;
},4000);
// });
}
}
推荐答案
/*This is script*/
var x=0;
var map;
var prepath;
var path = null;
var current_lat = 28.6667;
var current_lng = 77.2167;
function initialize() {
var myLatLng = new google.maps.LatLng(28.6667, 77.2167);
var mapOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
//alert("sdf")
google.maps.event.addListener(map, "click", function (e) {
//delete old
//alert("sdf123")
prepath = path;
if(prepath){
prepath.setMap(null);
}
current_lat = e.latLng.lat();
current_lng = e.latLng.lng();
var flightPlanCoordinates = [
new google.maps.LatLng(39.9100, 116.4000),
new google.maps.LatLng(35.6833, 139.7667)
];
var polyline;
polyline = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
//new polyline
polyline.setMap(map);
// assign to global var path
path = polyline;
});
}
google.maps.event.addDomListener(window, 'load', initialize);
/*this is html*/
<div id="map-canvas"></div>
<div id="textboxContainer" style="width:100%; height:40px; top:0; position:absolute;">
From : <input type="text" name="travelFrom" id="travelFrom"> To : <input type="text" name="travelTo" id="travelTo" onBlur="getRoute()">
</div>
这篇关于获取latlng并在两个latlng之间绘制折线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文