如何使用Google在多边形顶部添加标记？
如何使用Google在多边形顶部添加标记？
提问于 2018-11-29 13:41:22
我正在使用Google API，我定义了一个多边形并将其附加到地图上：
const region = new google.maps.Polygon({
map: map,
paths: [
{ lat: 40.5577151228437, lng: -74.15980859374997 },
{ lat: 40.599436503265856, lng: -74.27516503906247 },
{ lat: 40.67030312529891, lng: -74.25319238281247 },
{ lat: 40.72548139969253, lng: -74.26079167357881 },
],
});我有一个单击处理程序，当用户单击时，它会在上面添加一个标记：
google.maps.event.addListener(map, 'click', function (e) {
const marker = new google.maps.Marker({
map: map,
position: e.latLng,
});
});当我单击多边形的外部的区域时，我看到了标记，但是当我单击多边形中的时，没有看到标记。
我试过对每个zIndex进行硬编码，但都没有成功。有什么想法吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-11-29 14:29:18
有两种选择：
- 将单击侦听器添加到多边形
google.maps.event.addListener(region, 'click', function (e) {
const marker = new google.maps.Marker({
map: map,
position: e.latLng,
});
});
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
const region = new google.maps.Polygon({
map: map,
paths: [
{ lat: 40.5577151228437, lng: -74.15980859374997 },
{ lat: 40.599436503265856, lng: -74.27516503906247 },
{ lat: 40.67030312529891, lng: -74.25319238281247 },
{ lat: 40.72548139969253, lng: -74.26079167357881 },
],
});
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < region.getPath().getLength(); i++) {
bounds.extend(region.getPath().getAt(i));
}
map.fitBounds(bounds);
function addMarker(e) {
const marker = new google.maps.Marker({
map: map,
position: e.latLng,
});
}
google.maps.event.addListener(map, 'click', addMarker);
google.maps.event.addListener(region, 'click', addMarker);
}
google.maps.event.addDomListener(window, "load", initialize);html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
- 使多边形不捕获点击(可点击:假)；
const region = new google.maps.Polygon({
map: map,
clickable: false,
paths: [
{ lat: 40.5577151228437, long: -74.15980859374997 },
{ lat: 40.599436503265856, long: -74.27516503906247 },
{ lat: 40.67030312529891, long: -74.25319238281247 },
{ lat: 40.72548139969253, long: -74.26079167357881 },
],
}
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
const region = new google.maps.Polygon({
map: map,
clickable: false,
paths: [
{ lat: 40.5577151228437, lng: -74.15980859374997 },
{ lat: 40.599436503265856, lng: -74.27516503906247 },
{ lat: 40.67030312529891, lng: -74.25319238281247 },
{ lat: 40.72548139969253, lng: -74.26079167357881 },
],
});
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < region.getPath().getLength(); i++) {
bounds.extend(region.getPath().getAt(i));
}
map.fitBounds(bounds);
google.maps.event.addListener(map, 'click', function(e) {
const marker = new google.maps.Marker({
map: map,
position: e.latLng,
});
});
}
google.maps.event.addDomListener(window, "load", initialize);html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53548026
复制相关文章
相似问题
允许用户使用密钥对SSH进入EC2 Linux实例
使用SSH密钥创建用户，不使用密码
如何通过ssh连接amazon linux
在Linux中与Amazon EC2的SSH连接
尝试通过azure门户使用ssh密钥服务为Azure linux vm中的现有用户更新SSH密钥
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
