如何在雙擊時創建圖像的突出顯示？

我想在用戶雙擊圖像的某個部分時顯示突出顯示的圓圈。例如，如果圖像是城市的地圖，並且他們雙擊座標：（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薩瓦爾幫助：

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 
      });

來源

2015-11-17 swag antiswag

哪裏是將要點擊的圖像當前的代碼？ – Eddie

其地圖或我的地圖 –

所以基本上圓的半徑是點擊和雙擊，對吧？ – Eddie

檢查下面的例子從這個鏈接複製...希望它可以幫助你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>

來源

2015-11-17 09:17:19

這裏的大致輪廓：

MYMAP應該是位置：相對
添加myMap上的鼠標事件來跟蹤X，Y的鼠標位置
in doubleClick編輯方法，創建將顯示爲圓形的div。此外，它應該的位置是：絕對
該元素添加到MYMAP並更改其CSS：左鼠標X位置和頂級鼠標Y位置

來源

2015-11-17 09:17:22 Dalibor

如何在雙擊時創建圖像的突出顯示？

回答

相關問題