作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我试图在用户双击图像的特定部分时显示突出显示的圆圈。例如,如果图像是城市 map ,他们双击坐标:(X, Y),我希望突出显示的圆的中心位于 (X, Y) 并且半径会因他们所选择的元素而异点击。
这是我目前所拥有的:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function showMap(){
var mapOptions = {
zoom: 19,
center: new google.maps.LatLng(x, y),//let z, y be some coord
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDoubleClickZoom: true,
disableDefaultUI: true,
zoomControl: false,
draggable: false,
scrollwheel: false
}
map = new google.maps.Map(document.getElementById("myMap"),
mapOptions);
google.maps.event.addListener(map, 'dblclick', doubleClicked);
}
function doubleClicked(e){//highlight the area with a circle
//alert("lat: " + e.latLng.lat() + "\nlong: " + e.latLng.lng());
}
</script>
HTML
<div id="myMap" ></div>
CSS
#myMap {
margin-left: auto;
margin-right: auto;
width: 1200px;
height: 800px
}
@Aamir Sarwar 帮助下的解决方案:
var circle = new google.maps.Circle({
strokeColor: '#FFFFFF',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: {lat: X, lng: Y}
radius: 10
});
最佳答案
检查以下来自此链接的示例副本...希望它可以帮助您 https://developers.google.com/maps/documentation/javascript/examples/rectangle-simple?hl=en
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Rectangles</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
<script>
// This example adds a red rectangle to a map.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {lat: 33.678, lng: -116.243},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: {
north: 33.685,
south: 33.671,
east: -116.234,
west: -116.251
}
});
}
</script>
</head>
<body>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap"></script>
</body>
</html>
关于javascript - 双击时如何创建突出显示图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33752929/
有没有一种方法可以“标记”对象的属性,使它们在反射中“突出”? 例如: class A { int aa, b; string s1, s2; public int AA
我是一名优秀的程序员,十分优秀!