Question

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

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

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

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

任何好的例子或建议？

由于

Answer 1

我将为您提供您所描述的功能的工作示例。但是，您将成为以自己的形式融入概念的人。

一种方法是在Google地图上的搜索框中键入地址，当我点击输入标记时，会将其添加到地图中。 这是jsfiddle demo。在searchBox.addListener('places_changed', function(e) {}侦听器中，我放置了一个函数来创建标记。每当该监听器由于用户点击预测地址而触发时，标记就被放置在该相同位置。键入特定的建筑物名称时，这不起作用。它必须是一个地址。

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

这是jsfiddle demo。在本演示中，您首先将Marker拖动到地图上的任何位置。当拖动事件结束时，“dragend”，Infowindow将填充标记所在的当前地址。

不要忘记在Javascript Map samples上阅读更多内容。

Answer 2

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>

CSS：

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;
}

按地址设置位置或放置标记

2 个答案: