react-native在IOS上集成百度地图详解

export default class BaiDuMapTest extends Component {

render() {

return (

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: ‘center’,

alignItems: ‘center’,

backgroundColor: ‘#F5FCFF’,

},

welcome: {

fontSize: 20,

textAlign: ‘center’,

margin: 10,

},

instructions: {

textAlign: ‘center’,

color: ‘#333333’,

marginBottom: 5,

},

});

AppRegistry.registerComponent(‘BaiDuMapTest’, () => BaiDuMapTest);

BaiduMapDemo.js

/**

  • @author lovebing

*/

import React, {

Component,

PropTypes

} from ‘react’;

import {

MapView,

MapTypes,

Geolocation

} from ‘react-native-baidu-map’;

import {

Button,

AppRegistry,

StyleSheet,

Text,

View,

TouchableHighlight

} from ‘react-native’;

import Dimensions from ‘Dimensions’;

export default class BaiduMapDemo extends Component {

constructor() {

super();

this.state = {

mayType: MapTypes.NORMAL,

zoom: 15,

center: {

longitude: 113.981718,

latitude: 22.542449

},

trafficEnabled: false,

baiduHeatMapEnabled: false,

markers: [{

longitude: 113.981718,

latitude: 22.542449,

title: “Window of the world”

},{

longitude: 113.995516,

latitude: 22.537642,

title: “”

}]

};

}

componentDidMount() {

}

render() {

return (

<MapView

trafficEnabled={this.state.trafficEnabled}

baiduHeatMapEnabled={this.state.baiduHeatMapEnabled}

zoom={this.state.zoom}

mapType={this.state.mapType}

center={this.state.center}

marker={this.state.marker}

markers={this.state.markers}

style={styles.map}

onMarkerClick={(e) => {

console.warn(JSON.stringify(e));

}}

onMapClick={(e) => {

}}

<Button title=“Normal” onPress={() => {

this.setState({

mapType: MapTypes.NORMAL

});

}} />

<Button style={styles.btn} title=“Satellite” onPress={() => {

this.setState({

mapType: MapTypes.SATELLITE

});

}} />

<Button style={styles.btn} title=“Locate” onPress={() => {

console.warn(‘center’, this.state.center);

Geolocation.getCurrentPosition()

.then(data => {

console.warn(JSON.stringify(data));

this.setState({

zoom: 15,

marker: {

latitude: data.latitude,

longitude: data.longitude,

title: ‘Your location’

},

center: {

latitude: data.latitude,

longitude: data.longitude,

rand: Math.random()

}

});

})

.catch(e =>{

console.warn(e, ‘error’);

})

}} />

<Button title=“Zoom+” onPress={() => {

this.setState({

zoom: this.state.zoom + 1

});

}} />

<Button title=“Zoom-” onPress={() => {

if(this.state.zoom > 0) {

this.setState({

zoom: this.state.zoom - 1

});

}

}} />

<Button title=“Traffic” onPress={() => {

this.setState({

trafficEnabled: !this.state.trafficEnabled

});

}} />

<Button title=“Baidu HeatMap” onPress={() => {

this.setState({

baiduHeatMapEnabled: !this.state.baiduHeatMapEnabled

});

}} />

);

}

}

const styles = StyleSheet.create({

row: {

flexDirection: ‘row’,

height: 40

},

container: {

flex: 1,

justifyContent: ‘flex-start’,

web浏览器中的javascript

  • 客户端javascript
  • 在html里嵌入javascript
  • javascript程序的执行
  • 兼容性和互用性
  • 可访问性
  • 安全性
  • 客户端框架

window对象

  • 计时器

  • 浏览器定位和导航

  • 浏览历史

  • 浏览器和屏幕信息

  • 对话框

  • 错误处理

  • 作为window对象属性的文档元素

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/34318.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

告别手动邮件处理:使用imbox库轻松管理你的收件箱

imbox库简介&#xff1a; imbox是一个强大的Python库,专为与IMAP服务器交互而设计.IMAP&#xff08;Internet Message Access Protocol&#xff09;是一种用于电子邮件的标准协议,允许用户在远程服务器上管理邮件.imbox库通过IMAP协议与邮件服务器通信,帮助用户轻松地读取、搜索…

在昇腾开发环境合并baichuan2-13B模型的lora文件

概述 别人使用lora的方式对baichuan2-13b的模型进行了微调训练&#xff0c;希望我能部署到mindie服务中。 lora微调后生成的文件如下&#xff1a; # ls checkpoint-lora adapter_config.json optimizer.pt rng_state.pth special_tokens_map.json tokenizer_conf…

只知道无人机能航拍,你已经out啦!!!

无人机行业应用相当广泛&#xff0c;涵盖了航拍、植保、测绘、巡检、安防、物流等多个领域。并且随着科技的不断发展&#xff0c;无人机技术也在不断创新和完善。无人机行业的应用具有多重优势&#xff0c;这些优势使得无人机在众多领域中得以广泛应用并取得显著的成效。 航拍…

【投稿优惠|权威主办】2024年图像、地质测绘与遥感技术国际学术会议(ICIGSRST 2024)

【投稿优惠|权威主办】2024年图像、地质测绘与遥感技术国际学术会议&#xff08;ICIGSRST 2024&#xff09; 2024 International Conference on Image, Geological Surveying and Remote Sensing Technology&#xff08;ICIGSRST 2024&#xff09; ▶会议简介 2024年图像、地质…

应用监控eBPF 版调研

参考&#xff1a; https://www.toutiao.com/article/7327353509735596559/?appnews_articletamp1717488680&use_new_style1&req_id20240604161119838096AAE4AD4F44788E&group_id7327353509735596559&wxshare_count1&tt_fromweixin&utm_sourceweixin&…

vue自定义指令在同一个页面生效一次

vue自定义指令在同一个页面生效一次&#xff0c;在使用自定义指令做el-sele下滑分页时遇到vue自定义指令只生效了一次&#xff0c;是因为放在了v-if中使用&#xff0c;换成v-show就好了

kafka集群生产性能调优业务场景

kafka集群生产性能调优业务场景 Kafka 集群的生产性能调优可以通过多种途径实现,包括硬件配置优化、Kafka 配置参数调优、客户端配置优化、操作 系统和网络配置优化等。以下是详细的调优途径和适用场景: 1. 硬件配置优化 1.1 磁盘 SSD:使用 SSD 而不是 HDD 来提高磁盘 I/…

毕昇jdk教程

毕昇jdk教程指南链接&#xff1a;Wiki - Gitee.com

springboot 网上商城系统-计算机毕业设计源码08789

摘 要 随着互联网趋势的到来&#xff0c;各行各业都在考虑利用互联网将自己推广出去&#xff0c;最好方式就是建立自己的互联网系统&#xff0c;并对其进行维护和管理。在现实运用中&#xff0c;应用软件的工作规则和开发步骤&#xff0c;采用Java技术建设网上商城系统。 本设…

算法课程笔记——点积叉积

算法课程笔记——点积叉积

Kotlin设计模式:享元模式(Flyweight Pattern)

Kotlin设计模式&#xff1a;享元模式&#xff08;Flyweight Pattern&#xff09; 在移动应用开发中&#xff0c;内存和CPU资源是非常宝贵的。享元模式&#xff08;Flyweight Pattern&#xff09;是一种设计模式&#xff0c;旨在通过对象重用来优化内存使用和性能。本文将深入探…

docker不要乱改工作路径,可能啥都会丢

买的国内某云服务器&#xff0c;系统盘比较小&#xff0c;数据盘稍微大点&#xff0c;啥都安装好了才发现docker实例存在了系统盘里面&#xff0c;寻思挪一下吧&#xff0c;好家伙&#xff0c;挪完了啥都丢了&#xff0c;我是这样移动的。 1.先把docker停了 sudo systemctl …

2023年零信任落地关键词:整合、身份、普及

2023年&#xff0c;全球企业纷纷加快了落地零信任的步伐。虽然落地的功能、落地的场景不尽相同&#xff0c;但企业对零信任的诉求、落地零信任的优先级却殊途同归&#xff0c;不同的零信任产品的应用场景也日益明晰。 全面整合和协同运行&#xff0c;是2023年企业用户对零信任…

一文搞懂Linux多线程【上】

目录 &#x1f6a9;引言 &#x1f6a9;再次理解页表 &#x1f6a9;初识线程 &#x1f6a9;线程和pthread库 &#x1f680;线程创建 &#x1f6a9;线程的资源共享问题 &#x1f6a9;线程的优缺点 &#x1f6a9;引言 今天&#xff0c;我们开始学习Linux中的线程部分。Lin…

大语言模型(LLMs)能够进行推理和规划吗?

大语言模型&#xff08;LLMs&#xff09;&#xff0c;基本上是经过强化训练的 n-gram 模型&#xff0c;它们在网络规模的语言语料库&#xff08;实际上&#xff0c;可以说是我们文明的知识库&#xff09;上进行了训练&#xff0c;展现出了一种超乎预期的语言行为&#xff0c;引…

awk练习

作业&#xff1a;监控内存&#xff0c;cpu和硬盘的根目录&#xff0c;超过80%提示用户&#xff0c;写成函数库的行&#xff0c;每天早上 的8.50分&#xff0c;执行一次脚本。 [roottest3 opt]# vim zuoye.sh #函数库yingpan () {YP$(df -h | awk NR2{print $5})if [[ $YP &…

在Ubuntu服务器上安装配置和优化Zerotier:一步步指南

嗨&#xff0c;大家好&#xff01;今天我要在Ubuntu上部署和测试Zerotier。使用的是阿贝云的免费云服务器&#xff0c;这台免费云服务器真不错&#xff0c;1核CPU、1G内存、10G硬盘和5M带宽的配置&#xff0c;让我们在测试和开发中游刃有余。对一个奶爸黑客来说&#xff0c;阿贝…

Lodash-js工具库

1. Lodash 简介 Lodash 是一个现代 实用工具库&#xff0c;提供了许多有用的函数&#xff0c;帮助开发者处理常见的编程任务&#xff0c;如数组操作、对象处理、字符串处理等。Lodash 使得代码更简洁、更高效&#xff0c;极大地提高了开发效率。Lodash 的设计灵感来自于 Under…

react学习——09react中props属性

1、基本使用 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><!-- 移动端适配--><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>1_props基…

行业原型:智能资产管理平台-个人资产服务

​行业原型预览链接&#xff1a;&#xff08;请与班主任联系获取原型文档&#xff09; 文件类型&#xff1a;.rp 支持版本&#xff1a;Axrure RP 8 文档名称&#xff1a;金融&#xff1a;智能资产管理平台&#xff08;个人资产服务&#xff09; 文件大小&#xff1a;1.75 MB 智…