Google Maps JavaScript API v3 在两个位置之间绘制线条
Google Maps JavaScript API v3 drawing line between two location
请帮帮我,我真的坚持了!我的代码是:
<!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>
我想在输入中输入两个地址,分别将其转换为经度/经度,在地图上放置两个标记并在它们之间画一条直线!我的代码不起作用,它只显示第一个地址,仅此而已......提前谢谢你!
好吧,似乎您至少存在语法错误( address2
),因为您定义了:
geocoder.geocode( { 'address2': address2}, function(results2, status2) {
而不是:
geocoder.geocode( { 'address': address2}, function(results2, status2) {
但是,在定义实际折线时也存在错误,因为地理编码是异步的,因此您无法在对线进行地理编码后调用折线的创建,而是需要创建单独的方法或类似的回调功能,该功能在地理编码完成后调用。否则,您只是在处理undefined
值。
因此,我决定添加名为 displayMarkers()
的方法,该方法从每个地理编码请求中调用,进而检查所有地址是否都经过地理编码并采取相应的行动。 以下是更改的代码:(它也可以在不刷新页面的情况下工作,您可以尝试连续搜索多个地址)。
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);
工作 jsfiddle 示例:js 小提琴演示 1
编辑:
经过进一步的评论,本主题的作者希望将地图居中放在第一个地理编码标记上。它是通过更改以下行来实现的:
// 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());
为此工作 jsfiddle:js 小提琴演示 2
相关文章:
- 修复列表的绝对位置(li's隐藏在前两个后面)
- 在AngularJS中的两个位置使用相同的控制器
- 我需要从文本框中的名字和姓氏的前两个字母到页面中的某个位置
- 在两个位置显示数组中的随机单词
- javascript中两个位置之间的距离
- 1行代码(console.log),代码中的两个位置=两个结果差异
- 如何在jquerymobile中同时放置两个定位的经纬度位置
- 函数来检查给定整数数组中给定位置的元素是否大于其两个邻域
- 单击页面上的任意位置时隐藏两个元素
- 如何将两个位置添加到同一个网站的谷歌地图中
- JavaScript:window.conf,有两个窗口位置
- 如何在两张地图中标记两个不同的位置是同一页面
- 同步两个可拖动元素的位置
- 如何根据jQuery中的滚动位置将Class()添加到两个不同导航的活动链接中
- 随机播放数组,因此没有两个键位于同一位置
- 比较画布上两个位置的 x/y
- 比较身体中两个元素的位置
- 如何在javascript中比较两个元素的位置
- 使用 AJAX 将表单提交到两个位置
- 获取两个位置之间的距离和时间的功能