如何使用containsLocation + searchBox Maps API？
How to use containsLocation + searchBox Maps API?
我有一个多边形，我想知道在搜索框中输入的地址是在多边形内部还是外部。我总是得到 'No' 作为答案，无论标记是在内部还是外部。
我认为问题是 containsLocation() 没有检测到多边形或类似的东西。但我已经做了很多改变，这是我最接近的方式。
js代码：
let map;
function initMap() {
const myLatLng = {
lat: 17.566220,
lng: -99.400292
};
const map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
zoom: 15,
fullscreenControl: true,
zoomControl: true,
streetViewControl: false,
mapTypeId: 'roadmap',
mapTypeControl: false
});
const areaCoords = [{
lat: 17.560037, //1
lng: -99.4107077
},
{
lat: 17.5597318, //2
lng: -99.4088448
},
{
lat: 17.5597312, //3
lng: -99.4088533
},
{
lat: 17.5596135, //4
lng: -99.404423
},
{
lat: 17.5589393, //5
lng: -99.4036844
},
{
lat: 17.5581569, //6
lng: -99.4025945
},
{
lat: 17.5576839, //7
lng: -99.4026235
},
{
lat: 17.5574645, //8
lng: -99.398004
},
{
lat: 17.5631744, //13
lng: -99.3961746
},
{
lat: 17.5636651, //14
lng: -99.3946825
},
{
lat: 17.5652166, //16
lng: -99.3936269
},
{
lat: 17.5675632, //17
lng: -99.3930563
},
{
lat: 17.5676036, //19
lng: -99.3924198
},
{
lat: 17.5693821, //20
lng: -99.3910463
},
{
lat: 17.572555, //22
lng: -99.3922026
},
{
lat: 17.5748519, //23
lng: -99.3915589
},
{
lat: 17.5754315, //24
lng: -99.3948688
},
{
lat: 17.5759028, //25
lng: -99.3964329
},
{
lat: 17.5652623, //26
lng: -99.4094539
},
];
const areaCover = new google.maps.Polygon({
paths: areaCoords,
strokeColor: "#E6943B",
strokeWeight: 1,
fillColor: "#E6943B",
fillOpacity: 0.35,
});
areaCover.setMap(map);
const input = document.getElementById("pac-input");
const searchBox = new google.maps.places.SearchBox(input);
map.addListener("bounds_changed", () => {
searchBox.setBounds(map.getBounds());
});
let markers = [];
searchBox.addListener("places_changed", () => {
const places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach((marker) => {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
const bounds = new google.maps.LatLngBounds();
places.forEach((place) => {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
const 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(25, 25),
};
// Create a marker for each place.
markers.push(
new google.maps.Marker({
map,
icon,
title: place.name,
position: place.geometry.location,
})
);
const coords = place.geometry.location.toUrlValue(6);
var point = new google.maps.LatLng(coords);
if (google.maps.geometry.poly.containsLocation(point, areaCover) == true) {
console.log(coords);
} else {
console.log('no');
}
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
我已经解决了。这就是我所做的。
let map;
function initMap() {
const myLatLng = {
lat: 17.566220,
lng: -99.400292
};
const map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
zoom: 15,
fullscreenControl: true,
zoomControl: true,
streetViewControl: false,
mapTypeId: 'roadmap',
mapTypeControl: false
});
const areaCoords = [{
lat: 17.560037, //1
lng: -99.4107077
},
{
lat: 17.5597318, //2
lng: -99.4088448
},
{
lat: 17.5597312, //3
lng: -99.4088533
},
{
lat: 17.5596135, //4
lng: -99.404423
},
{
lat: 17.5589393, //5
lng: -99.4036844
},
{
lat: 17.5581569, //6
lng: -99.4025945
},
{
lat: 17.5576839, //7
lng: -99.4026235
},
{
lat: 17.5574645, //8
lng: -99.398004
},
{
lat: 17.5631744, //13
lng: -99.3961746
},
{
lat: 17.5636651, //14
lng: -99.3946825
},
{
lat: 17.5652166, //16
lng: -99.3936269
},
{
lat: 17.5675632, //17
lng: -99.3930563
},
{
lat: 17.5676036, //19
lng: -99.3924198
},
{
lat: 17.5693821, //20
lng: -99.3910463
},
{
lat: 17.572555, //22
lng: -99.3922026
},
{
lat: 17.5748519, //23
lng: -99.3915589
},
{
lat: 17.5754315, //24
lng: -99.3948688
},
{
lat: 17.5759028, //25
lng: -99.3964329
},
{
lat: 17.5652623, //26
lng: -99.4094539
},
];
const areaCover = new google.maps.Polygon({
paths: areaCoords,
strokeColor: "#E6943B",
strokeWeight: 1,
fillColor: "#E6943B",
fillOpacity: 0.35,
});
areaCover.setMap(map);
const input = document.getElementById("pac-input");
const searchBox = new google.maps.places.SearchBox(input);
map.addListener("bounds_changed", () => {
searchBox.setBounds(map.getBounds());
});
let markers = [];
searchBox.addListener("places_changed", () => {
const places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach((marker) => {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
const bounds = new google.maps.LatLngBounds();
places.forEach((place) => {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
const 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(25, 25),
};
// Create a marker for each place.
markers.push(
new google.maps.Marker({
map,
icon,
title: place.name,
position: place.geometry.location,
})
);
if (google.maps.geometry.poly.containsLocation(place.geometry.location, areaCover) == true) {
console.log('yes');
} else {
console.log('no');
}
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
我有一个多边形，我想知道在搜索框中输入的地址是在多边形内部还是外部。我总是得到 'No' 作为答案，无论标记是在内部还是外部。
我认为问题是 containsLocation() 没有检测到多边形或类似的东西。但我已经做了很多改变，这是我最接近的方式。
js代码：
let map;
function initMap() {
const myLatLng = {
lat: 17.566220,
lng: -99.400292
};
const map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
zoom: 15,
fullscreenControl: true,
zoomControl: true,
streetViewControl: false,
mapTypeId: 'roadmap',
mapTypeControl: false
});
const areaCoords = [{
lat: 17.560037, //1
lng: -99.4107077
},
{
lat: 17.5597318, //2
lng: -99.4088448
},
{
lat: 17.5597312, //3
lng: -99.4088533
},
{
lat: 17.5596135, //4
lng: -99.404423
},
{
lat: 17.5589393, //5
lng: -99.4036844
},
{
lat: 17.5581569, //6
lng: -99.4025945
},
{
lat: 17.5576839, //7
lng: -99.4026235
},
{
lat: 17.5574645, //8
lng: -99.398004
},
{
lat: 17.5631744, //13
lng: -99.3961746
},
{
lat: 17.5636651, //14
lng: -99.3946825
},
{
lat: 17.5652166, //16
lng: -99.3936269
},
{
lat: 17.5675632, //17
lng: -99.3930563
},
{
lat: 17.5676036, //19
lng: -99.3924198
},
{
lat: 17.5693821, //20
lng: -99.3910463
},
{
lat: 17.572555, //22
lng: -99.3922026
},
{
lat: 17.5748519, //23
lng: -99.3915589
},
{
lat: 17.5754315, //24
lng: -99.3948688
},
{
lat: 17.5759028, //25
lng: -99.3964329
},
{
lat: 17.5652623, //26
lng: -99.4094539
},
];
const areaCover = new google.maps.Polygon({
paths: areaCoords,
strokeColor: "#E6943B",
strokeWeight: 1,
fillColor: "#E6943B",
fillOpacity: 0.35,
});
areaCover.setMap(map);
const input = document.getElementById("pac-input");
const searchBox = new google.maps.places.SearchBox(input);
map.addListener("bounds_changed", () => {
searchBox.setBounds(map.getBounds());
});
let markers = [];
searchBox.addListener("places_changed", () => {
const places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach((marker) => {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
const bounds = new google.maps.LatLngBounds();
places.forEach((place) => {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
const 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(25, 25),
};
// Create a marker for each place.
markers.push(
new google.maps.Marker({
map,
icon,
title: place.name,
position: place.geometry.location,
})
);
const coords = place.geometry.location.toUrlValue(6);
var point = new google.maps.LatLng(coords);
if (google.maps.geometry.poly.containsLocation(point, areaCover) == true) {
console.log(coords);
} else {
console.log('no');
}
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
我已经解决了。这就是我所做的。
let map;
function initMap() {
const myLatLng = {
lat: 17.566220,
lng: -99.400292
};
const map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
zoom: 15,
fullscreenControl: true,
zoomControl: true,
streetViewControl: false,
mapTypeId: 'roadmap',
mapTypeControl: false
});
const areaCoords = [{
lat: 17.560037, //1
lng: -99.4107077
},
{
lat: 17.5597318, //2
lng: -99.4088448
},
{
lat: 17.5597312, //3
lng: -99.4088533
},
{
lat: 17.5596135, //4
lng: -99.404423
},
{
lat: 17.5589393, //5
lng: -99.4036844
},
{
lat: 17.5581569, //6
lng: -99.4025945
},
{
lat: 17.5576839, //7
lng: -99.4026235
},
{
lat: 17.5574645, //8
lng: -99.398004
},
{
lat: 17.5631744, //13
lng: -99.3961746
},
{
lat: 17.5636651, //14
lng: -99.3946825
},
{
lat: 17.5652166, //16
lng: -99.3936269
},
{
lat: 17.5675632, //17
lng: -99.3930563
},
{
lat: 17.5676036, //19
lng: -99.3924198
},
{
lat: 17.5693821, //20
lng: -99.3910463
},
{
lat: 17.572555, //22
lng: -99.3922026
},
{
lat: 17.5748519, //23
lng: -99.3915589
},
{
lat: 17.5754315, //24
lng: -99.3948688
},
{
lat: 17.5759028, //25
lng: -99.3964329
},
{
lat: 17.5652623, //26
lng: -99.4094539
},
];
const areaCover = new google.maps.Polygon({
paths: areaCoords,
strokeColor: "#E6943B",
strokeWeight: 1,
fillColor: "#E6943B",
fillOpacity: 0.35,
});
areaCover.setMap(map);
const input = document.getElementById("pac-input");
const searchBox = new google.maps.places.SearchBox(input);
map.addListener("bounds_changed", () => {
searchBox.setBounds(map.getBounds());
});
let markers = [];
searchBox.addListener("places_changed", () => {
const places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach((marker) => {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
const bounds = new google.maps.LatLngBounds();
places.forEach((place) => {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
const 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(25, 25),
};
// Create a marker for each place.
markers.push(
new google.maps.Marker({
map,
icon,
title: place.name,
position: place.geometry.location,
})
);
if (google.maps.geometry.poly.containsLocation(place.geometry.location, areaCover) == true) {
console.log('yes');
} else {
console.log('no');
}
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}