обновление позиции пользовательского маркера - PullRequest
Новая
       6

обновление позиции пользовательского маркера

0 голосов
/ 22 декабря 2018

Я пытаюсь обновить положение пользовательского маркера на картах Google.Я установил маркер как переменную, но когда я пытаюсь использовать setPosition, он говорит Uncaught TypeError: orig.setPosition не является функцией.

Я устанавливаю маркер так же, как и его собственный маркер. 

orig = new CustomMarker(new google.maps.LatLng(newlat,newlng), map,  data[0].profileImage)

и я пытаюсь обновить позицию следующим образом: 

  var newlat = document.getElementById('my_lat').value; 
  var newlng = document.getElementById('my_lng').value; 

    var newlatlng = new google.maps.LatLng(newlat, newlng);
    orig.setPosition(newlatlng);

и marker.css 

    .customMarker {
        position:absolute;
        cursor:pointer;
        background:#424242;
        width:100px;
        height:100px;
        /

* -width/2 */
    margin-left:-50px;
    /* -height + arrow */
    margin-top:-110px;
    border-radius:10px;
    padding:0px;
}
.customMarker:after {
    content:"";
    position: absolute;
    bottom: -10px;
    left: 40px;
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: #424242 transparent;
    display: block;
    width: 0;

}
.customMarker img {
    width:90px;
    height:90px;
    margin:5px;
    border-radius:10px;
}

и JS 

function CustomMarker(latlng, map, imageSrc) {
    this.latlng_ = latlng;
    this.imageSrc = imageSrc;
    // Once the LatLng and text are set, add the overlay to the map.  This will
    // trigger a call to panes_changed which should in turn call draw.
    this.setMap(map);
}

CustomMarker.prototype = new google.maps.OverlayView();

CustomMarker.prototype.draw = function () {
    // Check if the div has been created.
    var div = this.div_;
    if (!div) {
        // Create a overlay text DIV
        div = this.div_ = document.createElement('div');
        // Create the DIV representing our CustomMarker
        div.className = "customMarker"


        var img = document.createElement("img");
        img.src = this.imageSrc;
        div.appendChild(img);
        google.maps.event.addDomListener(div, "click", function (event) {
            google.maps.event.trigger(me, "click");
        });

        // Then add the overlay to the DOM
        var panes = this.getPanes();
        panes.overlayImage.appendChild(div);
    }

    // Position the overlay 
    var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
    if (point) {
        div.style.left = point.x + 'px';
        div.style.top = point.y + 'px';
    }
};

CustomMarker.prototype.remove = function () {
    // Check if the overlay was on the map and needs to be removed.
    if (this.div_) {
        this.div_.parentNode.removeChild(this.div_);
        this.div_ = null;
    }
};

CustomMarker.prototype.getPosition = function () {
    return this.latlng_;
};

Это потому, что это пользовательский маркер?

Любая помощь будет отличной, спасибо

1 Ответ

0 голосов
/ 23 декабря 2018

Вам необходимо добавить .setPosition метод к вашему CustomMarker.Это работает для меня: 

CustomMarker.prototype.setPosition = function(position) {
  this.latlng_ = position;
    // Position the overlay 
  var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
  if (point) {
    this.div_.style.left = point.x + 'px';
    this.div_.style.top = point.y + 'px';
  }
};

подтверждение концепции скрипта (в основном из кода, который вы разместили в своем другом вопросе )

screenshot of resulting map

фрагмент кода: 

var s_lat = '52.414660';
var s_lng = '-1.557670';
var d_lat = '52.450439';
var d_lng = '-1.729660';

var start = new google.maps.LatLng(52.414660, -1.557670);
var finish = new google.maps.LatLng(52.450439, -1.729660);


function getroute() {

  var p_lat = '52.414660';
  var p_lng = '-1.557670';
  var d_lat = '52.450439';
  var d_lng = '-1.729660';

  var pointA = new google.maps.LatLng(p_lat, p_lng),
    pointB = new google.maps.LatLng(d_lat, d_lng),
    myOptions = {
      zoom: 7,
      center: pointA
    },
    // map = new google.maps.Map(document.getElementById('map'), myOptions),
    // Instantiate a directions service.

    directionsService = new google.maps.DirectionsService,
    directionsDisplay = new google.maps.DirectionsRenderer({
      map: map, suppressMarkers: true
    })

  // get route from A to B
  calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);

}

function changeOrigin() {
  var newlat = document.getElementById('my_lat').value;
  var newlng = document.getElementById('my_lng').value;

  var newlatlng = new google.maps.LatLng(newlat, newlng);
  orig.setPosition(newlatlng);
}


function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) {
  directionsService.route({
    origin: pointA,
    destination: pointB,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}



function CustomMarker(latlng, map, imageSrc) {
  this.latlng_ = latlng;
  this.imageSrc = imageSrc;
  // Once the LatLng and text are set, add the overlay to the map.  This will
  // trigger a call to panes_changed which should in turn call draw.
  this.setMap(map);
}

CustomMarker.prototype = new google.maps.OverlayView();

CustomMarker.prototype.draw = function() {
  // Check if the div has been created.
  var div = this.div_;
  if (!div) {
    // Create a overlay text DIV
    div = this.div_ = document.createElement('div');
    // Create the DIV representing our CustomMarker
    div.className = "customMarker"


    var img = document.createElement("img");
    img.src = this.imageSrc;
    div.appendChild(img);
    google.maps.event.addDomListener(div, "click", function(event) {
      google.maps.event.trigger(me, "click");
    });

    // Then add the overlay to the DOM
    var panes = this.getPanes();
    panes.overlayImage.appendChild(div);
  }

  // Position the overlay 
  var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
  if (point) {
    div.style.left = point.x + 'px';
    div.style.top = point.y + 'px';
  }
};

CustomMarker.prototype.remove = function() {
  // Check if the overlay was on the map and needs to be removed.
  if (this.div_) {
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
  }
};

CustomMarker.prototype.getPosition = function() {
  return this.latlng_;
};
CustomMarker.prototype.setPosition = function(position) {
  this.latlng_ = position;
  // Position the overlay 
  var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
  if (point) {
    this.div_.style.left = point.x + 'px';
    this.div_.style.top = point.y + 'px';
  }
};

var map = new google.maps.Map(document.getElementById("map"), {
  zoom: 17,
  fullscreenControl: false,
  streetViewControl: false,
  center: new google.maps.LatLng(52.450439, -1.729660),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map, 'click', function(e) {
  console.log(e.latLng.toUrlValue(6));
})

var data = [{
  profileImage: "https://vignette.wikia.nocookie.net/steven-universe/images/9/9c/Yoshi_avatar.jpg/revision/latest?cb=20160203213032",
  pos: [37.77085, -122.41356],
}, {
  profileImage: "https://vignette.wikia.nocookie.net/steven-universe/images/9/9c/Yoshi_avatar.jpg/revision/latest?cb=20160203213032",
  pos: [37.77220, -122.41555],
}]



var orig = new CustomMarker(new google.maps.LatLng(d_lat, d_lng), map, data[0].profileImage)
var dest = new CustomMarker(new google.maps.LatLng(s_lat, s_lng), map, data[1].profileImage)

var bounds = new google.maps.LatLngBounds();
bounds.extend(start);
bounds.extend(finish);
map.fitBounds(bounds);
#map {
  height: 90%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.customMarker {
  position: absolute;
  cursor: pointer;
  background: #424242;
  width: 100px;
  height: 100px;
  /* -width/2 */
  margin-left: -50px;
  /* -height + arrow */
  margin-top: -110px;
  border-radius: 10px;
  padding: 0px;
}

.customMarker:after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 40px;
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: #424242 transparent;
  display: block;
  width: 0;
}

.customMarker img {
  width: 90px;
  height: 90px;
  margin: 5px;
  border-radius: 10px;
}

.gm-style-mtc {
  display: none;
}

.gm-style>div:nth-child(10) {
  display: none;
}
<input id="my_lat" value="52.441334" />
<input id="my_lng" value="-1.654737" />
<button class="btn btn-lg btn-primary btn-block" onclick="getroute()">show route</button>
<button class="btn btn-lg btn-primary btn-block" onclick="changeOrigin()">change origin</button>

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
...