google-maps - 当标记在具有 lat 和 lng 值的情况下拖动时获取位置标题
问题描述
我已经实现了带有自动完成位置的地图,当我将标记拖到另一个位置时,标记工作正常,它给了我 lat 和 lng 值,现在的问题是我想要拖动标记的那个地方的标题,记住我已经成功实现了 lat lng 值,但标题仍然要实现。
MapMarker: google.maps.Marker;
selectPlace(place) {
this.places = [];
let GMapMarker = new google.maps.Marker({
position: new google.maps.LatLng(0, 0),
map: this.map,
title: "Temp",
icon: 'https://chart.apis.google.com/chart?
chst=d_map_pin_letter&chld=%E2%80%A2%7C00FF00',
draggable: true,
visible: true
});
let location = {
lat: null,
lng: null,
name: place.name
};
let tempMap = this.map;
this.placesService.getDetails({ placeId: place.place_id }, (details) =>
{
try {
this.zone.run(() => {
console.log('zone executed')
location.name = details.name;
location.lat = details.geometry.location.lat();
location.lng = details.geometry.location.lng();
this.saveDisabled = false;
console.log("This is" + GMapMarker);
GMapMarker.setPosition(new google.maps.LatLng(location.lat,
location.lng));
GMapMarker.setVisible(true);
GMapMarker.setTitle(location.name)
this.map.controls.push(GMapMarker);
//tempMap.setCenter(new google.maps.LatLng(43, 76));
this.map.setCenter({ lat: location.lat, lng: location.lng
});
this.location = location;
//this.api.getLocation = this.location;
this.MapMarker = GMapMarker;
console.log(this.location);
});
} catch (error) {
console.log(error.message)
}
});
}
searchPlace() {
this.saveDisabled = true;
if (this.query.length > 0 && !this.searchDisabled) {
let config = {
types: ['geocode'],
input: this.query
}
this.autocompleteService.getPlacePredictions(config, (predictions,
status) => {
if (status == google.maps.places.PlacesServiceStatus.OK &&
predictions[0] != null) {
this.places = [];
predictions.forEach((prediction) => {
this.places.push(prediction);
});
}
});
} else {
this.places = [];
}
}
save() {
this.api.getLocation = {
name: this.MapMarker.getTitle(),
lat: this.MapMarker.getPosition().lat(),
lng: this.MapMarker.getPosition().lng()
};
this.viewCtrl.dismiss();//this.location
}
解决方案
使用谷歌反向地理编码:参考链接:https ://developers.google.com/maps/documentation/javascript/examples/geocoding-reverse
geocodeLatLng(geocoder, map, infowindow) {
console.log(this.location);
var input=this.location;
var latlng = {lat:this.MapMarker.getPosition().lat() , lng:
this.MapMarker.getPosition().lng()};
console.log(latlng);
geocoder.geocode({'location': latlng}, function(results, status) {
if (status === 'OK') {
if (results[0]) {
console.log(results[0]);
var x=(results[0].formatted_address);
console.log(x);
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}
推荐阅读
- odoo-11 - 在odoo模块中指定参数
- javascript - Javascript元素高度怪异
- javascript - SVG 路径点在纬度和经度,而不是 SVG 的一侧
- vba - 如何提高 VBA 代码的速度和效率
- html - 背景图像未显示在 div 中
- spring-cloud - Spring boot feign fallback 附加参数
- java - 当已经在底部并添加新项目时,将 recyclerView 保持在底部
- api - 您可以通过 SkyScanner 的 Travel API 跟踪个人购买吗?
- c++ - 如何在 C++ 中非破坏性地检查目录中的任何内容都不能被写入/删除
- .htaccess - 在启用 GoogleAMP 的页面中增加缓存“从 CDN 加载的 Javascript”?