如何在google map javascript上为不同用户创建不同路由
在Google Map JavaScript上为不同用户创建不同路由，可以通过以下步骤实现：
- 首先，确保你已经在Google Cloud平台上创建了一个项目，并启用了Maps JavaScript API。获取API密钥，以便在你的应用程序中使用。
- 在你的前端应用程序中，引入Google Maps JavaScript API库。你可以使用以下代码将其添加到HTML文件中：
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>确保将YOUR_API_KEY替换为你在步骤1中获取的API密钥。
- 创建一个地图容器，用于显示地图。在HTML文件中添加一个具有唯一ID的div元素，用于容纳地图。例如：
<div id="map"></div>- 在你的JavaScript代码中，使用以下代码初始化地图，并设置地图的中心和缩放级别：
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: YOUR_LATITUDE, lng: YOUR_LONGITUDE},
zoom: ZOOM_LEVEL
});确保将YOUR_LATITUDE和YOUR_LONGITUDE替换为地图的初始中心点的纬度和经度，以及ZOOM_LEVEL替换为所需的缩放级别。
- 接下来，你可以使用Google Maps Directions Service API来为不同用户创建不同的路由。根据你的需求，你可以使用用户的当前位置、输入的地址或其他方式来获取起点和终点的坐标。
var directionsService = new google.maps.DirectionsService();
var directionsRenderer = new google.maps.DirectionsRenderer();
var request = {
origin: ORIGIN_COORDINATES,
destination: DESTINATION_COORDINATES,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(result);
}
});
directionsRenderer.setMap(map);确保将ORIGIN_COORDINATES和DESTINATION_COORDINATES替换为起点和终点的坐标。
- 最后，你可以根据需要自定义路由的样式和显示方式。例如，你可以更改路线的颜色、线宽、箭头等。你可以在Google Maps JavaScript API文档中找到更多关于自定义路由的信息。
这是一个基本的示例，用于在Google Map JavaScript上为不同用户创建不同路由。根据你的具体需求，你可以进一步扩展和定制这个功能。
相关·内容
1回答
google地图api移除直线
google-maps、google-maps-api-3
我正在开发一个使用谷歌地图API的MVC应用程序。在我的程序中有4个或更多的坐标。根据这一点，我需要画出道路路径。到目前为止，这是我的代码。
<div id="dvMap" style="width: 500px; height: 500px">
</div>
@section scripts
{
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBZxYACsC1qz9gticRd4mb
浏览 0提问于2016-08-28得票数 0
1回答
Javascript，同一页上有多个google映射(Directions Renderer不例外)
javascript、api、renderer、directions
在一个网页中，我在一个循环中生成了多个google地图。我正在使用在每个地图上显示方向。问题是，这段代码显示了上一张地图上的所有方向。有什么主意吗？：
var currentPosition = new google.maps.LatLng(44.462691,26.1215866);
var directionsService = new google.maps.DirectionsService();
function DisplayLocations(){
$("#mapsContainer").empty();
for(var i=0;i<locatio
浏览 3提问于2014-11-18得票数 0
回答已采纳
2回答
在区域内显示地图标记
javascript、google-maps、google-maps-api-3
我有一个数据库中存储了大量的位置，我想在谷歌地图上显示时，他们在一个指定的地区。我有我想工作的大部分功能，与两个地方之间的路线搜索，并在数据库中的所有地图标记显示在地图上。
我不确定的部分是如何只显示RouteBoxer创建的boxpolys中的标记。出于测试目的，我从一个静态JSON文件中拉入位置。
var map = null;
var boxpolys = null;
var directions = null;
var routeBoxer = null;
var distance = null; // km
function initialize() {
v
浏览 0提问于2016-07-04得票数 2
4回答
GoogleMaps Api和C#
c#、winforms、google-maps-api-3、webbrowser-control
我的地图有问题。大约5个月前，Map工作正常。现在，当我用坐标加载地图时，地图正在加载，但当我开始浏览地图、缩放等时，我得到了白屏，好像与地图没有连接。我需要再次加载地图，但同样的问题再次发生。大约5个月前，我还在使用这个脚本，一切都运行得很好。浏览，缩放，更改地图类型，一切都没有任何问题。我已经根据google网站创建了html代码，并将其放入新的资源文件中：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, ini
浏览 0提问于2011-06-11得票数 2
回答已采纳
1回答
在我的网页中加载到google地图
javascript、html、google-maps、google-maps-api-3、google-maps-markers
有什么方法可以加载坐标(从csv文件，xlxs等)在我的网页中嵌入的谷歌地图？我在网上看到的所有例子都表明我必须登录到google地图本身。我想要做的是加载坐标，并将标记放在这些坐标上。地图在我的网页上。我有办法在JavaScript中做到这一点吗？
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
浏览 3提问于2016-01-17得票数 1
回答已采纳
1回答
如何在ReactGoogleMap上显示路由？
reactjs、typescript、google-maps
描述了bug
使用Google，我得到了指示，我创建的DirectionsRenderer看起来都是正确的，地图是显示的，但是路由没有显示，不确定这个选项是否在上不可用
复制
复制行为的步骤：
添加请求，以获取构造函数中的指示。
constructor(props: any){
super(props)
const DirectionsService = new google.maps.DirectionsService();
this.state = {};
DirectionsService.route(
{
ori
浏览 3提问于2020-05-06得票数 0
回答已采纳
2回答
基于解析的XML纬度和经度值将Google地图居中
javascript、jquery、google-maps、xml-parsing
这段Javascript解析一个xml文件，该文件包含起点和终点的纬度和经度坐标。我可以在地图上画出标记很好，问题是地图不是以点为中心的(最终它会调用Google Directions Service并在两个点之间绘制一条路线，所以最好让地图很好地围绕两个点，而不是只以其中一个点为中心)。
在使用硬编码的经纬度和长度值创建地图的那一刻，我知道需要更改，但我尝试了输入‘avail，'endpoint’都没有用，地图无法加载，所以我猜我下面的方法是不正确的。
jQuery(document).ready(function($) {
downloadUrl
浏览 0提问于2013-03-31得票数 0
回答已采纳
2回答
将google地图链接呈现为polyline
google-maps-api-3
我想在地图上显示几条路线，但我更愿意先用谷歌地图绘制它们。例如，我得到了从西雅图到圣地亚哥的方向，然后移动了一些东西，链接看起来像。
我知道我可以使用DirectionsRenderer绘制一条连接西雅图和圣地亚哥的折线，如下所示：
function renderDirections(result) {
var directionsRenderer = new google.maps.DirectionsRenderer;
directionsRenderer.setMap(gMap);
directionsRenderer.setDirections(resul
浏览 1提问于2010-07-22得票数 2
1回答
谷歌地图从一个起点到多个终点的方向
javascript、google-maps
我在地图上有一个起点坐标。我有多(100)个端点来计算从起点到终点的总距离。起点是我的办公室，终点是我客户的位置。我想计算总距离。
我在javascript上使用for循环。
for (var i = 0; i < destinations.length; i++) {
var request = {
origin: "60.758447, 69.385923",
destination: destinations[i],
travelMode: google.maps.DirectionsTravelMode.D
浏览 5提问于2017-04-21得票数 0
1回答
在google地图中插入可变GPS坐标
php、google-maps、gps
我希望我的脚本从GPS(移动电话)获得纬度和经度坐标，然后将它们插入到谷歌地图，并显示移动电话的位置。嗯，我可以从GPS中检索到经度和经度坐标，但它不会将它们作为显示的地图的çentre插入。我的代码：
<script>
$(document).ready(function(){
navigator.geolocation.getCurrentPosition(useposition);
});
function useposition(position){
lat = position.
浏览 2提问于2013-04-17得票数 0
2回答
使用JavaScript从一个函数返回数据以插入到另一个函数中
javascript、google-maps-api-3、axios
我正在尝试创建一个地图在我的网站上使用我的ASP.NET核心剃刀页面项目中的谷歌地图JavaScript应用程序接口。用户将输入一个地址，该地址将保存为TempData，然后插入到Google Maps地理编码器API的参数中，然后将地址转换为坐标。然后，我想使用这些坐标作为Google Maps Javascript API调用的参数。
我有一个名为getLatitude的函数和一个名为getLongitude的函数，如下所示：
function getLatitude() {
searchedAddress = @Html.Raw(Json.Serialize(V
浏览 0提问于2021-01-26得票数 0
2回答
角-不能访问其他函数或变量
javascript、angular、google-maps
我已经做了很长一段时间了，我已经找到了角度镜，但在某些方面，我似乎仍然在挣扎。基本上，我在屏幕上设置了一个google地图对象。添加标记和其他东西需要在一分钟内通过这个设置函数来完成--现在还可以，但是当我知道标记的方向时，我想调用我的showLocationInfo()方法。this.showLocationInfo()或任何其他引用showLocationDetails布尔值的尝试都不起作用，我似乎找不出哪里出了问题。
import {Geolocation} from "@ionic-native/geolocation/ngx";
import {error} from
浏览 3提问于2020-02-13得票数 0
回答已采纳
2回答
谷歌地图v3应用编程接口地图未完全加载
javascript、jquery、html、google-maps、google-maps-api-3
我正在构建一个应用程序，将有地图显示附近的餐馆。
地图会显示，但加载时间很长，并且从未真正完全加载。
这是我的最后期限，我已经尝试了各种解决方案，但都没有成功。
谁来帮帮忙！
请看下面的代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Food & Drink</title>
<s
浏览 0提问于2015-01-17得票数 1
3回答
(Google )地理代码没有成功的原因如下: REQUEST_DENIED
javascript、html、google-maps、button
我是这个地方的新手，我迫切需要这里的专家帮助！D=
我试着制作一个页面，可以生成谷歌地图的动态编号。然而，该网页继续显示Geocode was not successful for the following reason: REQUEST_DENIED。
我再次检查了我的google控制台，并确认地理编码API和Javascript已经启用。(我确实启用了列表中所有的谷歌地图API .)
有人能帮我看看并告诉我原因吗？T_T
//------------------------------------------------\
下面是我的javascript和html按钮：
Javascr
浏览 4提问于2020-04-08得票数 1
回答已采纳
3回答
将图像链接到google地图上的标记
javascript、jquery、api
我在我的地图上有一个自定义标记，并在地图上方的图像，我想有点击，在自定义标记居中的谷歌地图，图像被链接到。我该如何使用google api做到这一点呢？我很难弄清楚google api代码可以做到这一点，谁能给我举个例子？
我正在尝试将其添加到companyimage变量中
<!DOCTYPE html> <html> <head>
<LINK REL=StyleSheet HREF="styles.css" TYPE="text/css" MEDIA=screen>
<meta name="view
浏览 0提问于2011-07-12得票数 0
回答已采纳
4回答
自定义映射类型:重复映射和标记。如何将填充添加到地图中？
javascript、google-maps、google-maps-api-3
使用Google (v3)，我为虚构的游戏世界创建了一个自定义地图类型。默认情况下，映射，甚至自定义映射类型，水平重复(见下图)。
能防止地图水平重复吗？对于我的地图，它并不代表一个行星或球体世界，所以让它永远水平地重复是毫无意义的。我已经想出了如何简单地不加载左、右重复映射的瓷砖，如下所示：
但是，在创建标记时，这些标记仍然显示在所有重复映射中：
有可能防止标记重复使用吗？或者，是否有可能让地图不再重复？这样我就不用处理重复的标记了？
工作:限制超出地图边界的窗格，我已经阅读过各种工作，讨论过简单地限制用户可以向左或向右移动的范围。这对我不起作用，因为我必须允
浏览 6提问于2012-11-05得票数 12
1回答
按缩放级别显示坐标google地图
c#、asp.net、google-maps
我有一个java脚本代码，我在页面加载时显示坐标。我想显示这些坐标，比如如果用户处于15或更高的缩放级别，而不是在页面load.Is中显示所有这些坐标，有可能解决这个问题吗?下面是我正在尝试但仍然没有达到正确的方式。下面是我正在尝试但没有通过的脚本
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Maps</title>
</head>
<body>
<form id=&#
浏览 3提问于2014-08-12得票数 0
1回答
创建标记时发生堆栈溢出错误
javascript、iframe、google-maps-api-3、flex3、stack-overflow
我正在使用谷歌地图javascript api V3在我们基于adobe flex的应用程序中创建地图。我使用flex iframe在flex和javascript api之间进行通信。我有两个问题。
我在html文件中调用一个函数，在html的div标签中创建映射。然后地图显示出来，但是当我调用另一个函数来创建标记时，我得到堆栈溢出错误。在分析这个问题时，我发现由于某种原因，它无法获得先前方法创建的map的引用。有没有办法解决这个问题。请找到代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="
浏览 9提问于2015-05-01得票数 0
1回答
如何在初始化过程中动态设置Google上的缩放值
javascript、google-maps-api-3
我有如下代码。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; }
</style>
</head>
<body>
<input type="hidden" id="zoom_data" valu
浏览 2提问于2015-12-17得票数 0
回答已采纳
2回答
用Google解决-Jquery问题
jquery、google-maps-api-3
我希望将我的地图与jquery拨号框集成起来，以节省表单的滚动。
在我将其集成到jquery ui dialouge框之前，映射工作正常。
我还想添加文本框，这样一旦像孟买这样的城市被输入，地图就会打开，指向孟买。
为提高效率，我现将全部代码张贴如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Get Lat Lon Finder<
浏览 1提问于2014-02-22得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
