如何基于在基于angular8的地图上单击单击在地址字段中填写的地址来检测地图上的视图 [英] How to detect the view on map, based on address we have filled in the address field based on click of view on map using angular8

问题描述

我根据我在输入字段中输入的地址搜索了Google地图上的视图，但没有找到我完全匹配的地址，有人可以建议我如何在不使用任何插件的情况下实现该功能，而只需使用google文档.

i searched for fetching the view on google map based on the address i enter in input field, but no where i can find my exact match, can anyone suggest me how can this be implemented without using any plugins but by using only the google documentation.

这是我的演示:

演示

如果在这里键入地址并单击Enter，它必须显示给我，

Here if the type the address and click on enter, it must show me like this,

html:

 <div class="form-group">
                <label for="">Mailing Address1 <span class="text-danger">*</span></label>
                <a href="javascript:void(0);" class="float-right"><i class="fas fa-map-marker-alt"></i> View on Map</a>
                <input type="text" class="form-control" placeholder="Mailing Address1">
              </div>

我给的地址是:

mailing address 1: 7205 Vidalia Rd
city: Pass Christian
state:Mississippi
zip:39571

获取纬度和经度

this.geoAddress = "HoneyWell+null+Company+null+null+560076+null+null"
    var geocoder = new google.maps.Geocoder();

            geocoder.geocode( { 'address': this.geoAddress}, function(results, status) {

                if (status == google.maps.GeocoderStatus.OK) {
                    var latitude = results[0].geometry.location.lat();
                    var longitude = results[0].geometry.location.lng();
                }

推荐答案

我对您的代码进行了一些更改.

I did few changes to your code.

步骤1:要使用GoogleMaps api，您需要具有地图KEY(创建API密钥凭据)

Step 1: to use GoogleMaps api you need to have a maps KEY (Create API key credentials)

• 转到 Google Developers Console .
• 从侧面菜单转到APIs&服务->凭据->创建凭据-> API密钥(复制密钥)
• Go to the Google Developers Console.
• From Side Menu go to APIs & Services -> Crdentials -> Create Credentials -> API Key (Copy the key)

在代码中使用此键

s.src = "https://maps.googleapis.com/maps/api/js?key={ PASTE_KEY_HERE }&libraries=places&callback=initMap";

第2步:我们必须启用一些API

Step 2: We have to enable few APIs

• 转到API Manager
• 点击Overview
• 搜索以下API，然后点击启用按钮
  • 地理编码API
  • 地理位置API
  • Maps JavaScript API
  • Places API
  • Go to API Manager
  • Click on Overview
  • Search for below APIs and Click on Enable button
    • Geocoding API
    • Geolocation API
    • Maps JavaScript API
    • Places API

    这是工作中的 Stackbliz

    如果您在此处发布任何问题，请参见 Github 回购在github中.

    Here is the Github repo, if you have any issues post here in github.

    快乐编码:-)

    这篇关于如何基于在基于angular8的地图上单击单击在地址字段中填写的地址来检测地图上的视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！