javascript - 使用 JavaScript 覆盖 Google map API 中标记弹出窗口上的默认文本？-6ren

javascript - 使用 JavaScript 覆盖 Google map API 中标记弹出窗口上的默认文本？

转载作者：行者123 更新时间：2023-12-03 01:15:48

我正在使用以下代码在网页上使用其 API 来购买 Google map 上某些标记之间的路线图。您可以在FIDDLE查看也是。

<style type="text/css">
html,body,#dvMap {
    height:100%;
    width:100%;
}
</style>
<div id="info"></div>
<div id="dvMap"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<script type="text/javascript">
var directionsDisplay = [];
var directionsService = [];
var map = null;

function calcRoute() {

    var msg = "25.001807, 67.123459:25.007006, 67.076991:24.957115, 67.076278:24.945176, 67.084069:24.940619, 67.080735:24.936648, 67.076211:24.927262, 67.064335:24.918269, 67.053686:24.909177, 67.049781:24.900226, 67.044931:24.892076, 67.043592:24.880923, 67.039432:24.872733, 67.035963:24.859631, 67.015729:24.854257, 67.006481:24.848813, 66.996748:24.825830, 66.979450:24.818366, 66.975126";
    var input_msg = msg.split(":");
    var locations = new Array();

    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < input_msg.length; i++) {
        var tmp_lat_lng = input_msg[i].split(",");
        locations.push(new google.maps.LatLng(tmp_lat_lng[0], tmp_lat_lng[1]));
        bounds.extend(locations[locations.length-1]);
    }

    var mapOptions = {
        // center: locations[0],
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
    map.fitBounds(bounds);

    var i = locations.length;
    var index = 0;

    while (i != 0) {

        if (i < 3) {
            var tmp_locations = new Array();
            for (var j = index; j < locations.length; j++) {
                tmp_locations.push(locations[index]);
            }
            drawRouteMap(tmp_locations);
            i = 0;
            index = locations.length;
        }

        if (i >= 3 && i <= 10) {
            console.log("before :fun < 10: i value " + i + " index value" + index);
            var tmp_locations = new Array();
            for (var j = index; j < locations.length; j++) {
                tmp_locations.push(locations[j]);
            }
            drawRouteMap(tmp_locations);
            i = 0;
            index = locations.length;
            console.log("after fun < 10: i value " + i + " index value" + index);
        }

        if (i >= 10) {
            console.log("before :fun > 10: i value " + i + " index value" + index);
            var tmp_locations = new Array();
            for (var j = index; j < index + 10; j++) {
                tmp_locations.push(locations[j]);
            }
            drawRouteMap(tmp_locations);
            i = i - 9;
            index = index + 9;
            console.log("after fun > 10: i value " + i + " index value" + index);
        }
    }
}


function drawRouteMap(locations) {

    var start, end;
    var waypts = [];

    for (var k = 0; k < locations.length; k++) {
        if (k >= 1 && k <= locations.length - 2) {
            waypts.push({
                location: locations[k],
                stopover: true
            });
        }
        if (k == 0) start = locations[k];

        if (k == locations.length - 1) end = locations[k];

    }
    var request = {
        origin: start,
        destination: end,
        waypoints: waypts,
        optimizeWaypoints: true,
        travelMode: google.maps.TravelMode.DRIVING
    };
    console.log(request);

    directionsService.push(new google.maps.DirectionsService());
    var instance = directionsService.length - 1;
    directionsDisplay.push(new google.maps.DirectionsRenderer({
        preserveViewport: true
    }));
    directionsDisplay[instance].setMap(map);
    directionsService[instance].route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            console.log(status);
            directionsDisplay[instance].setDirections(response);
        }
    });
}

google.maps.event.addDomListener(window, 'load', calcRoute);
</script>

现在我的问题是，我想在每个标记标签上显示我自己想要的文本，其中当前 Google 显示默认地址，如下图所示。

我尝试了很多方法并用谷歌搜索，但无法在我的代码中添加此功能。那么可以在那里写我自己的文本吗......？？？

按照经纬度显示的演示文本:

var locations = [
    ['Ahsanabad Chowrangi', 25.001807, 67.123459, 1],
    ['Allah Wali Chowrangi', 25.007006, 67.076991, 2],
    ['Shafique Mor', 24.957115, 67.076278, 3],
    ['Sohrab Goth Flyover', 24.945176, 67.084069, 4],
    ['Ancholi', 24.940619, 67.080735, 5],
    ['Water Pump Chowrangi', 24.936648, 67.076211, 6],
    ['Ayesha Manzil Chowrangi', 24.927262, 67.064335, 7],
    ['Karimabad Chowrangi', 24.918269, 67.053686, 8],
    ['Liaquatabad 10 Number Chowrangi', 24.909177, 67.049781, 9],
    ['Lalo Kheet Daak Khana Chowrangi', 24.900226, 67.044931, 10],
    ['Teen Hatti Bridge', 24.892076, 67.043592, 11],
    ['Gurumandar', 24.880923, 67.039432, 12],
    ['Numaish Chowrangi', 24.872733, 67.035963, 13],
    ['Jama Cloth Market', 24.859631, 67.015729, 14],
    ['City Court', 24.854257, 67.006481, 15],
    ['Tower', 24.848813, 66.996748, 16],
    ['Nagina Center', 24.825830, 66.979450, 17],
    ['Kemari No. 1', 24.818366, 66.975126, 18]
  ];

最佳答案

要更改为每个标记显示的文本，请在调用路线渲染器之前修改路线响应中该路段的 start_address 属性。要获取最后一个点，还要将 end_address 属性设置为下一段的结束标记的值。

  for (var leg = 0; leg < response.routes[0].legs.length; leg++) {
    response.routes[0].legs[leg].start_address = markerText[instance * 9 + leg][0] + "<br>instance=" + instance;
  }

(上面的代码假设有一个数组markerText，其中包含您希望为每个标记显示的文本)。

proof of concept fiddle using your array of locations

代码片段:

var directionsDisplay = [];
var directionsService = [];
var markerText = [
  ['Ahsanabad Chowrangi', 25.001807, 67.123459, 1],
  ['Allah Wali Chowrangi', 25.007006, 67.076991, 2],
  ['Shafique Mor', 24.957115, 67.076278, 3],
  ['Sohrab Goth Flyover', 24.945176, 67.084069, 4],
  ['Ancholi', 24.940619, 67.080735, 5],
  ['Water Pump Chowrangi', 24.936648, 67.076211, 6],
  ['Ayesha Manzil Chowrangi', 24.927262, 67.064335, 7],
  ['Karimabad Chowrangi', 24.918269, 67.053686, 8],
  ['Liaquatabad 10 Number Chowrangi', 24.909177, 67.049781, 9],
  ['Lalo Kheet Daak Khana Chowrangi', 24.900226, 67.044931, 10],
  ['Teen Hatti Bridge', 24.892076, 67.043592, 11],
  ['Gurumandar', 24.880923, 67.039432, 12],
  ['Numaish Chowrangi', 24.872733, 67.035963, 13],
  ['Jama Cloth Market', 24.859631, 67.015729, 14],
  ['City Court', 24.854257, 67.006481, 15],
  ['Tower', 24.848813, 66.996748, 16],
  ['Nagina Center', 24.825830, 66.979450, 17],
  ['Kemari No. 1', 24.818366, 66.975126, 18]
];
var map = null;

function calcRoute() {
  var msg = "25.001807, 67.123459:25.007006, 67.076991:24.957115, 67.076278:24.945176, 67.084069:24.940619, 67.080735:24.936648, 67.076211:24.927262, 67.064335:24.918269, 67.053686:24.909177, 67.049781:24.900226, 67.044931:24.892076, 67.043592:24.880923, 67.039432:24.872733, 67.035963:24.859631, 67.015729:24.854257, 67.006481:24.848813, 66.996748:24.825830, 66.979450:24.818366, 66.975126";
  var input_msg = msg.split(":");
  var locations = new Array();

  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < input_msg.length; i++) {
    var tmp_lat_lng = input_msg[i].split(",");
    locations.push(new google.maps.LatLng(tmp_lat_lng[0], tmp_lat_lng[1]));
    bounds.extend(locations[locations.length - 1]);
  }

  var mapOptions = {
    // center: locations[0],
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
  map.fitBounds(bounds);

  var i = locations.length;
  var index = 0;

  while (i != 0) {

    if (i < 3) {
      var tmp_locations = new Array();
      for (var j = index; j < locations.length; j++) {
        tmp_locations.push(locations[index]);
      }
      drawRouteMap(tmp_locations);
      i = 0;
      index = locations.length;
    }

    if (i >= 3 && i <= 10) {
      console.log("before :fun < 10: i value " + i + " index value" + index);
      var tmp_locations = new Array();
      for (var j = index; j < locations.length; j++) {
        tmp_locations.push(locations[j]);
      }
      drawRouteMap(tmp_locations);
      i = 0;
      index = locations.length;
      console.log("after fun < 10: i value " + i + " index value" + index);
    }

    if (i >= 10) {
      console.log("before :fun > 10: i value " + i + " index value" + index);
      var tmp_locations = new Array();
      for (var j = index; j < index + 10; j++) {
        tmp_locations.push(locations[j]);
      }
      drawRouteMap(tmp_locations);
      i = i - 9;
      index = index + 9;
      console.log("after fun > 10: i value " + i + " index value" + index);
    }
  }
}


function drawRouteMap(locations) {

  var start, end;
  var waypts = [];

  for (var k = 0; k < locations.length; k++) {
    if (k >= 1 && k <= locations.length - 2) {
      waypts.push({
        location: locations[k],
        stopover: true
      });
    }
    if (k == 0) start = locations[k];

    if (k == locations.length - 1) end = locations[k];

  }
  var request = {
    origin: start,
    destination: end,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: google.maps.TravelMode.DRIVING
  };
  console.log(request);

  directionsService.push(new google.maps.DirectionsService());
  var instance = directionsService.length - 1;
  directionsDisplay.push(new google.maps.DirectionsRenderer({
    preserveViewport: true
  }));
  directionsDisplay[instance].setMap(map);
  directionsService[instance].route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      console.log(status);
      for (var leg = 0; leg < response.routes[0].legs.length; leg++) {
        response.routes[0].legs[leg].start_address = markerText[instance * 9 + leg][0] + "<br>instance=" + instance;
        response.routes[0].legs[leg].end_address = markerText[instance * 9 + leg + 1][0] + "<br>instance=" + instance;
      }
      directionsDisplay[instance].setDirections(response);
    }
  });
}

google.maps.event.addDomListener(window, 'load', calcRoute);

html,
body,
#dvMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="info"></div>
<div id="dvMap"></div>

使用相同输入列表进行所有处理的代码片段:

var directionsDisplay = [];
var directionsService = [];
var locations = [
  ['Ahsanabad Chowrangi', 25.001807, 67.123459, 1],
  ['Allah Wali Chowrangi', 25.007006, 67.076991, 2],
  ['Shafique Mor', 24.957115, 67.076278, 3],
  ['Sohrab Goth Flyover', 24.945176, 67.084069, 4],
  ['Ancholi', 24.940619, 67.080735, 5],
  ['Water Pump Chowrangi', 24.936648, 67.076211, 6],
  ['Ayesha Manzil Chowrangi', 24.927262, 67.064335, 7],
  ['Karimabad Chowrangi', 24.918269, 67.053686, 8],
  ['Liaquatabad 10 Number Chowrangi', 24.909177, 67.049781, 9],
  ['Lalo Kheet Daak Khana Chowrangi', 24.900226, 67.044931, 10],
  ['Teen Hatti Bridge', 24.892076, 67.043592, 11],
  ['Gurumandar', 24.880923, 67.039432, 12],
  ['Numaish Chowrangi', 24.872733, 67.035963, 13],
  ['Jama Cloth Market', 24.859631, 67.015729, 14],
  ['City Court', 24.854257, 67.006481, 15],
  ['Tower', 24.848813, 66.996748, 16],
  ['Nagina Center', 24.825830, 66.979450, 17],
  ['Kemari No. 1', 24.818366, 66.975126, 18]
];
var map = null;

function calcRoute() {
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < locations.length; i++) {
    var pt = new google.maps.LatLng(locations[i][1], locations[i][2]);
    bounds.extend(pt);
  }

  var mapOptions = {
    // center: locations[0],
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
  map.fitBounds(bounds);

  var i = locations.length;
  var index = 0;

  while (i != 0) {

    if (i < 3) {
      var tmp_locations = new Array();
      for (var j = index; j < locations.length; j++) {
        tmp_locations.push(new google.maps.LatLng(locations[j][1], locations[j][2]));
      }
      drawRouteMap(tmp_locations);
      i = 0;
      index = locations.length;
    }

    if (i >= 3 && i <= 10) {
      console.log("before :fun < 10: i value " + i + " index value " + index);
      var tmp_locations = new Array();
      for (var j = index; j < locations.length; j++) {
        tmp_locations.push(new google.maps.LatLng(locations[j][1], locations[j][2]));
      }
      drawRouteMap(tmp_locations);
      i = 0;
      index = locations.length;
      console.log("after fun < 10: i value " + i + " index value " + index);
    }

    if (i >= 10) {
      console.log("before :fun > 10: i value " + i + " index value " + index);
      var tmp_locations = new Array();
      for (var j = index; j < index + 10; j++) {
        tmp_locations.push(new google.maps.LatLng(locations[j][1], locations[j][2]));
      }
      drawRouteMap(tmp_locations);
      i = i - 9;
      index = index + 9;
      console.log("after fun > 10: i value " + i + " index value " + index);
    }
  }
}


function drawRouteMap(routelocations) {

  var start, end;
  var waypts = [];

  for (var k = 0; k < routelocations.length; k++) {
    if (k >= 1 && k <= routelocations.length - 2) {
      waypts.push({
        location: routelocations[k],
        stopover: true
      });
    }
    if (k == 0) start = routelocations[k];

    if (k == routelocations.length - 1) end = routelocations[k];

  }
  var request = {
    origin: start,
    destination: end,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: google.maps.TravelMode.DRIVING
  };
  console.log(request);

  directionsService.push(new google.maps.DirectionsService());
  var instance = directionsService.length - 1;
  directionsDisplay.push(new google.maps.DirectionsRenderer({
    preserveViewport: true
  }));
  directionsDisplay[instance].setMap(map);
  directionsService[instance].route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      console.log(status);
      for (var leg = 0; leg < response.routes[0].legs.length; leg++) {
        response.routes[0].legs[leg].start_address = locations[instance * 9 + leg][0] + "<br>instance=" + instance;
        response.routes[0].legs[leg].end_address = locations[instance * 9 + leg + 1][0] + "<br>instance=" + instance;
      }
      directionsDisplay[instance].setDirections(response);
    }
  });
}

google.maps.event.addDomListener(window, 'load', calcRoute);

html,
body,
#dvMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="info"></div>
<div id="dvMap"></div>

( fiddle )

关于javascript - 使用 JavaScript 覆盖 Google map API 中标记弹出窗口上的默认文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52023481/

文章推荐： javascript - 如何让文本框中只允许数字

文章推荐： javascript - knexjs 如何与远程目标一起工作？

文章推荐： javascript - Babel 显示意外错误，找不到解决方案

jQuery 弹出/弹出
我连续有 11 个图像，如果鼠标悬停在其中一个图像上，我希望弹出一个弹出窗口。所以每 11 个图像都有不同的弹出窗口。我已经有一些代码可以执行此操作，但它仅适用于第一张图像。代码:index.htm
cocoa - 弹出 NSColorPanel？
是否可以从 NSColorWell 制作一个 NSColorPanel“弹出”，几乎像一个弹出菜单？我不喜欢它作为调色板的实现方式，因为有时它与哪个 NSColorWell 关联并不明显。谢谢!
cocoa - 弹出 NSStatusItem
我正在考虑一个想法，基本上我想要一个带有 NSPopoverController 的 NSStatusItem 。我读到了人们遇到的所有问题，但我只是想尝试一下。现在有干净的方法吗？我见过的所有版本都
JavaScript 弹出 url
如何获取 JS 打开的弹出窗口的 url。这是我的代码: var _url = 'someurlhere'; var popupwindow = window.open(_url, "Popu
javascript - 如何在新窗口中打开网页(弹出)
我正在设计一个网页，我希望当用户单击链接时，弹出窗口(新窗口)将打开一个链接网页。我的代码如下所示 function win(add,w,h) { window.open(add,"","widt
c - 简单的堆栈，弹出
我正在寻找 C 中的简单堆栈实现，并找到了类似的东西: void pop(struct stack **top) { struct stack *temp; temp = malloc(s
c# - 弹出 - 阻止了带有来源的框架
我正在尝试使用 paypal 实现登录，我有 2 个不同的主机域 1- www.example.com 2- www.example.de 对于 paypal，我需要为此目的选择一个返回 URL，我选
ios - “弹出”查看动画
我正在尝试找出如何复制此处显示的“弹出式” View 动画:https://imgur.com/a/irFqdiP .我正在使用当前代码来显示我的 viewController，但目前只有一个淡入淡出
Windows CDROM 弹出
有谁知道在 Windows 2000 或更高版本上以编程方式关闭 CD 托盘的方法？打开 CD 托盘存在，但我似乎无法关闭它，尤其是在 W2k 下。如果可能的话，我特别想从批处理文件中寻找一种方法来
javascript - 弹出 "over"网页时叫什么？
当您访问http://www.daniweb.com时你得到一个弹出窗口，这叫什么 + 知道怎么做吗？感谢您的回复，只有模态加载动画的最简单方法是什么，即页面加载时动画显示以及动画何时完成？ ASP
c# - 来自过滤器代码的音频点击/弹出
我正在为 Unity 引擎中的音频过滤器创建一个 C# 脚本。我的问题是，在通过我的过滤器运行后，生成的音频具有一致且频繁的“咔哒声”、“砰砰声”或“跳过声”。听起来有点像旧 radio 。我不确
javascript - 隐藏浏览器的地址栏(弹出)
我必须隐藏浏览器的地址栏。我正在使用这段代码: var winFeature = 'location=no,toolbar=no,menubar=no,scrollbars=yes,r
iOS中利用inputView 弹出 picker
推荐一个button 弹起pickerview的源码，也可以作为工具类使用。利用inputview 做键盘弹起动画。该如何做呢？ 1.继承uiview 2.重写属性&方法
excel - 阻止文件现在可用弹出 Excel
我在这里有一个问题，我已经工作了几个小时。我正在导入一个 Excel 文件，并使用此代码来执行此操作: Dim objExcel As Excel.Application Di
iphone - 弹出 UIView 会使应用程序崩溃
我基本上是从 UITableViewController 推送 UIView，它包含的只是 UIWebView。但是，当我删除 UIView 以返回到 UITableView 时，应用程序崩溃了。 -
uinavigationcontroller - 弹出 UINavigationController 时崩溃
我有几个由导航 Controller 控制的 View Controller 。例如，viewController A 和 viewController B 都可以将 viewController
email - 是否有网址打开全屏(弹出)中具有特定邮件ID的Gmail撰写窗口
我使用新的Gmail API为用户创建草稿。 API响应提供了新创建的消息ID。然后，我可以使用URL https://mail.google.com/mail/#drafts?compose=[m
data-structures - Redis列表如何允许索引和恒定时间的左右推送/弹出？
Redis列表实现了哪种内部数据结构以实现这一目的？链表将需要O(n)索引，而数组将需要O(n)左/右推/弹出。最佳答案根据official documentation，它们被实现为linked
WPF 弹出 UI 显示黑色
我正在使用 WPF Popup 控件，它显示背景为黑色。我在其中放置了一个 StackPanel 并设置了 Background="Transparent"，但这没有帮助。
javascript - 弹出 block - jQuery
我希望页面内的容器在事件时占据页面的整个宽度并覆盖在其他所有内容上。这是我目前所拥有的，但它没有按我想要的方式工作: $(function() { $('.main a').click( fu

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用 JavaScript 覆盖 Google map API 中标记弹出窗口上的默认文本？