Google Maps JavaScript API v3在两个位置之间绘制线条
请帮帮我,我真的很坚持! 我的代码是:Google Maps JavaScript API v3在两个位置之间绘制线条,javascript,google-maps-api-3,Javascript,Google Maps Api 3,请帮帮我,我真的很坚持! 我的代码是: <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Geocoding service</title> <style>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Geocoding service</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
var address2 = document.getElementById('address2').value;
geocoder.geocode( { 'address2': address2}, function(results2, status2) {
if (status2 == google.maps.GeocoderStatus.OK) {
var marker2 = new google.maps.Marker({
map: map,
position: results2[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
var myTrip = [address,address2];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#00F",
strokeOpacity:0.8,
strokeWeight:2
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel">
<input id="address" type="textbox" value="address 1">
<input id="address2" type="textbox" value="address 2">
<input type="button" value="Geocode" onclick="codeAddress()">
</div>
<div id="map-canvas"></div>
</body>
</html>
地理编码服务
html,正文,#地图画布{
身高:100%;
边际:0px;
填充:0px
}
#面板{
位置:绝对位置;
顶部:5px;
左:50%;
左边距:-180px;
z指数:5;
背景色:#fff;
填充物:5px;
边框:1px实心#999;
}
var地理编码器;
var映射;
函数初始化(){
geocoder=新的google.maps.geocoder();
var latlng=新的google.maps.latlng(-34.397150.644);
变量映射选项={
缩放:8,
中心:拉丁
}
map=new google.maps.map(document.getElementById('map-canvas'),mapOptions);
}
函数代码地址(){
var address=document.getElementById('address')。值;
geocoder.geocode({'address':address},函数(结果,状态){
if(status==google.maps.GeocoderStatus.OK){
map.setCenter(结果[0].geometry.location);
var marker=new google.maps.marker({
地图:地图,
位置:结果[0]。几何体。位置
});
}否则{
警报('地理编码因以下原因未成功:'+状态);
}
});
var address2=document.getElementById('address2')。值;
geocoder.geocode({'address2':address2},函数(results2,status2){
if(status2==google.maps.GeocoderStatus.OK){
var marker2=新的google.maps.Marker({
地图:地图,
位置:results2[0]。geometry.location
});
}否则{
警报('地理编码因以下原因未成功:'+状态);
}
});
var myTrip=[地址,地址2];
var flightPath=new google.maps.Polyline({
路径:myTrip,
strokeColor:#00F“,
笔划不透明度:0.8,
冲程重量:2
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(窗口“加载”,初始化);
我想在输入中输入两个地址,分别将其转换为lat/long,在地图上放置两个标记,并在它们之间画一条直线!
我的代码不工作,它只显示第一个地址,仅此而已。。。
提前谢谢你 看来您至少有语法错误(
address2
),因为您定义了:
geocoder.geocode( { 'address2': address2}, function(results2, status2) {
而不是:
geocoder.geocode( { 'address': address2}, function(results2, status2) {
但是,在定义实际多段线时也会出现错误,因为地理编码是异步的,您不能在地理编码行之后调用多段线的创建,而是需要创建单独的方法或类似的回调功能,在地理编码完成时调用。否则,您只需处理未定义的值
因此,我决定添加名为displaymarks()
的方法,该方法从每个地理编码请求调用,然后检查是否所有地址都进行了地理编码,并相应地执行操作。下面是修改后的代码:(它也可以在不刷新页面的情况下工作,您可以尝试搜索一行中的多个地址)
致:
使用JSFIDLE执行此操作:签入控制台
您遇到了什么错误?非常感谢Mauno!我真的很感激你的帮助!它工作得很好!如果你能多帮我一点,那就太好了!在对位置进行地理编码后,我尝试将地图居中到第一个地址,但没有成功:(这是我尝试的cod:if(status==google.maps.GeocoderStatus.OK){map.setCenter(results[0].geometry.location);…非常感谢您!!@user3488958好的,我在这里创建了一个示例:您可以在脚本底部的displayMarkers方法中看到地图居中。我没有将其作为答案的一部分,但如果现在完成了,请随意接受。干杯:)非常感谢您的帮助!我真的很感谢!Mauno,还有一件事。我很惭愧,但请您输入代码,显示这两个位置之间的距离(km)。在“面板”部分。提前感谢您,并对此表示歉意!这超出了问题的范围,但我想将其包含在评论中不会造成伤害:(请参阅我在js map api url中添加了&libraries=geometry)。因此应该将其更改为:-对于其余部分,提出新问题或在出现问题时使用搜索:)
var geocoder;
var map;
var geocodeMarkers = [];
var flightPath;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeAddress() {
// Emptying last addresses because of recent query
for(var i = 0; i < geocodeMarkers.length; i++) {
geocodeMarkers[i].setMap(null);
}
// Empty array
geocodeMarkers.length = 0;
// Empty flight route
if(typeof flightPath !== "undefined") {
flightPath.setMap(null);
flightPath = undefined;
}
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// Adding marker to geocodeMarkers
geocodeMarkers.push(
new google.maps.Marker({
position: results[0].geometry.location
})
);
// Attempting to display
displayMarkers();
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
var address2 = document.getElementById('address2').value;
geocoder.geocode( { 'address': address2 }, function(results2, status2) {
if (status2 == google.maps.GeocoderStatus.OK) {
// Adding marker to geocodeMarkers
geocodeMarkers.push(
new google.maps.Marker({
position: results2[0].geometry.location
})
);
// Attempting to display
displayMarkers();
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function displayMarkers() {
// If geocoded successfully for both addresses
if(geocodeMarkers.length === 2) {
// Bounds for the markers so map can be placed properly
var bounds = new google.maps.LatLngBounds(
geocodeMarkers[0].getPosition(),
geocodeMarkers[1].getPosition()
);
// Fit map to bounds
map.fitBounds(bounds);
// Setting markers to map
geocodeMarkers[0].setMap(map);
geocodeMarkers[1].setMap(map);
flightPath = new google.maps.Polyline({
path: [geocodeMarkers[0].getPosition(), geocodeMarkers[1].getPosition()],
strokeColor:"#00F",
strokeOpacity:0.8,
strokeWeight:2,
map: map
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
// Bounds for the markers so map can be placed properly
var bounds = new google.maps.LatLngBounds(
geocodeMarkers[0].getPosition(),
geocodeMarkers[1].getPosition()
);
// Fit map to bounds
map.fitBounds(bounds);
// Center map to first geocoded location
map.setCenter(geocodeMarkers[0].getPosition());