Google 地图 API 中的颜色变化折线 属性
Color variations Polyline property in Google maps API
我有这样的要求,我需要在悉尼、墨尔本和阿德莱德之间画一条线,悉尼和阿德莱德之间的线颜色应该是深色,墨尔本和阿德莱德之间的线应该是深阿德莱德应该打火机.
当前 API 是否可以在单个对象中提供此功能:
new google.maps.Polyline({
});
实现功能?
单条折线具有一组属性。您可以为每个唯一的属性集使用单个 google.maps.Polyline 来完成此操作,因此在您的示例中,有两条折线。
一个选项是每行创建 google.maps.Polyline
对象,下面提供了来自 Simple Polylines page 的修改示例:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: -32.9340105, lng: 128.2698231},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var flightPlanCoordinates = [
{lat: -33.877024, lng: 151.227963},
{lat: -37.816567, lng: 144.961489},
{lat: -34.930054, lng: 138.593065}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates.slice(0,2),
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
map: map
});
var flightPath2 = new google.maps.Polyline({
path: flightPlanCoordinates.slice(1,3),
geodesic: true,
strokeColor: '#FFCC00',
strokeOpacity: 1.0,
strokeWeight: 2,
map: map
});
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
我有这样的要求,我需要在悉尼、墨尔本和阿德莱德之间画一条线,悉尼和阿德莱德之间的线颜色应该是深色,墨尔本和阿德莱德之间的线应该是深阿德莱德应该打火机.
当前 API 是否可以在单个对象中提供此功能:
new google.maps.Polyline({
});
实现功能?
单条折线具有一组属性。您可以为每个唯一的属性集使用单个 google.maps.Polyline 来完成此操作,因此在您的示例中,有两条折线。
一个选项是每行创建 google.maps.Polyline
对象,下面提供了来自 Simple Polylines page 的修改示例:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: -32.9340105, lng: 128.2698231},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var flightPlanCoordinates = [
{lat: -33.877024, lng: 151.227963},
{lat: -37.816567, lng: 144.961489},
{lat: -34.930054, lng: 138.593065}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates.slice(0,2),
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
map: map
});
var flightPath2 = new google.maps.Polyline({
path: flightPlanCoordinates.slice(1,3),
geodesic: true,
strokeColor: '#FFCC00',
strokeOpacity: 1.0,
strokeWeight: 2,
map: map
});
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>