我试图获取通知，如果我的标记进入地图内的任何多边形。但是，似乎找不到正确的方法，这是我目前的代码：
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="signin.js"> </script>
<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyAjp8cvAcEYCwzuCyTQORL3Z1iQPdQMg_8",
authDomain: "just-don-t.firebaseapp.com",
databaseURL: "https://just-don-t.firebaseio.com",
projectId: "just-don-t",
storageBucket: "just-don-t.appspot.com",
messagingSenderId: "925350346315"
};
firebase.initializeApp(config);
</script>
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.19.0.min.js"> </script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAjp8cvAcEYCwzuCyTQORL3Z1iQPdQMg_8&libraries=drawing&callback=initMap" async defer> </script>
<header><h1><center><b>WELCOME TO THE JUST DON'T APP</b> </center></h1></header>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style >
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
body {font-family: Arial, Helvetica, sans-serif;}
[...] Here is just visual parts of the app such as buttons and such, it should not affect the rest of the app [...]
<div id="map"></div>
<script>
var lineCoords = [];
var pubnub = new PubNub({
publishKey: 'pub-c-22289088-791b-4f24-900a-84dc41c860bf',
subscribeKey: 'sub-c-e781e56c-23f5-11e8-a8f3-22fca5d72012'
});
window.lat = 55.845890;
window.lng = -4.423741;
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(updatePosition);
}
return null;
};
function updatePosition(position) {
if (position) {
window.lat = position.coords.latitude;
window.lng = position.coords.longitude;
}
}
setInterval(function(){updatePosition(getLocation());}, 10000);
function currentLocation() {
return {lat:window.lat, lng:window.lng};
};
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: lat, lng: lng},
zoom: 17
});
var infoWindow = new google.maps.InfoWindow({
map: map
});
var pleasantAreaCoords = [
{lat: 55.84478883022466, lng:-4.423067882047013},
{lat: 55.84485326696093, lng: -4.422505549698727},
{lat: 55.84538931148452, lng: -4.4228536960804},
{lat: 55.84525930830721, lng: -4.423344253807979},
{lat: 55.84478883022466, lng: -4.423067882047013}
];
var pleasant = new google.maps.Polygon({
paths: pleasantAreaCoords,
strokeColor: '#E9F52C',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#E9F52C',
fillOpacity: 0.35
});
pleasant.setMap(map);
var unsafeCoords = [
{lat: 55.84582542929267, lng:-4.423879981040955 },
{lat: 55.845723031335204, lng: -4.424362778663635},
{lat: 55.84565677368958, lng:-4.424352049827576},
{lat: 55.845723031335204, lng:-4.4238585233688354},
{lat: 55.8458284409932, lng: -4.423881322145462}
]
var unsafe_area = new google.maps.Polygon({
paths: unsafeCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
unsafe_area.setMap(map);
var unpleasantAreacoords = [
{lat: 55.84580133567989,lng:-4.424523711204529},
{lat: 55.84583747609345,lng: -4.424319863319397},
{lat: 55.84653618415134,lng: -4.424673914909363},
{lat: 55.8465000443874,lng: -4.425221085548401},
{lat: 55.84580160878137,lng: -4.4245168063742994}
];
var unpleasant = new google.maps.Polygon({
paths: unpleasantAreacoords,
strokeColor: '#F5942C',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#F5942C',
fillOpacity: 0.35
});
unpleasant.setMap(map);
var commercialZoneCoords = [
{lat: 55.846999974806145,lng: -4.423676133155823},
{lat: 55.84714453180107,lng: -4.421852231025696},
{lat: 55.84583747609345,lng: -4.421680569648743},
{lat: 55.84553630495364,lng: -4.423472285270691}
];
var commercialZone = new google.maps.Polygon({
paths: commercialZoneCoords,
strokeColor: '#3CB2F1',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#3CB2F1',
fillOpacity: 0.35
});
commercialZone.setMap(map);
var mainStreetCoords =[
{lat: 55.84504840275506,lng: -4.426873326301575},
{lat: 55.84528331939289,lng: -4.4235581159591675},
{lat: 55.84553028150705,lng: -4.423697590827942},
{lat: 55.8452652489327,lng: -4.426959156990051}
];
var mainStreet = new google.maps.Polygon({ paths: mainStreetCoords,
strokeColor: '#E63CF1',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#E63CF1',
fillOpacity: 0.35
});
mainStreet.setMap(map);
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var initialize = function() {
map = new google.maps.Map(document.getElementById('map-canvas'), {center:{lat:lat,lng:lng},zoom:12});
mark = new google.maps.Marker({position:{lat:lat, lng:lng}, map:map});
};
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
window.initialize = initialize;
var Paisley = pos;
var mark = new google.maps.Marker({
position:{lat:lat, lng:lng},
map:map,
});
var redraw = function(payload) {
lat = payload.message.lat;
lng = payload.message.lng;
mark.setPosition({lat:lat, lng:lng, alt:0});
lineCoords.push(new google.maps.LatLng(lat, lng));
var lineCoordinatesPath = new google.maps.Polyline({
path: lineCoords,
geodesic: true,
strokeColor: '#2E10FF'
});
lineCoordinatesPath.setMap(map);
};
point = position;
var pnChannel = "map-channel";
var pubnub = new PubNub({
publishKey: 'pub-c-22289088-791b-4f24-900a-84dc41c860bf',
subscribeKey: 'sub-c-e781e56c-23f5-11e8-a8f3-22fca5d72012'
});
pubnub.subscribe({channels: [pnChannel]});
pubnub.addListener({message:redraw});
map.setCenter({lat:lat, lng:lng, alt:0});
setInterval(function() {
pubnub.publish({channel:pnChannel, message:currentLocation()});
}, 100);
}, function () {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
}
</script>
</body>
</html>
以下是我试图实现的代码，用于检测并通知标记是否在多边形内部（对于此示例，我正在使用
point = Marker
if(google.maps.containsLocation(point, mainStreetCoords) == true) {
alert("You are at the Main street");
}
如果我上班了会更新这个，但如果有人能解释我如何让它工作，我将不胜感激。
答案 0 :(得分：0)
// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src=".../maps/api/js?key=YOUR_API_KEY&libraries=geometry">
google.maps.geometry.poly.containsLocation(e.latLng, bermudaTriangle)
第一个变量就像这个var point = new google.maps.LatLng(x, y);
但不是标记
所以我尝试了你的代码（但我的google map api;））
添加点击事件并进行测试，它可以正常工作
这里的工作代码
commercialZone.addListener('click', function(e) {
var marker = new google.maps.Marker({
position: e.latLng,
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: "red",
fillOpacity: .2,
strokeColor: 'white',
strokeWeight: .5,
scale: 10
}
});
if(google.maps.geometry.poly.containsLocation(marker.position, commercialZone) == true) {
alert("You are at the Main street");
}
});
如果您点击commercialZone（蓝色），将触发警报
你可以根据这个
做你想做的事希望这会有所帮助