Fatal编程技术网
  • javascript/
  • Javascript 需要加上「；“这里的方向”；信息窗口中的链接

Javascript 需要加上「；“这里的方向”；信息窗口中的链接

javascript google-maps-api-3

Javascript 需要加上「；“这里的方向”；信息窗口中的链接,javascript,google-maps-api-3,Javascript,Google Maps Api 3,我对谷歌地图和Javascript都是新手，但我必须解决这个问题！我有一个.html文件，其中有一个关于我们客户位置的谷歌地图，加载到map_canvas div中。通过教程，我已经能够想出如何编写足够的Javascript来让地图正常工作，并有一个自定义标记和信息窗口，当你点击它时会弹出。剩下的唯一部分是在信息窗口中有一个链接，上面写着“到这里的方向”，还有一个文本字段，用户可以在起始地址中键入。我在谷歌开发者的网站上看到了大量帮助我编写自己代码的文档，但我还没有足够的能力来完成这项工作。有人

我对谷歌地图和Javascript都是新手，但我必须解决这个问题！我有一个.html文件，其中有一个关于我们客户位置的谷歌地图，加载到map_canvas div中。通过教程，我已经能够想出如何编写足够的Javascript来让地图正常工作，并有一个自定义标记和信息窗口，当你点击它时会弹出。剩下的唯一部分是在信息窗口中有一个链接，上面写着“到这里的方向”，还有一个文本字段，用户可以在起始地址中键入。我在谷歌开发者的网站上看到了大量帮助我编写自己代码的文档，但我还没有足够的能力来完成这项工作。有人能帮我弄清楚怎么做吗？以下是我的Javascript：

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize()
{
    var latlng = new google.maps.LatLng(33.929011, -84.361);
    var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(33.929011, -84.361),
        map: map,
        title: 'Atlanta/Sandy Springs',
        clickable: true,
        icon: 'images/mapmarker.png'
    });

    var infowindow = new google.maps.InfoWindow({
      content: 'client address'
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map, marker);
    });

}
</script>


函数初始化（）
{
var latlng=新的google.maps.latlng（33.929011，-84.361）；
变量myOptions={
缩放：15，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
var marker=new google.maps.marker({
位置：新google.maps.LatLng（33.929011，-84.361），
地图：地图，
标题：“亚特兰大/桑迪斯普林斯”，
可点击：正确，
图标：“images/mapmarker.png”
});
var infowindow=new google.maps.infowindow({
内容：“客户端地址”
});
google.maps.event.addListener（标记'click'，函数（）{
信息窗口。打开（地图、标记）；
});
}
我添加了几个片段。首先，在infowindow中需要一个更好的HTML表单，因为我只输入基本部分，当您按Enter键时它不会响应

接下来，我添加了一个地理编码器，因为方向服务不会采用“人类可读”的地址，而只采用latLng坐标。地理编码器将两者进行转换。最后，添加了方向服务和显示。方向文本进入div（方向面板）

请参阅或使用此代码：

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
  html, body {
      margin: 0;
      padding: 0;
      height: 100%
  }
  #map_canvas {
      margin: 0;
      padding: 0;
      width: 50%;
      height: 100%
  }
  #directionsPanel {
      position: absolute;
      top: 0px;
      right: 0px;
      width: 50%
  }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
var geocoder;
var directionsService;
var directionsDisplay;

function initialize() {
    var latlng = new google.maps.LatLng(33.929011, -84.361);
    var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(33.929011, -84.361),
        map: map,
        title: 'Atlanta/Sandy Springs',
        clickable: true
    });

    var infowindow = new google.maps.InfoWindow({
        content: "Your address: <input id='clientAddress' type='text'>"+
                "<input type='button' onClick=getDir() value='Go!'>"
    });

    google.maps.event.addListener(marker, 'click', function () {
        infowindow.open(map, marker);
    });
    geocoder = new google.maps.Geocoder();
    directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer({
        suppressMarkers: false
    });
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}

function getDir() {
    geocoder.geocode({
        'address': document.getElementById('clientAddress').value
    },

    function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var origin = results[0].geometry.location;
            var destination = new google.maps.LatLng(33.929011, -84.361);

            var request = {
                origin: origin,
                destination: destination,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };

            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
            });

        } else {
            document.getElementById('clientAddress').value =
                "Directions cannot be computed at this time.";
        }
    });
}
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas"></div>
    <div id="directionsPanel"></div>
  </body>
</html>


html，正文{
保证金：0；
填充：0；
身高：100%
}
#地图画布{
保证金：0；
填充：0；
宽度：50%；
身高：100%
}
#方向盘{
位置：绝对位置；
顶部：0px；
右：0px；
宽度：50%
}
var地理编码器；
var定向服务；
var方向显示；
函数初始化（）{
var latlng=新的google.maps.latlng（33.929011，-84.361）；
变量myOptions={
缩放：15，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
var marker=new google.maps.marker({
位置：新google.maps.LatLng（33.929011，-84.361），
地图：地图，
标题：“亚特兰大/桑迪斯普林斯”，
可点击：正确
});
var infowindow=new google.maps.infowindow({
内容：“您的地址：”+
""
});
google.maps.event.addListener（标记，'click'，函数（）{
信息窗口。打开（地图、标记）；
});
geocoder=新的google.maps.geocoder（）；
directionsService=new google.maps.directionsService（）；
directionsDisplay=新建google.maps.DirectionsRenderer({
禁止标记：错误
});
方向显示.setMap（地图）；
directionsDisplay.setPanel（document.getElementById（“directionsPanel”）；
}
函数getDir（）{
地理编码({
“地址”：document.getElementById（'clientAddress'）。值
},
功能（结果、状态）{
if（status==google.maps.GeocoderStatus.OK）{
var origin=results[0]。geometry.location；
var destination=new google.maps.LatLng（33.929011，-84.361）；
var请求={
来源:来源,，
目的地：目的地，
travelMode:google.maps.Directions travelMode.DRIVING
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
}
});
}否则{
document.getElementById（'clientAddress'）。值=
“此时无法计算方向。”；
}
});
}
我添加了几个片段。首先，在infowindow中需要一个更好的HTML表单，因为我只输入基本部分，当您按Enter键时它不会响应

接下来，我添加了一个地理编码器，因为方向服务不会采用“人类可读”的地址，而只采用latLng坐标。地理编码器将两者进行转换。最后，添加了方向服务和显示。方向文本进入div（方向面板）

请参阅或使用此代码：

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
  html, body {
      margin: 0;
      padding: 0;
      height: 100%
  }
  #map_canvas {
      margin: 0;
      padding: 0;
      width: 50%;
      height: 100%
  }
  #directionsPanel {
      position: absolute;
      top: 0px;
      right: 0px;
      width: 50%
  }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
var geocoder;
var directionsService;
var directionsDisplay;

function initialize() {
    var latlng = new google.maps.LatLng(33.929011, -84.361);
    var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(33.929011, -84.361),
        map: map,
        title: 'Atlanta/Sandy Springs',
        clickable: true
    });

    var infowindow = new google.maps.InfoWindow({
        content: "Your address: <input id='clientAddress' type='text'>"+
                "<input type='button' onClick=getDir() value='Go!'>"
    });

    google.maps.event.addListener(marker, 'click', function () {
        infowindow.open(map, marker);
    });
    geocoder = new google.maps.Geocoder();
    directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer({
        suppressMarkers: false
    });
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}

function getDir() {
    geocoder.geocode({
        'address': document.getElementById('clientAddress').value
    },

    function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var origin = results[0].geometry.location;
            var destination = new google.maps.LatLng(33.929011, -84.361);

            var request = {
                origin: origin,
                destination: destination,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };

            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
            });

        } else {
            document.getElementById('clientAddress').value =
                "Directions cannot be computed at this time.";
        }
    });
}
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas"></div>
    <div id="directionsPanel"></div>
  </body>
</html>


html，正文{
保证金：0；
填充：0；
身高：100%
}
#地图画布{
保证金：0；
填充：0；
宽度：50%；
身高：100%
}
#方向盘{
位置：绝对位置；
顶部：0px；
右：0px；
宽度：50%
}
var地理编码器；
var定向服务；
var方向显示；
函数初始化（）{
var latlng=新的google.maps.latlng（33.929011，-84.361）；
变量myOptions={
缩放：15，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
var marker=new google.maps.marker({
位置：新google.maps.LatLng（33.929011，-84.361），
地图：地图，
标题：“亚特兰大/桑迪斯普林斯”，
可点击：正确
});
var infowindow=new google.maps.infowindow({
内容：“您的地址：”+
""
});
google.maps.event.addListener（标记，'click'，函数（）{
信息窗口。打开（地图、标记）；
});
geocoder=新的google.maps.geocoder（）；
directionsService=new google.maps.directionsService（）；
迪雷克