如何使用HERE MAP Javascript 3 API绘制Here map?

时间:2015-08-05 02:28:41

标签: javascript php here-api

如何在鼠标事件点击的HERE Maps 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>

1 个答案:

答案 0 :(得分:1)

您必须更新GeoShape的条带:

  1. 通过getStrip()
  2. 获取地带
  3. 通过geo.Point
  4. pushPoint()推送到地带
  5. 通过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);
    });