Ionic 如何使用Angular 显示Map上的真实的地址

jchrr9hc 于 2022-12-09 发布在 Ionic

关注(0)|答案(1)|浏览(142)

我有一个在Map上显示标记的功能。我想在Map上显示我的办公室地址而不是标记。我该怎么做呢？

updateRideLocation(rl: RideLocation) {
    let centerRide = new google.maps.LatLng(Number(rl.current_latitude), Number(rl.current_longitude));
    if (this.markerRide) {
      this.markerRide.setPosition(centerRide);
    } else {
      this.markerRide = new google.maps.Marker({
        position: centerRide,
        map: this.maps.map,
        title: 'Ride is here!',
        icon: 'assets/imgs/map_car_mini.png'
      });
    }
  
  }

ionic-framework

来源：https://stackoverflow.com/questions/72791360/how-can-i-display-a-real-address-on-map-using-angular

1条答案

按热度按时间

pdkcd3nj1#

要使用地址在Map上绘制点，可以使用地理编码服务。文档位于：
https://developers.google.com/maps/documentation/javascript/geocoding
下面是一个示例方法，您可以针对特定场景进行调整：

var geocoder;
var map;

  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var mapOptions = {
      zoom: 8,
      center: latlng
    }
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
  }

function codeAddress() {
    var address = document.getElementById('address').value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == 'OK') {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

<body onload="initialize()">
 <div id="map" style="width: 320px; height: 480px;"></div>
  <div>
    <input id="address" type="textbox" value="Sydney, NSW">
    <input type="button" value="Encode" onclick="codeAddress()">
  </div>
</body>

赞(0）回复(0）举报 2022-12-09

我来回答

Ionic 如何使用Angular 显示Map上的真实的地址

1条答案

相关问题

热门标签

最新问答