地圖的參考文檔，http://lbs.amap.com/api/javascript-api/gettingstarted
1.在webstrom中創(chuàng)建一個(gè)新的項(xiàng)目：
$ react-native init project --version 0.44.3
(project---項(xiàng)目名）
(version---版本號(hào)）
2.項(xiàng)目創(chuàng)建成功以后蛙吏，雙擊ios文件夾中的后綴為.xcodeproj的文件源哩，在xcode上面運(yùn)行該項(xiàng)目
3.在文件夾中的index.ios.js書寫TabBar，如下
/**
Sample React Native App
@flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TabBarIOS
} from 'react-native';
import MyWebView from './common/MyWebView'
export default class Tolit extends Component {
constructor(props){
super(props);
this.state = {
defaultIndex:1
}
}
ChangeTab(index){
// alert(index);
this.setState({defaultIndex:index});
}
render() {
return (
<View style={styles.container}>
<TabBarIOS>
<TabBarIOS.Item
title="衛(wèi)生間"
icon={require("./img/toilet.png")}
selected={1==this.state.defaultIndex}
onPress={this.ChangeTab.bind(this,1)}>
<MyWebView uri="http://localhost:63342/rn/Tolit/Tolit/html/near.html?_ijt=ko2lhujoavcj9kmcupse62289a"></MyWebView>
</TabBarIOS.Item>
<TabBarIOS.Item
title="電影"
icon={require("./img/movie.png")}
selected={2==this.state.defaultIndex}
onPress={this.ChangeTab.bind(this,2)}
<Text>我是電影</Text>
</TabBarIOS.Item>
<TabBarIOS.Item
title="閱讀"
icon={require("./img/read.png")}
selected={3==this.state.defaultIndex}
onPress={this.ChangeTab.bind(this,3)}
<Text>我是閱讀</Text>
</TabBarIOS.Item>
<TabBarIOS.Item
title="設(shè)置"
icon={require("./img/set.png")}
selected={4==this.state.defaultIndex}
onPress={this.ChangeTab.bind(this,4)}
<Text>我是設(shè)置</Text>
</TabBarIOS.Item>
</TabBarIOS>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
}
});
AppRegistry.registerComponent('Tolit', () => Tolit);
4.MyWebView是一個(gè)組件鸦做，為了使錯(cuò)誤變得通俗易懂励烦，如下
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
WebView,
ActivityIndicator
} from 'react-native';
class MyWebView extends Component{
constructor(props){
super(props);
this.setError = this.setError.bind(this);
this.state={
isError:false
}
}
render(){
if(this.state.isError){
return (<View style={styles.loadStyle}>
<ActivityIndicator>
<Text style={styles.wordStyle}>服務(wù)器錯(cuò)誤或者網(wǎng)絡(luò)地址錯(cuò)誤！</Text>
</ActivityIndicator>
</View>)
}else{
return(<WebView
source={{uri:this.props.uri}}
onError={this.setError}
</WebView>)
}
}
setError(){
this.setState({isError:true})
}
}
const styles = StyleSheet.create({
loadStyle:{
flex:1,
// justifyContent:"center",
color:"red"
},
wordStyle:{
color:"red"
}
})
export default MyWebView;
5.新建一個(gè)html文件夾馁龟，在該文件夾下建一個(gè)html文件崩侠，代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>衛(wèi)生間</title>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=d003e159729b9244eaf57d98fa2e5be1"></script>
<style type="text/css">
body,html,#container{
height: 100%;
margin: 0px;
}
container .amap-controls .amap-scalecontrol{
left: 50px;
bottom: 30px;
z-index:200;
}
.amap-geolocation-con{
left: 10px;
}
</style>
</head>
<body>
<div id="container" tabindex="0"></div>
</body>
<script type="text/javascript">
var map = new AMap.Map('container',{
resizeEnable: true,
zoom: 15
});
AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView'],
function(){
map.addControl(new AMap.ToolBar());
map.addControl(new AMap.Scale());
});
//實(shí)例化walking
AMap.service(["AMap.Walking"], function(){
walking = new AMap.Walking({
map: map,
});
})
//在指定范圍內(nèi)搜尋所要找的地方
map.plugin('AMap.Geolocation', function() {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默認(rèn):true
timeout: 10000, //超過10秒后停止定位，默認(rèn)：無窮大
buttonOffset: new AMap.Pixel(10, 20),//定位按鈕與設(shè)置的腿匆簦靠位置的偏移量改抡，默認(rèn)：Pixel(10, 20)
zoomToAccuracy: true, //定位成功后調(diào)整地圖視野范圍使定位位置及精度范圍視野內(nèi)可見，默認(rèn)：false
buttonPosition:'RB'
});
map.addControl(geolocation);
geolocation.getCurrentPosition();//自動(dòng)定位
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出錯(cuò)信息
});
function onComplete(data){
console.log("定位成功的data值：",data);
if(data.info == 'SUCCESS' && data.status == 1){
//定位成功系瓢；--》根據(jù)定位的坐標(biāo)查找附近的衛(wèi)生間
AMap.service(["AMap.PlaceSearch"], function() {
var placeSearch = new AMap.PlaceSearch({ //構(gòu)造地點(diǎn)查詢類
pageSize: 5, //個(gè)數(shù)
pageIndex: 1,
map: map
});
var cpoint = data.position; //中心點(diǎn)坐標(biāo)
placeSearch.searchNearBy('衛(wèi)生間', cpoint, 2000, function(status, result) {
console.log(status,result);
if(status == 'complete'){
var toilets = result.poiList.pois;
toilets.forEach(function(v,k) {
console.log("--", v);
var marker = new AMap.Marker({ //添加自定義點(diǎn)標(biāo)記
map: map,
position: v.location, //基點(diǎn)位置
offset: new AMap.Pixel(-20, -55), //相對(duì)于基點(diǎn)的偏移位置
draggable: false, //是否可拖動(dòng)
content: <div style="background: orange;white-space: nowrap;padding: 0px 5px">${v.distance}米</div> //自定義點(diǎn)標(biāo)記覆蓋物內(nèi)容
});
// 給marker綁定click事件
AMap.event.addListener(marker, 'click', showInfoWin);
function showInfoWin(){
//顯示信息窗口
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定義窗體
content: `<div style="background: white;position: relative;">
<p style="background: rgb(54,160,251);color: white;padding: 0px 10px">衛(wèi)生間
<span style="position: absolute;right: 10px" onclick="closeInfoWindow()">x</span>
</p>
<p style="padding: 0px 10px">名稱：${v.name}</p>
<p style="padding: 0px 10px">距您：${v.distance}米</p>
<p style="padding: 0px 10px">地址：${v.address}</p>
</div>`,
offset: new AMap.Pixel(16, -45)
});
infoWindow.open(map,marker.getPosition());
//根據(jù)起終點(diǎn)坐標(biāo)規(guī)劃步行路線
walking.search(cpoint,v.location);
}
})
}
});
});
}
}
function onError(){
console.log("定位失敗");
}
//關(guān)閉窗口
function closeInfoWindow() {
map.clearInfoWindow();
}
</script>
</html>
----key值需要去高德官網(wǎng)新建一個(gè)應(yīng)用阿纤，選擇web應(yīng)用，就會(huì)得到相應(yīng)的key值---
