通過地址設置位置或放置標記

Question

我爲客戶建立自定義表單。 他們希望能夠爲他們添加槽的表單設置位置。

我需要兩個選項來添加一個位置。 一個是通過在Google地圖上的搜索框中輸入地址，當我點擊時，輸入標記將被添加到地圖中。

另一種方式是通過鼠標移動標記，在這種情況下，地址需要通過標記的位置進行更新。

只有一個標記（一個地址）可以在地圖上。

任何很好的例子或建議？

感謝

Answer 1

我會給你你所描述的功能的工作樣本。但是，您將成爲以您自己的形式整合概念的人員。

一個是通過在Google地圖上的搜索框中輸入地址，當我點擊時，輸入標記將被添加到地圖中。 這是jsfiddle demo。 在searchBox.addListener('places_changed', function(e) {}監聽器中，我放置了一個函數來創建一個標記。無論何時由於用戶點擊預測地址而觸發該聽衆，標記將被放置在相同的位置。當你輸入特定的建築物名稱時，這不起作用。它必須是一個地址。

另一種方法是用鼠標移動標記，在這種情況下地址需要通過標記的位置來更新。

這是jsfiddle demo。 在本演示中，您首先將標記拖動到地圖上的任意位置。當拖動事件結束時，'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; 
}