搜索 Google 个没有地点的地图框
Search Google Maps Box without Places
如果我订阅了 Google 地图 API,但没有订阅 Google 地点 API,是否可以找到 位置点 来自 搜索词?
类似于 this CODEPEN 的内容(使用位置)
(function() {
var marker;
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var input = document.getElementById('search');
var searchBox = new google.maps.places.SearchBox(input);
google.maps.event.addListener(searchBox, 'places_changed', updateMap);
function updateMap() {
var places = searchBox.getPlaces();
var place = places[0];
var radius = 1000000;
if (marker) { marker.setMap(null); }
marker = new google.maps.Marker({
map: map, title: place.name,
position: place.geometry.location
});
var circle = new google.maps.Circle({
center: marker.position, radius: radius
});
map.fitBounds(circle.getBounds());
}
})();
<input id="search" type="text" placeholder="Search Here">
<h2/>
<div id="map"></div>
你可以利用 Geocoding Service 来达到这个目的:
The Google Maps API provides a geocoder class for geocoding and
reverse geocoding dynamically from user input.
例子
function initMap() {
var marker;
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var btnSearch = document.getElementById('btnSearch');
addEvent(btnSearch, 'click', function () {
var input = document.getElementById('search');
updateMap(map, input.value);
});
}
function updateMap(map, address) {
var geocoder = new google.maps.Geocoder();
if (geocoder) {
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//console.log(results[0].geometry.location);
var result = results[0];
var radius = 1000000;
var marker = new google.maps.Marker({
map: map,
title: result.formatted_address,
position: result.geometry.location
});
var circle = new google.maps.Circle({
center: marker.position,
radius: radius
});
map.fitBounds(circle.getBounds());
}
else {
console.log("Geocoding failed: " + status);
}
});
}
}
function addEvent(element, evnt, funct) {
if (element.attachEvent)
return element.attachEvent('on' + evnt, funct);
else
return element.addEventListener(evnt, funct, false);
}
#map{
width: 640px;
height: 480px;
}
<input id="search" type="text" placeholder="Search Here">
<button id="btnSearch">Search</button>
<h2 />
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
如果我订阅了 Google 地图 API,但没有订阅 Google 地点 API,是否可以找到 位置点 来自 搜索词?
类似于 this CODEPEN 的内容(使用位置)
(function() {
var marker;
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var input = document.getElementById('search');
var searchBox = new google.maps.places.SearchBox(input);
google.maps.event.addListener(searchBox, 'places_changed', updateMap);
function updateMap() {
var places = searchBox.getPlaces();
var place = places[0];
var radius = 1000000;
if (marker) { marker.setMap(null); }
marker = new google.maps.Marker({
map: map, title: place.name,
position: place.geometry.location
});
var circle = new google.maps.Circle({
center: marker.position, radius: radius
});
map.fitBounds(circle.getBounds());
}
})();
<input id="search" type="text" placeholder="Search Here">
<h2/>
<div id="map"></div>
你可以利用 Geocoding Service 来达到这个目的:
The Google Maps API provides a geocoder class for geocoding and reverse geocoding dynamically from user input.
例子
function initMap() {
var marker;
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var btnSearch = document.getElementById('btnSearch');
addEvent(btnSearch, 'click', function () {
var input = document.getElementById('search');
updateMap(map, input.value);
});
}
function updateMap(map, address) {
var geocoder = new google.maps.Geocoder();
if (geocoder) {
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//console.log(results[0].geometry.location);
var result = results[0];
var radius = 1000000;
var marker = new google.maps.Marker({
map: map,
title: result.formatted_address,
position: result.geometry.location
});
var circle = new google.maps.Circle({
center: marker.position,
radius: radius
});
map.fitBounds(circle.getBounds());
}
else {
console.log("Geocoding failed: " + status);
}
});
}
}
function addEvent(element, evnt, funct) {
if (element.attachEvent)
return element.attachEvent('on' + evnt, funct);
else
return element.addEventListener(evnt, funct, false);
}
#map{
width: 640px;
height: 480px;
}
<input id="search" type="text" placeholder="Search Here">
<button id="btnSearch">Search</button>
<h2 />
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>