javascript - 谷歌地图地点变更

标签 javascript jquery google-maps

我希望谷歌地图地点更改为第一个选定的国家/地区，下一个选定的城市相同的国家/地区(上一个国家/地区)，最后输入地区名称。我该怎么办？

//////// Loading Google Map //////
$(function() {
    var latitude = $('input[name="latitude"]').val();
    var longitude = $('input[name="longitude"]').val();
    var lat = (latitude ? latitude : 38.341656192795924),
        lng = (longitude ? longitude : -122.68604278564453),
        latlng = new google.maps.LatLng(lat, lng),
        image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';

    var mapOptions = {
        center: new google.maps.LatLng(lat, lng),
        zoom: (latitude ? 16 : 7),
        panControl: false,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE
        },
        mapTypeControl: false,
        streetViewControl: false,
        overviewMapControl: true,
        rotateControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: image,
        draggable: true,
        animation: google.maps.Animation.DROP
    });

    var input = document.getElementById('searchTextField');
    var autocomplete = new google.maps.places.Autocomplete(input, {
        types: ["geocode"]
    });

    autocomplete.bindTo('bounds', map);
    var infowindow = new google.maps.InfoWindow();

    google.maps.event.addListener(autocomplete, 'place_changed', function(event) {
        infowindow.close();
        var place = autocomplete.getPlace();
        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);
        }

        moveMarker(place.name, place.geometry.location);
        $('.MapLat').val(place.geometry.location.lat());
        $('.MapLon').val(place.geometry.location.lng());
    });
    google.maps.event.addListener(marker, 'dragend', function(event) {
        $('.MapLat').val(event.latLng.lat());
        $('.MapLon').val(event.latLng.lng());
        $("#searchTextField").val('');
    });
    google.maps.event.addListener(map, 'click', function(event) {
        $('.MapLat').val(event.latLng.lat());
        $('.MapLon').val(event.latLng.lng());
        infowindow.close();
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({
            "latLng": event.latLng
        }, function(results, status) {
            console.log(results, status);
            if (status == google.maps.GeocoderStatus.OK) {
                console.log(results);
                var lat = results[0].geometry.location.lat(),
                    lng = results[0].geometry.location.lng(),
                    placeName = results[0].address_components[0].long_name,
                    latlng = new google.maps.LatLng(lat, lng);

                moveMarker(placeName, latlng);
                $("#searchTextField").val(results[0].formatted_address);
            }
        });
    });

    function moveMarker(placeName, latlng) {
        marker.setIcon(image);
        marker.setPosition(latlng);
        infowindow.setContent(placeName);
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?libraries=places&region=uk&language=en&sensor=true"></script>

<form>
    Country:
    <select class="Country">
        <option value="" selected="selected"></option>
        <option value="United States">United States</option>
        <!--<option value="Canada">Canada</option>-->
        <!-- OR etc... -->
    </select>
    Cities:
    <select class="Cities">
        <option value="" selected="selected"></option>
        <option value="New York">New York</option>
        <!--<option value="Los Angeles">Los Angeles</option>-->
        <!--<option value="Chicago">Chicago</option>-->
        <!-- OR etc... -->
    </select>
    District:
    <input type="text" id=SearchDistrict">
</form>
<p>
<div id="map_canvas" style="height: 400px;width: 500px;"></div>

演示: http://jsfiddle.net/qze4L0aq/

例如:(以下使用 Photoshop 的示例只是为了澄清。)
第一:我选择了国家美国谷歌地图地点更改如下: enter image description here
第二:我选择了城市纽约谷歌地图地点更改如下: enter image description here
第三:我选择了区Flatiron谷歌地图地点更改为: enter image description here

最佳答案

使用谷歌地图geocoder搜索地点。

我为选择和输入添加了更改事件处理程序，并使用地理编码器搜索了位置。当然，它必须完善，但这是一个起点。

//////// Loading Google Map //////
$(function() {
    var latitude = $('input[name="latitude"]').val();
    var longitude = $('input[name="longitude"]').val();
    var lat = (latitude ? latitude : 38.341656192795924),
        lng = (longitude ? longitude : -122.68604278564453),
        latlng = new google.maps.LatLng(lat, lng),
        image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';

    var mapOptions = {
        center: new google.maps.LatLng(lat, lng),
        zoom: (latitude ? 16 : 7),
        panControl: false,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE
        },
        mapTypeControl: false,
        streetViewControl: false,
        overviewMapControl: true,
        rotateControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: image,
        draggable: true,
        animation: google.maps.Animation.DROP
    });

    var input = document.getElementById('searchTextField');
    var autocomplete = new google.maps.places.Autocomplete(input, {
        types: ["geocode"]
    });

    autocomplete.bindTo('bounds', map);
    var infowindow = new google.maps.InfoWindow();

    google.maps.event.addListener(autocomplete, 'place_changed', function(event) {
        infowindow.close();
        var place = autocomplete.getPlace();
        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);
        }

        moveMarker(place.name, place.geometry.location);
        $('.MapLat').val(place.geometry.location.lat());
        $('.MapLon').val(place.geometry.location.lng());
    });
    google.maps.event.addListener(marker, 'dragend', function(event) {
        $('.MapLat').val(event.latLng.lat());
        $('.MapLon').val(event.latLng.lng());
        $("#searchTextField").val('');
    });
    google.maps.event.addListener(map, 'click', function(event) {
        $('.MapLat').val(event.latLng.lat());
        $('.MapLon').val(event.latLng.lng());
        infowindow.close();
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({
            "latLng": event.latLng
        }, function(results, status) {
            console.log(results, status);
            if (status == google.maps.GeocoderStatus.OK) {
                console.log(results);
                var lat = results[0].geometry.location.lat(),
                    lng = results[0].geometry.location.lng(),
                    placeName = results[0].address_components[0].long_name,
                    latlng = new google.maps.LatLng(lat, lng);

                moveMarker(placeName, latlng);
                $("#searchTextField").val(results[0].formatted_address);
            }
        });
    });

    function moveMarker(placeName, latlng) {
        marker.setIcon(image);
        marker.setPosition(latlng);
        infowindow.setContent(placeName);
    }
  
  $('select,input').change(function() {
    var searchString = [$('select.Country').val(), $('select.Cities').val(), $('input#SearchDistrict').val()].join(', ');
alert(searchString);
    search(searchString);

  });

  var geocoder = new google.maps.Geocoder();

  function search(address) {
    geocoder.geocode({
      'address': address
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.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);
      }
    });
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?libraries=places&region=uk&language=en&sensor=true"></script>

<form>
    Country:
    <select class="Country">
        <option value="" selected="selected"></option>
        <option value="United States">United States</option>
        <!--<option value="Canada">Canada</option>-->
        <!-- OR etc... -->
    </select>
    Cities:
    <select class="Cities">
        <option value="" selected="selected"></option>
        <option value="New York">New York</option>
        <!--<option value="Los Angeles">Los Angeles</option>-->
        <!--<option value="Chicago">Chicago</option>-->
        <!-- OR etc... -->
    </select>
    District:
    <input type="text" id="SearchDistrict"/>
</form>
<p>
<div id="map_canvas" style="height: 400px;width: 500px;"></div>

关于javascript - 谷歌地图地点变更，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29734119/

上一篇：javascript - 使用 javascript 或 html5 将参数传递给 url

下一篇：javascript - 文件上传缺少路径属性

相关文章：

android - 空指针异常 mapview.onResume

javascript - 为打印媒体准备自定义谷歌地图的调整大小/定位问题

javascript - IE 7 中的 Javascript Date 函数出现问题，返回 NaN

javascript - AngularJS Ui-grid DataTables，如何避免多次重复

javascript - 如何处理按钮的onclick事件？

javascript - 复选框不会选中，但每个复选框都在注册第一次点击并将数据发送到服务器

javascript - 如何将 jQuery 插件附加到动态生成的元素

javascript - $().bind 在没有准备好文档的情况下无法工作

java - 如何在没有 map 的情况下通过搜索获取​​地址列表？

javascript - 循环遍历 div 以随机顺序添加一个类

©2024 IT工具网  联系我们