Javascript 通过地址或放置标记设置位置

我正在为客户建立自定义表单。 他们希望能够为他们通过该表格添加的房屋设置位置

我需要两个选项来添加位置。 一种方法是在谷歌地图上的搜索框中输入地址，当我点击回车键时，就会将地址标记添加到地图中

另一种方法是用鼠标移动标记，在这种情况下，地址需要根据标记的位置进行更新

地图上只能有一个标记（一个地址）

有什么好的例子或建议吗

---

谢谢

我会给你一个你描述过的功能的工作示例。但是，你将是一个在你自己的形式中融入这个概念的人

一种方法是在谷歌地图上的搜索框中键入地址，当我点击回车键时，会将标记添加到地图中。 这是我的建议。 在

searchBox.addListener（'places_changed'，function（e）{}

listener中，我放置了一个函数来创建一个标记。每当此侦听器由于用户单击预测的地址而触发时，一个标记就会被放置在同一位置。当您键入特定的建筑名称时，这不起作用。它必须是一个地址

另一种方法是用鼠标移动标记，在这种情况下，地址需要根据标记的位置进行更新。

这是我的建议。 在本演示中，首先将标记拖动到地图上的任何位置。当拖动事件结束时，“

dragend

”，信息窗口将填充标记所在的当前地址

别忘了阅读更多相关内容。

JS代码：

function initAutocomplete() {
    var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 62, lng: 15},
    zoom: 5,
    mapTypeId: 'roadmap'
    });

    // Create the search box and link it to the UI element.
    var input = document.getElementById('pac-input');
    var searchBox = new google.maps.places.SearchBox(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

    // Bias the SearchBox results towards current map's viewport.
    map.addListener('bounds_changed', function() {
    searchBox.setBounds(map.getBounds());
    });

    // Create a marker for each place.
    marker = new google.maps.Marker({
    map: map,
    draggable: true,
    title: 'Starting location',
    position: {lat: 62, lng: 15}
    });

    google.maps.event.addListener(marker, 'dragend', function()
    {
    document.getElementById('inputHousesLongitude').value = marker.getPosition().lat();
    document.getElementById('inputHousesLatitude').value  = marker.getPosition().lng();
    geocodePosition(marker.getPosition());
    });

    // Listen for the event fired when the user selects a prediction and retrieve
    // more details for that place.
    searchBox.addListener('places_changed', function() {
    var places = searchBox.getPlaces();

    if (places.length == 0) {
    return;
    }

    // For each place, get the icon, name and location.
    var bounds = new google.maps.LatLngBounds();
    places.forEach(function(place) {
    if (!place.geometry) {
    console.log("Returned place contains no geometry");
    return;
    }
    var icon = {
    url: place.icon,
    size: new google.maps.Size(71, 71),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(17, 34),
    scaledSize: new google.maps.Size(10, 10)
    };

    document.getElementById('inputHousesLongitude').value = place.geometry.location.lat();
    document.getElementById('inputHousesLatitude').value  = place.geometry.location.lng();
    document.getElementById('inputHousesAddress').value  = place.name;

    marker.setPosition(place.geometry.location);

    if (place.geometry.viewport) {
    // Only geocodes have viewport.
    bounds.union(place.geometry.viewport);
    } else {
    bounds.extend(place.geometry.location);
    }
    });
    map.fitBounds(bounds);
    });
    }

function geocodePosition(pos)
{
    geocoder = new google.maps.Geocoder();
    geocoder.geocode
    ({
    latLng: pos
    },
    function(results, status)
    {
    if (status == google.maps.GeocoderStatus.OK)
    {
    document.getElementById('pac-input').value = results[0].formatted_address;
    document.getElementById('inputHousesAddress').value = results[0].formatted_address;
    }
    else
    {
    $("#mapErrorMsg").html('Cannot determine address at this location.'+status).show(100);
    }
    }
    );
    }

HTML:

---

这对于谷歌地图来说是一个非常简单和常见的任务，官方文档应该会提供你所需要的一切！谢谢你。我用不同的方式解决了它，但这个答案也很有用。我会发布我的解决方案。很高兴你找到了它。只需简单的向上投票即可：）将你的答案标记为已接受，以便社区知道这个问题已经解决：）

<div id="map"></div>

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#map {
    height: 400px;
}
.controls {
    margin-top: 10px;
    border: 1px solid transparent;
    border-radius: 2px 0 0 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 32px;
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#pac-input {
    background-color: #fff;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    margin-left: 12px;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 300px;
}

#pac-input:focus {
    border-color: #4d90fe;
}

.pac-container {
    font-family: Roboto;
}

#type-selector {
    color: #fff;
    background-color: #4d90fe;
    padding: 5px 11px 0px 11px;
}

#type-selector label {
    font-family: Roboto;
    font-size: 13px;
    font-weight: 300;
}
#target {
    width: 345px;
}