質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

Q&A

0回答

225閲覧

iOS ExpoのMapViewで作成した地図にカスタム設定を付加できない

itohkun55

総合スコア8

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

0グッド

0クリップ

投稿2019/04/18 06:22

現在Expoを利用してReactNativeの地図アプリを作成中です。

地図そのものはMapViewを利用して簡単に作成できましたが、
GoogleMapの表示設定を利用したいためこのページを参考にして
カスタム設定を地図に付加しました。

しかし、iOS実機上で付加した設定を確認することができないため、ご相談お願いいたします。

以下ソースコードです。 なお、下ほとんどの部分が設定用JSONですが、
念のため掲載しました。

JavaScript

1 2import React from 'react'; 3import { StyleSheet, Text, View } from 'react-native'; 4import { MapView } from 'expo'; 5 6export default class App extends React.Component { 7 8 9 render() { 10     //下記パラメータを取れているか確認。「google」となっていた 11 console.log(MapView.PROVIDER_GOOGLE) 12 return ( 13 <MapView 14 style={styles} 15 initialRegion={{ 16 latitude: 37.78825, 17 longitude: -122.4324, 18 latitudeDelta: 0.0922, 19 longitudeDelta: 0.0421, 20 }} 21 22 provider={MapView.PROVIDER_GOOGLE} 23 customMapStyle={mapStyle} 24 /> 25 ); 26 } 27} 28 29//ここからGoogleマップの設定内容のJSON 30const mapStyle = [ 31 [ 32 { 33 "elementType": "geometry", 34 "stylers": [ 35 { 36 "color": "#ebe3cd" 37 } 38 ] 39 }, 40 { 41 "elementType": "labels.text.fill", 42 "stylers": [ 43 { 44 "color": "#523735" 45 } 46 ] 47 }, 48 { 49 "elementType": "labels.text.stroke", 50 "stylers": [ 51 { 52 "color": "#f5f1e6" 53 } 54 ] 55 }, 56 { 57 "featureType": "administrative", 58 "elementType": "geometry.stroke", 59 "stylers": [ 60 { 61 "color": "#c9b2a6" 62 } 63 ] 64 }, 65 { 66 "featureType": "administrative.land_parcel", 67 "elementType": "geometry.stroke", 68 "stylers": [ 69 { 70 "color": "#dcd2be" 71 } 72 ] 73 }, 74 { 75 "featureType": "administrative.land_parcel", 76 "elementType": "labels.text.fill", 77 "stylers": [ 78 { 79 "color": "#ae9e90" 80 } 81 ] 82 }, 83 { 84 "featureType": "landscape.natural", 85 "elementType": "geometry", 86 "stylers": [ 87 { 88 "color": "#dfd2ae" 89 } 90 ] 91 }, 92 { 93 "featureType": "poi", 94 "elementType": "geometry", 95 "stylers": [ 96 { 97 "color": "#dfd2ae" 98 } 99 ] 100 }, 101 { 102 "featureType": "poi", 103 "elementType": "labels.text.fill", 104 "stylers": [ 105 { 106 "color": "#93817c" 107 } 108 ] 109 }, 110 { 111 "featureType": "poi.park", 112 "elementType": "geometry.fill", 113 "stylers": [ 114 { 115 "color": "#a5b076" 116 } 117 ] 118 }, 119 { 120 "featureType": "poi.park", 121 "elementType": "labels.text.fill", 122 "stylers": [ 123 { 124 "color": "#447530" 125 } 126 ] 127 }, 128 { 129 "featureType": "road", 130 "elementType": "geometry", 131 "stylers": [ 132 { 133 "color": "#f5f1e6" 134 } 135 ] 136 }, 137 { 138 "featureType": "road.arterial", 139 "elementType": "geometry", 140 "stylers": [ 141 { 142 "color": "#fdfcf8" 143 } 144 ] 145 }, 146 { 147 "featureType": "road.highway", 148 "elementType": "geometry", 149 "stylers": [ 150 { 151 "color": "#f8c967" 152 } 153 ] 154 }, 155 { 156 "featureType": "road.highway", 157 "elementType": "geometry.stroke", 158 "stylers": [ 159 { 160 "color": "#e9bc62" 161 } 162 ] 163 }, 164 { 165 "featureType": "road.highway.controlled_access", 166 "elementType": "geometry", 167 "stylers": [ 168 { 169 "color": "#e98d58" 170 } 171 ] 172 }, 173 { 174 "featureType": "road.highway.controlled_access", 175 "elementType": "geometry.stroke", 176 "stylers": [ 177 { 178 "color": "#db8555" 179 } 180 ] 181 }, 182 { 183 "featureType": "road.local", 184 "elementType": "labels.text.fill", 185 "stylers": [ 186 { 187 "color": "#806b63" 188 } 189 ] 190 }, 191 { 192 "featureType": "transit.line", 193 "elementType": "geometry", 194 "stylers": [ 195 { 196 "color": "#dfd2ae" 197 } 198 ] 199 }, 200 { 201 "featureType": "transit.line", 202 "elementType": "labels.text.fill", 203 "stylers": [ 204 { 205 "color": "#8f7d77" 206 } 207 ] 208 }, 209 { 210 "featureType": "transit.line", 211 "elementType": "labels.text.stroke", 212 "stylers": [ 213 { 214 "color": "#ebe3cd" 215 } 216 ] 217 }, 218 { 219 "featureType": "transit.station", 220 "elementType": "geometry", 221 "stylers": [ 222 { 223 "color": "#dfd2ae" 224 } 225 ] 226 }, 227 { 228 "featureType": "water", 229 "elementType": "geometry.fill", 230 "stylers": [ 231 { 232 "color": "#b9d3c2" 233 } 234 ] 235 }, 236 { 237 "featureType": "water", 238 "elementType": "labels.text.fill", 239 "stylers": [ 240 { 241 "color": "#92998d" 242 } 243 ] 244 } 245] 246 ] 247 248 249 250const styles = StyleSheet.create({ 251 container: { 252 flex: 1, 253 backgroundColor: '#fff', 254 alignItems: 'center', 255 justifyContent: 'center', 256 }, 257}); 258

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問