برای سفارشی کردن ظاهر و احساس جزء نقشه ها، نقشه خود را با استفاده از طرح نقشه های مبتنی بر ابر یا با تنظیم گزینه ها مستقیماً در کد، استایل دهید.
نقشه را با طراحی نقشه های مبتنی بر ابر طراحی کنید
ظاهر و احساس جزء نقشه ها را با استفاده از سبک نقشه های مبتنی بر ابر سفارشی کنید. برای هر یک از برنامه‌های خود که از Google Maps استفاده می‌کنند، بدون نیاز به تغییر در کد، سبک‌های نقشه را در کنسول Google Cloud ایجاد و ویرایش می‌کنید. برای اطلاعات بیشتر، پلتفرم خود را در طرح‌بندی نقشه‌های مبتنی بر ابر انتخاب کنید.
هر دو کلاس ConsumerMapView و ConsumerMapFragment از طراحی نقشه های مبتنی بر ابر پشتیبانی می کنند. به منظور استفاده از طرح‌بندی نقشه‌های مبتنی بر ابر، مطمئن شوید که رندر نقشه انتخاب‌شده LATEST است. بخش‌های زیر نمونه‌هایی از نحوه استفاده از طرح‌بندی نقشه‌های مبتنی بر ابر در پروژه خود را نشان می‌دهند.
ConsumerMapView
برای استفاده از طرح‌بندی نقشه‌های مبتنی بر ابر در ConsumerMapView ، فیلد mapId در GoogleMapOptions تنظیم کنید و GoogleMapOptions به getConsumerGoogleMapAsync(ConsumerMapReadyCallback، Fragment، GoogleMapOptions) یا getConsumerGoogleMapAsync(ConsumerConsumerCallback,FragdyConsumerCallback) ارسال کنید.
مثال
جاوا
public class SampleAppActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ConsumerMapView mapView = findViewById(R.id.consumer_map_view);
if (mapView != null) {
GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
mapView.getConsumerGoogleMapAsync(
new ConsumerMapReadyCallback() {
@Override
public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
// ...
}
},
/* fragmentActivity= */ this,
/* googleMapOptions= */ optionsWithMapId);
}
}
}
کاتلین
class SampleAppActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView
val optionsWithMapId = GoogleMapOptions().mapId("map-id")
mapView.getConsumerGoogleMapAsync(
object : ConsumerGoogleMap.ConsumerMapReadyCallback() {
override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
// ...
}
},
/* fragmentActivity= */ this,
/* googleMapOptions= */ optionsWithMapId)
}
}
ConsumerMapFragment
دو راه برای استفاده از استایل نقشه های مبتنی بر ابر در ConsumerMapFragments وجود دارد:
- به صورت ایستا با XML.
- به صورت پویا با
newInstance.
به صورت ایستا با XML
برای استفاده از طرح‌بندی نقشه‌های مبتنی بر ابر با XML در ConsumerMapFragment ، ویژگی map:mapId XML را با mapId مشخص شده اضافه کنید. مثال زیر را ببینید:
<fragment
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
android:id="@+id/consumer_map_fragment"
map:mapId="map-id"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
به صورت پویا با newInstance
برای استفاده از طرح‌بندی نقشه‌های مبتنی بر ابر با newInstance در ConsumerMapFragment ، فیلد mapId در GoogleMapOptions تنظیم کنید و GoogleMapOptions را به newInstance منتقل کنید. مثال زیر را ببینید:
جاوا
public class SampleFragmentJ extends Fragment {
@Override
public View onCreateView(
@NonNull LayoutInflater inflater,
@Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {
final View view = inflater.inflate(R.layout.consumer_map_fragment, container, false);
GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
ConsumerMapFragment consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId);
getParentFragmentManager()
.beginTransaction()
.add(R.id.consumer_map_fragment, consumerMapFragment)
.commit();
consumerMapFragment.getConsumerGoogleMapAsync(
new ConsumerMapReadyCallback() {
@Override
public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
// ...
}
});
return view;
}
}
کاتلین
class SampleFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?): View? {
val view = inflater.inflate(R.layout.consumer_map_fragment, container, false)
val optionsWithMapId = GoogleMapOptions().mapId("map-id")
val consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId)
parentFragmentManager
.beginTransaction()
.add(R.id.consumer_map_fragment, consumerMapFragment)
.commit()
consumerMapFragment.getConsumerGoogleMapAsync(
object : ConsumerMapReadyCallback() {
override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
// ...
}
})
return view
}
}
برای اعمال سبک نقشه در نقشه اشتراک گذاری سفر مصرف کننده جاوا اسکریپت خود، هنگام ایجاد JourneySharingMapView یک mapId و هر mapOptions دیگری را مشخص کنید.
مثال های زیر نحوه اعمال سبک نقشه با شناسه نقشه را نشان می دهد.
جاوا اسکریپت
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
نقشه های سبک را مستقیماً در کد خود تنظیم کنید
همچنین می‌توانید با تنظیم گزینه‌های نقشه هنگام ایجاد JourneySharingMapView استایل نقشه را سفارشی کنید. مثال‌های زیر نحوه استایل دادن به نقشه را با استفاده از گزینه‌های نقشه نشان می‌دهند. برای اطلاعات بیشتر در مورد گزینه‌های نقشه که می‌توانید تنظیم کنید، به mapOptions در مرجع API جاوا اسکریپت Google Maps مراجعه کنید.
جاوا اسکریپت
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
اتصالات خودکار را غیرفعال کنید
با غیرفعال کردن نصب خودکار، می‌توانید نقشه را از نصب خودکار نمای درگاه روی خودرو و مسیر پیش‌بینی‌شده متوقف کنید. مثال زیر نحوه غیرفعال کردن اتصال خودکار را هنگام پیکربندی نمای نقشه اشتراک گذاری سفر نشان می دهد.
جاوا اسکریپت
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
یک نقشه موجود را جایگزین کنید
می‌توانید نقشه‌های موجود را که شامل نشانگرها یا سفارشی‌سازی‌های دیگر است، بدون از دست دادن آن سفارشی‌سازی، جایگزین کنید.
برای مثال، فرض کنید یک صفحه وب با یک موجودیت استاندارد google.maps.Map دارید که در آن یک نشانگر نشان داده شده است:
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
// Initialize and add the map
function initMap() {
// The location of Pier 39 in San Francisco
var pier39 = {lat: 37.809326, lng: -122.409981};
// The map, initially centered at Mountain View, CA.
var map = new google.maps.Map(document.getElementById('map'));
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, now positioned at Pier 39
var marker = new google.maps.Marker({position: pier39, map: map});
}
</script>
<!-- Load the API from the specified URL.
* The async attribute allows the browser to render the page while the API loads.
* The key parameter will contain your own API key (which is not needed for this tutorial).
* The callback parameter executes the initMap() function.
-->
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
برای افزودن کتابخانه ردیابی ناوگان جاوا اسکریپت:
- کدی را برای کارخانه توکن احراز هویت اضافه کنید.
- یک ارائه دهنده مکان را در تابع
initMap()راه اندازی کنید. - نمای نقشه را در تابع
initMap()راه اندازی کنید. نمای شامل نقشه است. - سفارشی سازی خود را به تابع callback برای مقداردهی اولیه نمای نقشه منتقل کنید.
- کتابخانه مکان را به بارگذار API اضافه کنید.
نمونه جایگزینی نقشه با استفاده از وظایف برنامه ریزی شده
مثال‌های زیر نحوه استفاده از یک نقشه موجود را نشان می‌دهد که در آن شی ارائه‌دهنده مکان را برای یک مورد استفاده از کار زمان‌بندی‌شده مقداردهی اولیه می‌کنید. کد برای موارد استفاده سفرهای درخواستی مشابه است، با این تفاوت که شما از FleetEngineVehicleLocationProvider به جای FleetEngineDeliveryVehicleLocationProvider استفاده می کنید.
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
let locationProvider;
// (1) Authentication Token Fetcher
function authTokenFetcher(options) {
// options is a record containing two keys called
// serviceType and context. The developer should
// generate the correct SERVER_TOKEN_URL and request
// based on the values of these fields.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.Token,
expiresInSeconds: data.ExpiresInSeconds
};
}
// Initialize and add the map
function initMap() {
// (2) Initialize location provider. Use FleetEngineDeliveryVehicleLocationProvider
// as appropriate.
locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
YOUR_PROVIDER_ID,
authTokenFetcher,
});
// (3) Initialize map view (which contains the map).
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map'),
locationProviders: [locationProvider],
// any styling options
});
mapView.addListener('ready', () => {
locationProvider.deliveryVehicleId = DELIVERY_VEHICLE_ID;
// (4) Add customizations like before.
// The location of Pier 39 in San Francisco
var pier39 = {lat: 37.809326, lng: -122.409981};
// The map, initially centered at Mountain View, CA.
var map = mapView.map;
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, now positioned at Pier 39
var marker = new google.maps.Marker({position: pier39, map: map});
};
}
</script>
<!-- Load the API from the specified URL
* The async attribute allows the browser to render the page while the API loads
* The key parameter will contain your own API key (which is not needed for this tutorial)
* The callback parameter executes the initMap() function
*
* (5) Add the journey sharing library to the API loader, which includes Fleet Tracking functionality.
-->
<script defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
</script>
</body>
</html>
اگر یک وسیله نقلیه تحویلی با شناسه مشخص شده در نزدیکی اسکله 39 کار می کنید، اکنون روی نقشه ارائه می شود.