地理位置更改标记位置

时间:2015-08-27 11:23:46

标签: javascript html5 google-maps geolocation

我使用地理位置,我可以查看地图我的坐标。然后,标记放置坐标。 我想改变标记位置。 我的代码在这里:

var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  lat=position.coords.latitude;
  lon=position.coords.longitude;
  latlon=new google.maps.LatLng(lat, lon)
  mapholder=document.getElementById('mapholder')
  mapholder.style.height='250px';
  mapholder.style.width='100%';

  var myOptions={
  center:latlon,zoom:14,
  mapTypeId:google.maps.MapTypeId.ROADMAP,
  mapTypeControl:false,
  navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
  };
  var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
  var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});

此代码获取我的位置坐标。如何更改标记位置?

3 个答案:

答案 0 :(得分:1)

我很抱歉Eren关于我以前的回答。我误解了。我想,这是正确的你所需要的。

显示标记移动的纬度和经度

Refer this site

答案 1 :(得分:1)

我在此页面中找到了解决方案。我的问题解决了。

refer thisthis site

var map;
var myCenter = new google.maps.LatLng(37, 35);
var markersArray = [];

function clearOverlays() {
    for (var i = 0; i < markersArray.length; i++) {
        markersArray[i].setMap(null);
    }
    markersArray.length = 0;
}

function initialize() {
    var mapProp = {
        center: myCenter,
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

    google.maps.event.addListener(map, 'click', function (event) {
        placeMarker(event.latLng);
    });
}

function placeMarker(location) {
    clearOverlays();
    var marker = new google.maps.Marker({
        position: location,
        map: map,
    });
    markersArray.push(marker);
    var infowindow = new google.maps.InfoWindow({
        content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
    });
    infowindow.open(map, marker);
}

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

答案 2 :(得分:0)

在initialize()之前调用moveBus()。尝试将该行放在initialize()函数的末尾。 Lat / Lon 0,0也不在地图上(它的坐标,而不是像素),所以当它移动时你无法看到它。试试54,54。如果您希望地图的中心移动到新位置,请使用panTo()。

Demo: http: //jsfiddle.net/ThinkingStiff/Rsp22/

HTML:

<script src = "http://maps.googleapis.com/maps/api/js?sensor=false" > </script> <div id = "map-canvas"> </div>
CSS:

    #map-canvas {
        height: 400 px;
        width: 500 px;
    }

Script:

    function initialize() {

        var myLatLng = new google.maps.LatLng(50, 50),
            myOptions = {
                zoom: 4,
                center: myLatLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            },
            map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
            marker = new google.maps.Marker({
                position: myLatLng,
                map: map
            });

        marker.setMap(map);
        moveBus(map, marker);

    }

function moveBus(map, marker) {

    marker.setPosition(new google.maps.LatLng(0, 0));
    map.panTo(new google.maps.LatLng(0, 0));

};

initialize();