HERE maps draggable & geoshapes de rayon modifiables (exemple: Circle)

J'ai besoin d'aide pour modifier ce code afin de créer un cercle de drag-gable et un rayon modifiable.HERE maps draggable & geoshapes de rayon modifiables (exemple: Circle)

exemple: l'utilisateur doit être capable de faire glisser un cercle vers un emplacement différent et de changer de rayon.

Je ne suis pas sûr s'il y a un param ou une option pour passer la valeur pour activer cette fonctionnalité, ce sera une aide précieuse si quelqu'un peut m'aider.

En vous remerciant d'avance.

function addCircleToMap(map){ 
 
    map.addObject(new H.map.Circle(
 
    // The central point of the circle 
 
    {lat:36.178699, lng:-115.146171}, 
 
    // The radius of the circle in meters 
 
    1000, 
 
    { 
 
     style: { 
 
     strokeColor: 'rgba(55, 85, 170, 0.6)', // Color of the perimeter 
 
     lineWidth: 2, 
 
     fillColor: 'rgba(0, 128, 0, 0.7)' // Color of the circle 
 
     } 
 
    } 
 
)); 
 
} 
 

 

 
//Step 1: initialize communication with the platform 
 
var platform = new H.service.Platform({ 
 
    app_id: 'DemoAppId01082013GAL', 
 
    app_code: 'AJKnXv84fjrb0KIHawS0Tg', 
 
    useCIT: true, 
 
    useHTTPS: true 
 
}); 
 
var defaultLayers = platform.createDefaultLayers(); 
 

 
//Step 2: initialize a map - this map is centered over las vegas 
 
var map = new H.Map(document.getElementById('map'), 
 
    defaultLayers.normal.map,{ 
 
    center: {lat:36.178699, lng:-115.146171}, 
 
    zoom: 13 
 
}); 
 

 
//Step 3: make the map interactive 
 
// MapEvents enables the event system 
 
// Behavior implements default interactions for pan/zoom (also on mobile touch environments) 
 
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); 
 

 
// Create the default UI components 
 
var ui = H.ui.UI.createDefault(map, defaultLayers); 
 

 
// Now use the map as required... 
 
addCircleToMap(map);

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="initial-scale=1.0, width=device-width" /> 
 
<link rel="stylesheet" type="text/css" href="https://js.cit.api.here.com/v3/3.0/mapsjs-ui.css" /> 
 
<script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-core.js"></script> 
 
<script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-service.js"></script> 
 
<script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-ui.js"></script> 
 
<script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-mapevents.js"></script> 
 

 
</head> 
 
<body> 
 
    <div id="map" style="width: 100%; height: 400px; background: grey" /> 
 

 
</body> 
 
</html>

Source

2017-10-16 suman mainali

Selon HERE map API, vous devez désactiver le draggability par défaut de la carte sous-jacente lors du démarrage pour faire glisser un objet cercle:

map.addEventListener('dragstart', (ev) => { 
    const target = ev.target; 
    if (target instanceof H.map.Circle) { 
     behavior.disable(); 
    } 
}, false);

Pendant cercle Traîner, vous devez écouter l'événement glisser et déplacer la position du cercle:

map.addEventListener('drag', (ev) => { 
    const target = ev.target, 
     pointer = ev.currentPointer; 
    if (target instanceof H.map.Circle) { 
     target.setCenter(map.screenToGeo(pointer.viewportX, pointer.viewportY)); 
    } 
}, false);

Une fois le glissement terminé, vous devez réactiver la glissabilité par défaut de la carte sous-jacente.

map.addEventListener('dragend', (ev) => { 
    const target = ev.target; 
    if (target instanceof H.map.Circle) { 
     behavior.enable(); 
    } 
}, false);

Vous pouvez modifier le rayon du cercle en appelant setRadius sur votre objet cercle.

Source

2018-01-28 21:22:16

HERE maps draggable & geoshapes de rayon modifiables (exemple: Circle)

Répondre

Questions connexes