以编程方式创建地图 [英] Create Map Programmatically

问题描述

我想以编程方式创建地图，这将从用户动态获取位置详细信息。

假设用户输入5位置，程序将获取地图上的位置，并按照位置顺序绘制出路线。创建路线后，地图应该可以保存为图像。



查看可视化示例的内容 -

http://i.telegraph.co.uk/multimedia/archive/02556/map_2556208b.jpg [ ^ ]



哪种技术最适合或任何可用的插件。



请帮我搞任何指示关于这样的实现。

任何帮助都表示赞赏。

谢谢。

Hi,

I'm looking to create map programmatically which will fetch the location details dynamically from the user.
Say suppose the user enters 5 location the program will fetch the location on map and sketch out the route as per the sequence of location. Once the route is create the map should be available to be saved as an image.

Looking out something as this Example for visualization-
http://i.telegraph.co.uk/multimedia/archive/02556/map_2556208b.jpg[^]

Which technology will be best suited or any plugin which is available.

Please help me with any pointers with respect to such an implementation.
Any help is appreciated.
Thanks.

推荐答案

你必须使用谷歌API来使用地图，请看下面的链接：



https://developers.google.com/maps/web/ [ ^ ]



适用于ASP.NET的Google Maps API V3 [ ^ ]

Hi, you must use google API for using Map, please have a look on the links below:

https://developers.google.com/maps/web/[^]

Google Maps API V3 for ASP.NET[^]

您可以使用Google Maps API，但请注意，您在开始和结束之间将有8个航点限制：

You can use Google Maps API, but be aware, you will have an 8 waypoint limit between start and finish:

/// <reference path="http://maps.google.com/maps/api/js?v=3.exp" />
/// <reference path="jquery-2.1.3.js" />

（ document ）。ready（ function （）{
getLocation（）;
showRoute（）;
}）;

function getLocation（）{
showPosition（）;
}

var directionsDisplay;
var directionsService = new google.maps.DirectionsService（）;
var map;

function showPosition（）{
var mapcanvas = document .getElementById（' map'）;
directionsDisplay = new google.maps.DirectionsRenderer（）;

// Bloemfontein，ZA
var coords = new google.maps.LatLng（-29。 1210600
， 26 。 2140000 ）;
var options = {
zoom： 6 ，
center： coords，
mapTypeControl： false ，
navigationControlOptions：{
style：google.maps.NavigationControlStyle.SMALL
}，
mapTypeId：google.maps.MapTypeId.ROADMAP
};

map = new google.maps。地图（mapcanvas，options）;
directionsDisplay.setMap（map）;
}

function showRoute（）{
// 开普敦，WC，ZA
var start = ' 开普敦，WC，ZA';
var end = ' 比勒陀利亚，GP， ZA';
var waypnts = [];
waypnts.push（{
location ：' 伍斯特，WC，ZA'，
}）;
waypnts.push（{
location ：' Beaufort West，WC，ZA'，
}）;
waypnts.push（{
location ：' Three Sisters，NC，ZA'，
}）;
waypnts.push（{
location ：' De Aar，NC，ZA'，
}）;
waypnts.push（{
location ：' Oranjerivier，NC，ZA'，
}）;
waypnts.push（{
location ：' Kimberley，NC，ZA'，
}）;
waypnts.push（{
location ：' Warrenton，NC，ZA'，
}）;
waypnts.push（{
location ：' Bloemhof，NW，ZA'，
}）;
// waypnts.push（{
// location：'Klerksdorp，NW，ZA'，
// }）;
// waypnts.push（{
// location：'Vereeniging，GP，ZA'，
// }）;
// waypnts.push（{
// < span class =code-comment> location：'Johannesburg，GP，ZA'，
// }）;

// 似乎有8个航路点限制免费用户s。

var request = {
origin：start，
destination：end，
waypoints：waypnts，
optimizeWaypoints： true ，
travelMode：google.maps.TravelMode.DRIVING
};

directionsService.route（请求，功能（响应，状态）{
if （status == google.maps.DirectionsStatus.OK）{
directionsDisplay.setDirections（response）;
}
}）;
}

(document).ready(function () { getLocation(); showRoute(); }); function getLocation() { showPosition(); } var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; function showPosition() { var mapcanvas = document.getElementById('map'); directionsDisplay = new google.maps.DirectionsRenderer(); // Bloemfontein, ZA var coords = new google.maps.LatLng(-29.1210600 , 26.2140000); var options = { zoom: 6, center: coords, mapTypeControl: false, navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(mapcanvas, options); directionsDisplay.setMap(map); } function showRoute() { // Cape Town, WC, ZA var start = 'Cape Town, WC, ZA'; var end = 'Pretoria, GP, ZA'; var waypnts = []; waypnts.push({ location:'Worcester, WC, ZA', }); waypnts.push({ location: 'Beaufort West, WC, ZA', }); waypnts.push({ location: 'Three Sisters, NC, ZA', }); waypnts.push({ location: 'De Aar, NC, ZA', }); waypnts.push({ location: 'Oranjerivier, NC, ZA', }); waypnts.push({ location: 'Kimberley, NC, ZA', }); waypnts.push({ location: 'Warrenton, NC, ZA', }); waypnts.push({ location: 'Bloemhof, NW, ZA', }); // waypnts.push({ // location: 'Klerksdorp, NW, ZA', // }); // waypnts.push({ // location: 'Vereeniging, GP, ZA', // }); // waypnts.push({ // location: 'Johannesburg, GP, ZA', // }); // Seems there's an 8 waypoint limit for free users. var request = { origin: start, destination: end, waypoints: waypnts, optimizeWaypoints: true, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route(request, function (response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); }

这篇关于以编程方式创建地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！