Question

我想在地理编码地图上显示多个中点，但是对我来说不起作用。下面是我在地图上显示的中点。

源代码：

 function initialize(){var a,b,c={zoom:14,center:new google.maps.LatLng(mapLatStart,mapLngStart)},d=new google.maps.Map(document.getElementById("map"),c),e=new google.maps.LatLngBounds,f=new google.maps.InfoWindow;for(b=0;b<markers.length;b++){var g=new google.maps.LatLng(parseFloat(markers[b][1]),parseFloat(markers[b][2]));e.extend(g),a=new google.maps.Marker({position:new google.maps.LatLng(parseFloat(markers[b][1]),parseFloat(markers[b][2])),map:d,icon:markers[b][3]}),d.fitBounds(e),d.panToBounds(e),google.maps.event.addListener(a,"click",function(a,b){return function(){f.setContent(markers[b][0]),f.open(d,a)}}(a,b))}google.maps.event.trigger(d,"resize")}

以下是内容区域中地图点按下的地图视图：只需在页面中加入Map link即可。

调试代码后，我发现地图使用了js map run file

<div id="map" class="content active" data-gmap="{"start": {"lat": "25.687158", "lng":"32.639656"},"midpoints" : {"lat": "25.300000","lng":"32.550000"}, "end": {"lat": "24.088931", "lng":"32.899795"} }" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">

以下是js

自动生成的代码

<div class="gm-style" style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0; cursor: url("https://maps.gstatic.com/mapfiles/openhand_8_8.cur"), default;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 1; width: 100%; transform-origin: 242px 133px 0px;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 100; width: 100%;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 1; visibility: inherit;" aria-hidden="true">
<div style="width: 256px; height: 256px; position: absolute; left: 69px; top: 65px;"></div>
<div style="width: 256px; height: 256px; position: absolute; left: 325px; top: 65px;"></div>
<div style="width: 256px; height: 256px; position: absolute; left: 69px; top: -191px;"></div>
<div style="width: 256px; height: 256px; position: absolute; left: 69px; top: 321px;"></div>
<div style="width: 256px; height: 256px; position: absolute; left: 325px; top: -191px;"></div>
<div style="width: 256px; height: 256px; position: absolute; left: 325px; top: 321px;"></div>
<div style="width: 256px; height: 256px; position: absolute; left: -187px; top: 65px;"></div>
<div style="width: 256px; height: 256px; position: absolute; left: 581px; top: 65px;"></div>
<div style="width: 256px; height: 256px; position: absolute; left: -187px; top: -191px;"></div>
<div style="width: 256px; height: 256px; position: absolute; left: -187px; top: 321px;"></div>
<div style="width: 256px; height: 256px; position: absolute; left: 581px; top: -191px;"></div>
<div style="width: 256px; height: 256px; position: absolute; left: 581px; top: 321px;"></div>
</div>
</div>
</div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 101; width: 100%;"></div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 102; width: 100%;"></div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 103; width: 100%;">
<div style="position: absolute; left: 0px; top: 0px; z-index: -1;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 1; visibility: inherit;" aria-hidden="true">
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 69px; top: 65px;">
<canvas draggable="false" style="-moz-user-select: none; position: absolute; left: 0px; top: 0px; height: 256px; width: 256px;" height="256" width="256"></canvas>
</div>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 325px; top: 65px;"></div>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 69px; top: -191px;"></div>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 69px; top: 321px;"></div>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 325px; top: -191px;"></div>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 325px; top: 321px;"></div>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -187px; top: 65px;"></div>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 581px; top: 65px;"></div>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -187px; top: -191px;"></div>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -187px; top: 321px;"></div>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 581px; top: -191px;"></div>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 581px; top: 321px;"></div>
</div>
</div>
</div>
<div style="position: absolute; z-index: 0; left: 0px; top: 0px;">
<div style="overflow: hidden; width: 637px; height: 400px;">
<img style="width: 637px; height: 400px;" src="https://maps.googleapis.com/maps/api/js/StaticMapService.GetMapImage?1m2&1i9403&2i6847&2e1&3u6&4m2&1u637&2u400&5m5&1e0&5sen-US&6sus&10b1&12b1&token=43557">
</div>
</div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 1; visibility: inherit;" aria-hidden="true">

Answer 1

您应该使用文档中描述的the Waypoints in Routes，而不是直接正确设置data-gmap。

您应该传递一个类似于：

的请求

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

到directionsService.route以获得结果。

我创建了一个jsfiddle来做到这一点，希望它有所帮助。 http://jsfiddle.net/7d68qfth/

中点不会在地图上标记？

1 个答案: