如何通过单击鼠标事件在 HERE Maps javascript 3.0 中绘制地理形状(多边形)？并将坐标保存在数据库中.. 我在 developer.here.com 上搜索指南，但没有一个脚本指南显示如何在此处绘制 map 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 的 strip :
- 通过
getStrip()获取 strip - 通过
pushPoint()将一个geo.Point推送到strip> 通过
setStrip()应用更新的 strip// 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); });
关于javascript - 如何使用 HERE MAP Javascript 3 API 在 Here Map 中绘图？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31822433/