如何在这里绘制地图与这里地图Javascript 3 API

How to drawing in Here Map with HERE MAP Javascript 3 API?

本文关键字：地图 Javascript API 这里 在这里 绘制      更新时间：2023-09-26

如何绘制一个几何形状(多边形)在这里地图javascript 3.0与鼠标事件点击?并将坐标保存在数据库中。我在developer.here.com上搜索指南，但没有一个脚本指南显示如何在这里绘制javascript 3.0 API。(https://developer.here.com/api-explorer/maps-js/geoshapes/polygon-on-the-map)

旁边，在javascript 2.5 API显示指南，但它将过期并很快被删除。这里有一个脚本绘制在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>

必须更新GeoShape的条带:

  1. 通过getStrip()
    2. 获取条带
  2. 通过pushPoint()将geo.Point压入条带

  3. 通过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);
});
相关文章：