【问题标题】:Using GeoComplete Without Marker使用不带标记的 GeoComplete
【发布时间】:2016-06-23 01:01:16
【问题描述】:

我正在使用 this plugin 来自动完成位置输入字段。

到目前为止我所做的是-

$(function()
{
	$("#find_product_location").geocomplete(
	{
		map			: "#product_location",
		mapOptions	:
		{
			mapTypeId : 'roadmap',		//roadmap, satellite,hybrid, terrain,
			scrollwheel	: true,
			zoom: 10,
			center : new google.maps.LatLng(37.42152681633113, -119.27327880000001),
		},
		markerOptions:
		{
			draggable: true
		},
	})
		.bind("geocode:result", function(event, result)
		{
			console.log('Success');
			//console.log(result);
		})
		.bind("geocode:error", function(event, status)
		{
			console.log('Error');
			//console.log(status);
		})
		.bind("geocode:multiple", function(event, results)
		{
			console.log('Multiple');
			//console.log(results);
		});
});
#product_location
{ 
	width: 100%; 
	height: 400px;
}
<input id="find_product_location" type="text" placeholder="Type Your Address"/>
<input id="find" type="button" value="find" />

<div id="product_location"></div>

<script src="http://maps.googleapis.com/maps/api/js?sensor=true&amp;libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/geocomplete/1.7.0/jquery.geocomplete.min.js"></script>

But the problem is, when a location is selected, there is a marker created and the marker is showed in the map.

我的要求是我不要这里的标记。

我只想拥有其他功能(自动缩放设置、更改地图中的位置等)。

有人可以帮忙吗?

【问题讨论】:

    标签: javascript jquery google-maps google-maps-api-3 geocomplete


    【解决方案1】:

    您可以使用官方的 Google Maps API - Place Autocomplete 自动完成功能是 Google Maps JavaScript API 中 Places 库的一项功能。您可以使用自动完成功能为您的应用程序提供 Google 地图搜索字段的预输入搜索行为。当用户开始输入地址时,自动完成将填写其余部分。

    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -33.8688, lng: 151.2195},
        zoom: 13
      });
      var input = /** @type {!HTMLInputElement} */(
          document.getElementById('pac-input'));
    
      var types = document.getElementById('type-selector');
      map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
      map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);
    
      var autocomplete = new google.maps.places.Autocomplete(input);
      autocomplete.bindTo('bounds', map);
    
    
        var address = '';
        if (place.address_components) {
          address = [
            (place.address_components[0] && place.address_components[0].short_name || ''),
            (place.address_components[1] && place.address_components[1].short_name || ''),
            (place.address_components[2] && place.address_components[2].short_name || '')
          ].join(' ');
        }
    
      });
    
      // Sets a listener on a radio button to change the filter type on Places
      // Autocomplete.
      function setupClickListener(id, types) {
        var radioButton = document.getElementById(id);
        radioButton.addEventListener('click', function() {
          autocomplete.setTypes(types);
        });
      }
    
      setupClickListener('changetype-all', []);
      setupClickListener('changetype-address', ['address']);
      setupClickListener('changetype-establishment', ['establishment']);
      setupClickListener('changetype-geocode', ['geocode']);
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-04-12
      • 2017-10-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多