Как рисовать здесь Карта с ЗДЕСЬ MAP Javascript 3 API?

Как рисовать геошапы (многоугольник) в ЗДЕСЬ Карты javascript 3.0 с нажатием мыши click? и сохранить координаты в базе данных. Я ищу руководства на developer.here.com, но ни один скрипт не показывает, как рисовать здесь карту javascript 3.0 API. (https://developer.here.com/api-explorer/maps-js/geoshapes/polygon-on-the-map)Как рисовать здесь Карта с ЗДЕСЬ MAP Javascript 3 API?

Кроме того, API API javascript 2.5 показывает руководства, но он скоро будет истек и удален. здесь скрипт рисовать в JavaScript 2.5 (http://developer.here.com/apiexplorer/index.html#js/pub/shapes/map-with-polyline-on-click/):

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" /> 
     <base href="./../../../..//examples/public/api-for-js/shapes/map-with-polyline-on-click.html" /> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
     <title>HERE Maps API for JavaScript Example: Click to create a polyline on map</title> 
     <meta name="description" content="Creating a polyline wih markers by clicking on the map"/> 
     <meta name="keywords" content="drawpolyline, map objects, shape, shapes, triangle, rectangle, circle, polyline, polygon"/> 

     <meta name=viewport content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 

     <link rel="stylesheet" type="text/css" href="./../../../..//examples/templates/js/exampleHelpers.css"/> 
     <script type="text/javascript" charset="UTF-8" src="http://js.cit.api.here.com/se/2.5.4/jsl.js?with=all"></script> 

     <script type="text/javascript" charset="UTF-8" src="./../../../..//examples/templates/js/exampleHelpers.js"></script> 
     <style type="text/css"> 
      html { 
       overflow:hidden; 
      } 

      body { 
       margin: 0; 
       padding: 0; 
       overflow: hidden; 
       width: 100%; 
       height: 100%; 
       position: absolute; 
      } 

      #mapContainer { 
       width: 100%; 
       height: 100%; 
       left: 0; 
       top: 0; 
       position: absolute; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="mapContainer"></div> 
     <div id="uiContainer"></div> 
     <script type="text/javascript" id="exampleJsSource"> 

nokia.Settings.set("app_id", "DemoAppId01082013GAL"); 
nokia.Settings.set("app_code", "AJKnXv84fjrb0KIHawS0Tg"); 
// Use staging environment (remove the line for production environment) 
nokia.Settings.set("serviceMode", "cit"); 

// Get the DOM node to which we will append the map 
var mapContainer = document.getElementById("mapContainer"); 
// Create a map inside the map container DOM node 
var map = new nokia.maps.map.Display(mapContainer, { 
    // Initial center and zoom level of the map 
    center: [52.51, 13.4], 
    zoomLevel: 10, 
    components: [ 
     // ZoomBar provides a UI to zoom the map in & out 
     new nokia.maps.map.component.ZoomBar(), 
     // we add the behavior component to allow panning/zooming of the map 
     new nokia.maps.map.component.Behavior(), 
     // creates UI to easily switch between street map satellite and terrain mapview modes 
     new nokia.maps.map.component.TypeSelector() 
    ] 
}); 


var noteContainer = new NoteContainer({ 
    id: "drawPolylineUi", 
    parent: document.getElementById("uiContainer"), 
    title: "Drawing a polyline", 
    content: 
     '<p>Click or touch anywhere on the map to add a new point to the existing polyline.</p>' + 
     '<input id="resetPolyline" role="button" type="button" value="Reset Polyline"/>' 
}); 

// We bind DOM element to variable so we use it later to install event handler. 
var resetPolylineUiElt = document.getElementById("resetPolyline"); 

// Javascript inheritance helper function 
function extend(B, A) { 
    function I() {} 
    I.prototype = A.prototype; 
    B.prototype = new I(); 
    B.prototype.constructor = B; 
} 


var MarkerPolyline = function (coords, props) { 
    // Call the "super" constructor to initialize properties inherited from Container 
    nokia.maps.map.Container.call(this); 

    // Calling MarkerPolyline constructor 
    this.init(coords, props); 
}; 

extend(MarkerPolyline, nokia.maps.map.Container); 

// MarkerPolyline constructor function 
MarkerPolyline.prototype.init = function (coords, props) { 
    var i, 
     coord, 
     marker, 
     lineProps = props.polyline || {}, 
     markerProps = (this.markerProps = props.marker || {}); 

    this.coords = {}; 

    // Create a polyline 
    this.polyline = new nokia.maps.map.Polyline(coords, lineProps); 

    // Add the polyline to the container 
    this.objects.add(this.polyline); 

    /* We loop through the point to create markers 
    * for each of the points and we store them 
    */ 
    for (i = 0; coord = coords[i]; i++) { 
     marker = new nokia.maps.map.StandardMarker(coord, markerProps); 
     this.coords[coord.latitude + "_" + coord.longitude] = { idx: i + 1, marker: marker }; 
     this.objects.add(marker); 
    } 
}; 

// The add function allows you to add a new point to a MarkerPolyline 
MarkerPolyline.prototype.add = function (coord) { 
    // Create a new standard marker 
    var markerProps = this.markerProps, 
     marker, 
     key = coord.latitude + "_" + coord.longitude; 

    if (!this.coords[key]) { 
     marker = new nokia.maps.map.StandardMarker(coord, markerProps); 
     this.coords[key] = { idx: this.objects.getLength(), marker: marker }; 

     /* Add the marker to the object's collections 
     * so the marker will be rendered onto the map 
     */ 
     this.objects.add(marker); 
     this.polyline.path.add(coord); 
    } 
}; 

// The remove function allows you to remove a point from MarkerPolyline 
MarkerPolyline.prototype.remove = function (coord) { 
    var coords = this.polyline.path.internalArray, 
     i = this.polyline.path.getLength(), 
     marker, 
     key = coord.latitude + "_" + coord.longitude, 
     idx; 

    if (!this.coords[key]) 
     return; 

    while (i--) { 
     if (coords[i * 3 ] === coord.latitude && coords[i * 3 + 1] === coord.longitude) { 
      idx = i; 
     } 
    } 

    // Index of coordinate found, now we remove coordinate from polyline 
    this.polyline.path.remove(idx); 

    // Remove the marker 
    marker = this.coords[key].marker; 
    this.objects.remove(marker); 
    marker.destroy(); 

    delete this.coords[key]; 
}; 

// Set of initial geo coordinates to create the polyline 
var coords = [ 
     new nokia.maps.geo.Coordinate(52.5032, 13.2790), 
     new nokia.maps.geo.Coordinate(52.5102, 13.2818), 
     new nokia.maps.geo.Coordinate(52.5121, 13.3224), 
     new nokia.maps.geo.Coordinate(52.5145, 13.3487), 
     new nokia.maps.geo.Coordinate(52.5139, 13.3501), 
     new nokia.maps.geo.Coordinate(52.5146, 13.3515), 
     new nokia.maps.geo.Coordinate(52.5161, 13.3769) 
    ]; 

// Create a new polyline with markers 
var markerPolyline = new MarkerPolyline(
    coords, 
    { 
     polyline: { pen: { strokeColor: "#00F8", lineWidth: 4 } }, 
     marker: { brush: { color: "#1080dd" } } 
    } 
); 

/* Add the markerPolyline to the map's object collection so 
* all of its containing shapes will be rendered onto the map. 
*/ 
map.objects.add(markerPolyline); 

/* We would like to add event listener on mouse click or finger tap so we check 
* nokia.maps.dom.Page.browser.touch which indicates whether the used browser has a touch interface. 
*/ 
var TOUCH = nokia.maps.dom.Page.browser.touch, 
    CLICK = TOUCH ? "tap" : "click", 
    addedCoords = []; 

// Attach an event listeners on mouse click/touch to add points to 
map.addListener(CLICK, function (evt) { 
    // We translate a screen pixel into geo coordinate (latitude, longitude) 
    var coord = map.pixelToGeo(evt.displayX, evt.displayY); 

    // Next we add the geoCoordinate to the markerPolyline 
    markerPolyline.add(coord); 

    // We store added coordinates so we can remove them later on 
    addedCoords.push(coord); 
}); 

// Reset markerPolyline to its original shape on click of reset button 
resetPolylineUiElt.onclick = function() { 
    var i = addedCoords.length; 

    while (i--) { 
     markerPolyline.remove(addedCoords[i]); 
    } 

    addedCoords = []; 
}; 

// Zoom the map to encapsulate the initial polyline, once the map is initialized and ready 
map.addListener("displayready", function() { 
    map.zoomTo(markerPolyline.getBoundingBox()); 
}); 
     </script> 
    </body> 
</html>

источник

2015-08-05 Habib Azka rama

Вы должны обновить полосу GeoShape:

получить полосу через getStrip()
толкать geo.Point на полосу с помощью pushPoint()

применять обновленную полосу через setStrip()

// enable the event system 
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)), 

//create the line 
line=new H.map.Polyline(new H.geo.Strip([ 52.5032, 13.2790,0, 
              52.5102, 13.2818,0, 
              52.5121, 13.3224,0, 
              52.5145, 13.3487,0, 
              52.5139, 13.3501,0, 
              52.5146, 13.3515,0, 
              52.5161, 13.3769,0]) 
         ); 
//draw the line 
map.addObject(line); 

//add tap-listener 
map.addEventListener('tap', function(e){ 

    var pointer = e.currentPointer, 
     //create geo.Point 
     latLng = map.screenToGeo(pointer.viewportX, pointer.viewportY), 
     //get current strip 
     strip=line.getStrip(); 

    //push point to strip 
    strip.pushPoint(latLng); 

    //set updated strip 
    line.setStrip(strip); 
});

источник

2015-08-06 10:36:46

Как рисовать здесь Карта с ЗДЕСЬ MAP Javascript 3 API?

ответ

Смежные вопросы