Fatal编程技术网
  • javascript/
  • Javascript 谷歌地图api中未显示标记

Javascript 谷歌地图api中未显示标记

javascript google-maps

Javascript 谷歌地图api中未显示标记,javascript,google-maps,marker,Javascript,Google Maps,Marker,我有一个基于地理位置给出方向的地图，但是我希望在用户得到方向之前，地图上就有一个标记。当网页加载时，我似乎无法让标记显示出来。我使用的代码如下： <script src="http://maps.google.com/maps/api/js?sensor=true"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></scrip

我有一个基于地理位置给出方向的地图，但是我希望在用户得到方向之前，地图上就有一个标记。当网页加载时，我似乎无法让标记显示出来。我使用的代码如下：

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>

var directionDisplay, map;
  function calculateRoute(from, to) {
    // Center initialized to Lafayette IN
    var travelMode = $('input[name="travelMode"]:checked').val();
    var myOptions = {
      zoom: 10,
      center: new google.maps.LatLng(40.40541,-86.89048),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var panel = document.getElementById("directionsPanel");
    var marker = new google.maps.Marker({
    position: new google.maps.LatLng(40.40541,-86.89048), 
    map: map,
    title: "Beyond the Box"
  }); 
     marker.setMap(map);
    // Draw the map
    var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);

    var directionsService = new google.maps.DirectionsService();
    var directionsRequest = {
      origin: from,
      destination: to,
      travelMode: google.maps.DirectionsTravelMode[travelMode],
      unitSystem: google.maps.UnitSystem.IMPERIAL
    };
    directionsService.route(
      directionsRequest,
      function(response, status)
      {
        if (status == google.maps.DirectionsStatus.OK)
        {
          new google.maps.DirectionsRenderer({
            map: mapObject,
            directions: response,
          });
        }
        if (status == google.maps.DirectionsStatus.OK)
        {
          directionsDisplay = new google.maps.DirectionsRenderer({
            map: mapObject,
            directions: response,
          });
          directionsDisplay.setPanel(panel);
        }
        else
          $("#error").append("Unable to retrieve your route<br />");
      }
    );
   }

   $(document).ready(function() {
    // If the browser supports the Geolocation API
    if (typeof navigator.geolocation == "undefined") {
      $("#error").text("Your browser doesn't support the Geolocation API");
      return;
    }

    $("#from-link, #to-link").click(function(event) {
      event.preventDefault();
      var addressId = this.id.substring(0, this.id.indexOf("-"));

      navigator.geolocation.getCurrentPosition(function(position) {
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({
          "location": new google.maps.LatLng(position.coords.latitude,     position.coords.longitude)
        },
        function(results, status) {
          if (status == google.maps.GeocoderStatus.OK)
            $("#" + addressId).val(results[0].formatted_address);
          else
            $("#error").append("Unable to retrieve your address<br />");
        });
      },
      function(positionError){
        $("#error").append("Error: " + positionError.message + "<br />");
      },
      {
        enableHighAccuracy: true,
        timeout: 10 * 1000 // 10 seconds
      });
    });

    $("#calculate-route").submit(function(event) {
      event.preventDefault();
      calculateRoute($("#from").val(), $("#to").val());
    });
  });
  google.maps.event.addDomListener(window, 'load', initialize);

  </script>
</head>
<body>
<body onLoad="calculateRoute()">
<!-- Start Header -->
<?php include("header.php"); ?> 
<!-- End Header -->


var方向显示、地图；
函数计算器输出（从、到）{
//中心已初始化为Lafayette IN
var travelMode=$（'input[name=“travelMode”]：checked'）.val（）；
变量myOptions={
缩放：10，
中心：新google.maps.LatLng（40.40541，-86.89048），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var panel=document.getElementById（“directionsPanel”）；
var marker=new google.maps.marker({
位置：新google.maps.LatLng（40.40541，-86.89048），
地图：地图，
标题：“盒子之外”
}); 
marker.setMap（map）；
//画地图
var mapObject=new google.maps.Map（document.getElementById（“Map”），myOptions）；
var directionsService=new google.maps.directionsService（）；
变量方向请求={
出处:从,，
目的地：至，
travelMode:google.maps.DirectionsTravelMode[travelMode]，
unitSystem:google.maps.unitSystem.IMPERIAL
};
方向服务.路线(
指示请求，
功能（响应、状态）
{
if（status==google.maps.directionstatus.OK）
{
新google.maps.DirectionsRenderer({
map:mapObject，
方向:回应,，
});
}
if（status==google.maps.directionstatus.OK）
{
directionsDisplay=新建google.maps.DirectionsRenderer({
map:mapObject，
方向:回应,，
});
方向显示。设置面板（面板）；
}
其他的
$（“#错误”）.append（“无法检索您的路线
”；
}
);
}
$（文档）.ready（函数（）{
//如果浏览器支持地理定位API
if（typeof navigator.geolocation==“未定义”）{
$（“#错误”）.text（“您的浏览器不支持地理定位API”）；
返回；
}
$（“#从链接，#到链接”）。单击（函数（事件）{
event.preventDefault（）；
var addressId=this.id.substring（0，this.id.indexOf（“-”）；
navigator.geolocation.getCurrentPosition（函数（位置）{
var geocoder=new google.maps.geocoder（）；
地理编码({
“位置”：新的google.maps.LatLng（position.coords.latitude，position.coords.longitude）
},
功能（结果、状态）{
if（status==google.maps.GeocoderStatus.OK）
$（“#”+addressId）.val（结果[0]。格式化的#地址）；
其他的
$（“#错误”）.append（“无法检索您的地址
”；
});
},
功能（位置错误）{
$（“#error”）.append（“error:+positionError.message+”
）；
},
{
EnableHighAccurance:正确，
超时：10*1000//10秒
});
});
$（“#计算路线”）.submit（函数（事件）{
event.preventDefault（）；
计算器输出（$（“#from”）.val（），$（“#to”）.val（）；
});
});
google.maps.event.addDomListener（窗口“加载”，初始化）；
您没有初始化“map”变量。 试试这个

var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
marker.setMap(mapObject);
我在代码中看到的唯一标记是在calculateRoute函数中。你说“我希望在用户得到指示之前，地图上就有一个标记”，你认为这会起什么作用？你尝试了什么？我很抱歉不懂javascript。我尽我最大的努力把事情拼凑在一起，并有一个工作地图，这在很大程度上要感谢你对论坛上其他人之前提出的问题所提供的大量答案。如果不是像你和下面的麦克斯这样的伟大人物，我会花更多的时间来解决这些问题。这对我想要实现的目标来说非常有效。谢谢你，麦克斯。