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

Posted 2023-03-28

技术标签:

【中文标题】使用JavaScript覆盖Google Map API中标记弹出窗口上的默认文本？【英文标题】：Overwrite Default Text On Marker PopUp In Google Map API Using JavaScript? 【发布时间】：2019-02-01 01:22:41 【问题描述】：

我正在使用以下代码在网页上使用其 API 在 Google 地图上的一些标记之间购买路线图。您也可以在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>

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

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

演示文本按照他们的纬度显示：

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]
  ];

【问题讨论】：

【参考方案1】：

要更改为每个标记显示的文本，请在调用路线渲染器之前修改路线响应中该腿的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

代码 sn-p：

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>

编码 sn-p 使用相同的输入列表进行所有处理：

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)

【讨论】：

在答案的 sn-p 中添加了小提琴中的代码。

以上是关于使用JavaScript覆盖Google Map API中标记弹出窗口上的默认文本？的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript 使用标尺计算Google Map v3上的距离

JavaScript Google Map It Bookmarklet

JavaScript Google Map v3异步地图

javascript google map api get city #js #map #filter

javascript Google Map：以编程方式单击Marker