Javascript 谷歌地图API标记未标记我的位置_Javascript_Google Maps_Google Maps Api 3_Geolocation_Google Maps Markers

Javascript 谷歌地图API标记未标记我的位置

javascript google-maps google-maps-api-3 geolocation

Javascript 谷歌地图API标记未标记我的位置,javascript,google-maps,google-maps-api-3,geolocation,google-maps-markers,Javascript,Google Maps,Google Maps Api 3,Geolocation,Google Maps Markers,我是新来的，我在大学工作遇到了问题。问题是我必须在用户的当前位置上显示一个标记，但它根本不起作用，我无法想象为什么 <html> <head> <title>Blank Cordova Mobile App Project Template (Lite)</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" http- equiv="Co

我是新来的，我在大学工作遇到了问题。问题是我必须在用户的当前位置上显示一个标记，但它根本不起作用，我无法想象为什么

 <html>
<head>
<title>Blank Cordova Mobile App Project Template (Lite)</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" http-   equiv="Content-type" content="text/html; charset=utf-8">

<!-- see http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
    /* following two viewport lines are equivalent to the meta viewport statement above, needed for Windows */
    @-ms-viewport { width: 100vw ; zoom: 100% ; }  @viewport { width: 100vw ; zoom: 100% ; }
    @-ms-viewport { user-zoom: fixed ; }           @viewport { user-zoom: fixed ; }
</style>

<style type="text/css">
div#map {
position: relative;
 }
 div#crosshair {
position: absolute;
top: 192px;
height: 19px;
width: 19px;
left: 50%;
margin-left: -8px;
display: block;
background: url(crosshair.gif);
background-position: center center;
background-repeat: no-repeat;
}
</style>

<script src="cordova.js"></script>          <!-- phantom library, needed for Cordova api calls, added during build -->
<script src="js/app.js"></script>
           <!-- recommended location of your JavaScript code relative to other JS files -->
<script src="xdk/init-dev.js"></script>     <!-- normalizes device and document ready events, see README for details -->

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
/*The map starts tracing the device's location from the very start, the problem is that the first marker isn't working*/

 var map;
 var geocoder;
 var centerChangedLast;
 var reverseGeocodedLast;
 var currentReverseGeocodeResponse;

 var directions = null;

 var distance = null; // km

 var pos;
 var kmh = position.coords.speed;

 //This function traces the device position
 function initialize() {
 map = new google.maps.Map(document.getElementById("map_canvas"), {
 center: {lat: -34.397, lng: 150.644},
 zoom: 11
 });
 geocoder = new google.maps.Geocoder();
 setupEvents();
 //centerChanged(); I've commented this because isn't affecting the system
 var infoWindow = new google.maps.InfoWindow({"map_canvas": map});

 // Try HTML5 geolocation.
 if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
   pos = {
    lat: position.coords.latitude,
    lng: position.coords.longitude
  };

  infoWindow.setPosition(pos);
  infoWindow.setContent('Location found.');
  map.setCenter(pos);
   }, function() {
  handleLocationError(true, infoWindow, map.getCenter());
   });
  } else {
  // Browser doesn't support Geolocation
  handleLocationError(false, infoWindow, map.getCenter());
  }

  var markme = new google.maps.Marker({
                            title : "Title",
                            position : pos,
                            map: map,
                     });
   markme.setMap(map);
   }
  //Error Treatment
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
                    'Error: The Geolocation service failed.' :
                    'Error: Your browser doesn\'t support geolocation.');
}


//Sets events
 function setupEvents() {
 reverseGeocodedLast = new Date();
 centerChangedLast = new Date();
 setInterval(function() {
  if((new Date()).getSeconds() - centerChangedLast.getSeconds() > 1) {
    if(reverseGeocodedLast.getTime() < centerChangedLast.getTime())
      reverseGeocode();
  }
}, 1000);
google.maps.event.addListener(map, 'zoom_changed', function() {
  document.getElementById("zoom_level").innerHTML = map.getZoom();
 });
 google.maps.event.addListener(map, 'center_changed', centerChanged);
                 google.maps.event.addDomListener(document.getElementById('crosshair'),'dblclick'    , function() {
   map.setZoom(map.getZoom() + 1);
  });
 }
  function getCenterLatLngText() {
 return '(' + map.getCenter().lat() +', '+ map.getCenter().lng() +')';
  }
  //This function is the one that I'm not using.
  function centerChanged() {
   centerChangedLast = new Date();
  var latlng = getCenterLatLngText();
  document.getElementById('latlng').innerHTML = latlng;
  document.getElementById('formatedAddress').innerHTML = '';
  currentReverseGeocodeResponse = null;
  }

  function reverseGeocode() {
   reverseGeocodedLast = new Date();
   geocoder.geocode({latLng:map.getCenter()},reverseGeocodeResult);
   }
  //Sets the labels on the HTML
  function reverseGeocodeResult(results, status) {
   currentReverseGeocodeResponse = results;
  if(status == 'OK') {
    if(results.length == 0) {
    document.getElementById('formatedAddress').innerHTML = 'None';
   } else {
     document.getElementById('formatedAddress').innerHTML =       results[0].formatted_address;
    }
    } else {
   document.getElementById('formatedAddress').innerHTML = 'Error';
    }
   }
   //This function is really important it locates the target place
  function geocode() {
  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,
    });

   marker.setMap(map);
   marker.setDraggable(false);

   google.maps.event.addListener(marker, 'dragend', function (event) {
    var point = marker.getPosition();
    map.panTo(point);

    // Update text fields with lat and lng
    document.getElementById("marlat").value = point.lat();
    document.getElementById("marlon").value = point.lng();
   });
  } else {
    alert('Geocode was not successful for the following reason: ' + status);
  }
   });


 var output = document.getElementById("mylatlng");

 //this function shows the user's current position on a label, I'll be merging it with the initialize() function.
 function success(position) {

 var latitude  = position.coords.latitude;
 var longitude = position.coords.longitude;

 output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' +   longitude + '°</p>';
  };

//Error treatment
 function error() {
 output.innerHTML = "Unable to retrieve your location";
 };

 output.innerHTML = "<p>Locating…</p>";

 navigator.geolocation.getCurrentPosition(success, error);
 }
 //This function isn't working yet, it should creat a route from the user's     position to the target place, but I've had no time to fix it.
  function route() {
  // Convert the distance to box around the route from miles to km
  distance = parseFloat(document.getElementById("distance").value) *     1.609344;

  var request = {
    origin: document.pos,
    destination: document.getElementById("address").value,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  }

  // Make the directions request
  directionService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsRenderer.setDirections(result);

      // Box around the overview path of the first route
      var path = result.routes[0].overview_path;
      var boxes = routeBoxer.box(path, distance);
      drawBoxes(boxes);
    } else {
      alert("Directions query failed: " + status);
    }
  });
}

</script>
</head>

<body onload="initialize()">
Find Place: <input type="text" id="address"/><input type="button" value="Go" onclick="geocode()">
 <div id="map">
<div id="map_canvas" style="width:100%; height:400px"></div>
<div id="crosshair"></div>
</div>

 <table>
<tr><td>Lat/Lng:</td><td><div id="latlng"></div></td></tr>
<tr><td>Address:</td><td><div id="formatedAddress"></div></td></tr>
<tr><td>Zoom Level</td><td><div id="zoom_level">2</div></td></tr>
 </table>
 <table>
<tr><td>Your Coords:</td><td><div id="mylatlng"></div></td></tr>
<tr><td>Your Address:</td><td><div id="myformatedAddress"></div></td></tr>
 </table>
 <table>
<tr><td>Marker Lat:</td><td><div id="marlat"></div></td></tr>
<tr><td>Marker lon:</td><td><div id="marlon"></div></td></tr>
 </table>

</body>
</html>


空白Cordova移动应用程序项目模板（Lite）
/*以下两条视口线相当于上面的元视口语句，这是Windows所需要的*/
@-ms视口{宽度：100vw；缩放：100%；}@viewport{宽度：100vw；缩放：100%；}
@-ms视口{用户缩放：固定；}@viewport{用户缩放：固定；}
分区图{
位置：相对位置；
}
十字准线{
位置：绝对位置；
顶部：192px；
高度：19px；
宽度：19px；
左：50%；
左边距：-8px；
显示：块；
背景：url（crosshair.gif）；
背景位置：中心；
背景重复：无重复；
}
/*地图从一开始就开始跟踪设备的位置，问题是第一个标记不起作用*/
var映射；
var地理编码器；
var centerChangedLast；
var反向电泳；
无功电流反向响应；
var方向=null；
变量距离=null；//公里
var-pos；
var kmh=位置坐标速度；
//此函数跟踪设备位置
函数初始化（）{
map=new google.maps.map（document.getElementById（“map_canvas”）{
中心：{纬度：-34.397，液化天然气：150.644}，
缩放：11
});
geocoder=新的google.maps.geocoder（）；
setupEvents（）；
//centerChanged（）；我对此进行了评论，因为它不会影响系统
var infoWindow=new google.maps.infoWindow（{“map_canvas”：map}）；
//试试HTML5地理定位。
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
pos={
纬度：位置坐标纬度，
lng:position.coords.longitude
};
信息窗口。设置位置（pos）；
infoWindow.setContent（'找到位置'）；
地图设置中心（pos）；
}，函数（）{
handleLocationError（true，infoWindow，map.getCenter（））；
});
}否则{
//浏览器不支持地理位置
handleLocationError（false，infoWindow，map.getCenter（））；
}
var markme=new google.maps.Marker({
标题：“标题”，
职位:pos,，
地图：地图，
});
markme.setMap（map）；
}
//错误处理
功能手柄位置错误（浏览器具有地理位置、信息窗口、pos）{
信息窗口。设置位置（pos）；
infoWindow.setContent（browserHasGeolocation？
“错误：地理位置服务失败。”：
'错误：您的浏览器不支持地理位置。'）；
}
//设置事件
函数setupEvents（）{
reverseGeocodedLast=新日期（）；
centerChangedLast=新日期（）；
setInterval（函数（）{
如果（（新日期（））.getSeconds（）-centerChangedLast.getSeconds（）>1）{
如果（reverseGeocodedLast.getTime（）经度为'+Latitude+'''”；
};
//错误处理
函数错误（）{
output.innerHTML=“无法检索您的位置”；
};
output.innerHTML=“定位…”；
navigator.geolocation.getCurrentPosition（成功，错误）；
}
//这个函数还没有运行，它应该创建一条从用户位置到目标位置的路线，但是我没有时间修复它。
函数路径（）{
//将路线周围的距离从英里转换为方框
var map;

function initialize() {

    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(41.056466, -85.3312009),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    // Add 1st marker
    var Latlng_0 = new google.maps.LatLng(41.057814980291, -85.329851919709);
    var marker_0 = new google.maps.Marker({
        position: Latlng_0,
        title: "0"
    });

    marker_0.setMap(map);

    //Add 2nd marker
    var Latlng_1 = new google.maps.LatLng(41.065294480291, -85.330151019708);
    var marker_1 = new google.maps.Marker({
        position: Latlng_1,
        title: "1"
    });

    marker_1.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);