Flutterで複数人の位置情報をBing Map上に表示するサンプルコードを生成してみました。
以下のコードは、`location`と`flutter_map`というパッケージを使用しています。
`location`パッケージは、位置情報の取得や距離計算に便利です¹。
`flutter_map`パッケージは、Bing Mapを含む様々なタイルサーバーから地図を表示することができます²。
Bing Mapを使用するには、APIキーが必要です³。
APIキーは[こちら](^4^)から取得できます。
import 'package:flutter/material.dart';
import 'package:location/location.dart';
import 'package:flutter_map/flutter_map.dart';
const String apiKey = 'YOUR_API_KEY_HERE';
List<LocationData> users = [
LocationData.fromMap({'latitude': 35.6833, 'longitude': 139.7667}), // 東京
LocationData.fromMap({'latitude': 34.6936, 'longitude': 135.5019}), // 大阪
LocationData.fromMap({'latitude': 43.0643, 'longitude': 141.3469}), // 札幌
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
title: const Text('Bing Map Sample'),
class BingMap extends StatefulWidget {
_BingMapState createState() => _BingMapState();
class _BingMapState extends State<BingMap> {
MapController mapController = MapController();
// Bing MapのURLテンプレートを取得する関数
Future<String?> getBingUrlTemplate(String url) async {
final response = await http.get(Uri.parse('$url?key=$apiKey'));
if (response.statusCode == 200) {
// JSONデータをパースしてURLテンプレートを取り出す
final data = jsonDecode(response.body) as Map<String, dynamic>;
final resourceSets = data['resourceSets'] as List<dynamic>;
final resources = resourceSets[0]['resources'] as List<dynamic>;
final imageUrl = resources[0]['imageUrl'] as String;
// Bing Mapのタイルレイヤーを作成する関数
Widget _buildBingMap(String urlTemplate) {
mapController: mapController,
center: LatLng(35.6812, 139.7671), // 地図の中心を東京駅に設定
urlTemplate: urlTemplate, // URLテンプレートを指定
subdomains: ['t0', 't1', 't2', 't3'], // サブドメインを指定
'culture': 'ja-JP', // 文化コードを指定
// 複数人の位置情報をマーカーとして表示するレイヤーを追加
markers: users.map((user) {
point: LatLng(user.latitude!, user.longitude!),
builder: (ctx) => const Icon(Icons.person_pin_circle),
Widget build(BuildContext context) {
// Bing MapのURLテンプレートを取得するためのFutureBuilderを使用
return FutureBuilder<String?>(
future: getBingUrlTemplate(
'http://dev.virtualearth.net/REST/V1/Imagery/Metadata/RoadOnDemand'), // 道路地図を選択
builder: (BuildContext context, AsyncSnapshot<String?> snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
// URLテンプレートが取得できた場合は地図を表示
final String urlTemplate = snapshot.data!;
return _buildBingMap(urlTemplate);
// URLテンプレートが取得できなかった場合はエラーメッセージを表示
child: Text('Bing MapのURLテンプレートが取得できませんでした。'),
// URLテンプレートが取得中の場合はローディングを表示
return const Center(child: CircularProgressIndicator());
このコードを実行すると、以下のような画面が表示されます。
実際に使用する場合は、エラー処理やUIの調整などを行ってください。
また、Bing Mapの利用規約にも従ってください。
¹: [【flutter(location)】位置情報の取得・距離計算 #Flutter - Qiita](^2^)
²: [Using Bing Maps - flutter_map Docs](^1^)
⁴: https://www.bingmapsportal.com/
: https://i.imgur.com/8cY7Q0k.png
: https://www.microsoft.com/en-us/maps/product/terms
(1) Using Bing Maps - flutter_map Docs. https://docs.fleaflet.dev/tile-servers/using-bing-maps.
(2) 【flutter(location)】位置情報の取得・距離計算 #Flutter - Qiita. https://qiita.com/appzs/items/f6c5afbeaefd6cca7de5.
(3) GitHub. https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/maps/tile_layer/bing_map/bing_map.dart.
(4) undefined. http://dev.virtualearth.net/REST/V1/Imagery/Metadata/.
(5) 【flutter(location)】位置情報の取得・距離計算 #Flutter - Qiita. https://qiita.com/appzs/items/f6c5afbeaefd6cca7de5.
(6) Using Bing Maps - flutter_map Docs. https://docs.fleaflet.dev/tile-servers/using-bing-maps.
(7) GitHub. https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/maps/tile_layer/bing_map/bing_map.dart.
(8) undefined. http://dev.virtualearth.net/REST/V1/Imagery/Metadata/.