react中使用谷歌地图并定位

react中使用谷歌地图

1、引入

index.html文件中引入谷歌地图

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"><title>OMS</title><script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDVTk78W-PvhqUC08l6MBqUHTjJXSGcP4g&libraries=places&language="></script></head><body><div id="root"></div></body>
</html>

2、使用

import React, { Component } from "react";
import { Button, Input } from "antd";
import { FormattedMessage } from "react-intl";const googleMap = window.google && window.google.maps;class Map extends Component {constructor(props) {super(props);this.state = {map: null,lat: null,lng: null,marker: [],};}// 初始化谷歌地图componentDidMount() {if ("geolocation" in navigator) {//检测当前设备是否支持H5Geolocation APInavigator.geolocation.getCurrentPosition((position) => {let mapProp = {center: new googleMap.LatLng(position.coords.latitude, position.coords.longitude),zoom: 17,mapTypeId: googleMap.MapTypeId.ROADMAP,};let map = new googleMap.Map(document.getElementById("googleMap"), mapProp);if (this.state.marker[0] && this.state.marker[0].setMap) {this.state.marker[0].setMap(null);}const arr = [];arr[0] = new googleMap.Marker({position: new googleMap.LatLng(position.coords.latitude, position.coords.longitude),});this.setState({marker: arr,lat: position.coords.latitude,lng: position.coords.longitude,map,},() => {this.state.marker[0].setMap(map);});});} else {alert("该浏览器不支持获取地理位置");}}addMap = () => {googleMap.event.addListener(this.state.map, "click", (e) => {if (this.state.marker[0] && this.state.marker[0].setMap) {this.state.marker[0].setMap(null);}const arr = [];arr[0] = new googleMap.Marker({position: new googleMap.LatLng(e.latLng.lat(), e.latLng.lng()),});this.setState({marker: arr,lat: e.latLng.lat(),lng: e.latLng.lng(),},() => {this.state.marker[0].setMap(this.state.map);});});};render() {return (<div><div style={{ display: "flex", alignItems: "center", marginBottom: 10 }}><span><FormattedMessage id="lng" />：</span><Input style={{ width: "200px" }} value={this.state.lng} disabled /><span style={{ marginLeft: 20 }}><FormattedMessage id="lat" />：</span><Input style={{ width: "200px" }} value={this.state.lat} disabled /><Buttonstyle={{ marginLeft: 20 }}type="primary"onClick={() => {this.props.addLatLng(this.state.lat, this.state.lng);this.props.onCancel();}}><FormattedMessage id="ok" /></Button></div><div id="googleMap" style={{ width: "900px", height: "500px" }} onClick={this.addMap}></div>;</div>);}
}export default Map;

react中使用谷歌地图并定位相关推荐

如何在cad中导入谷歌地图_如何在Google地图中设置出发和到达时间
如何在cad中导入谷歌地图 Unless you work from home, Google Maps is fantastic at knowing where you need to be, a ...
如何在cad中导入谷歌地图_如何在Google地图中避开收费公路
如何在cad中导入谷歌地图 No one likes to pay to be able to drive on a specific road, especially if you're just ...
可集成在XPage中的谷歌地图控件
OpenNTF推荐项目"谷歌地图控件",可集成在XPage中,支持基于坐标和基于地址两种方式. ... 内容详见可集成在XPage中的谷歌地图控件
在react中使用百度地图
在react中使用百度地图在react中使用百度地图有三种方式 1:首先使用window保存BMap 1): 在创建好的react项目中的public目录下的index.html中引入<scr ...
AngularJS进阶(十九)在AngularJS应用中集成百度地图实现定位功能
在AngularJS应用中集成百度地图实现定位功能注:请点击此处进行充电! 前言根据项目需求,需要实现手机定位功能,考虑到百度业务的强大能力,遂决定使用百度地图第三方服务. 添加第三方模块的步骤与 ...
AngularJS进阶十九在AngularJS应用中集成百度地图实现定位功能
在AngularJS应用中集成百度地图实现定位功能注:请点击此处进行充电! 前言根据项目需求,需要实现手机定位功能,考虑到百度业务的强大能力,遂决定使用百度地图第三方服务. 添加第三方模块的步骤与 ...
Android程序地图,在定制的Android应用程序中使用谷歌地图
我收到以下问题(显示在LogCat中).我希望any1可以帮助我,因为我是android应用程序开发的新手.在定制的Android应用程序中使用谷歌地图 11-17 16:50:38.087: E/A ...
javaweb中使用百度、谷歌地图进行定位
之前给一个公司做了一个定位,调用一个接口获得经纬度,然后在地图上显示, 之前我做了三种显示,百度.谷歌.搜狗,搜狗和百度类似,这里就介绍百度和谷歌了, 之前我们在一个城市里面坐了测试,不一定很准确,但 ...
Google Map开发系列（六）——谷歌地图坐标定位
要在地图中定位一个点,最常见的就是使用一个地理坐标来定位.但是,谷歌地图 API 还提供了不同于地理坐标的多套坐标系统,方便我们在需要的时候使用不同的坐标来定位在地图上显示的信息.我在右边的地图中演示 ...
在Fragment中实现百度地图，定位到当前位置（基于SDKv2.1.0）
使用最新版本的百度地图需要注意的几个地方: 1.libs文件夹下要有android-support-v4.jar.baidumapapi_v2_1_0.jar.locSDK_3.1.jar三个jar包 ...

react中使用谷歌地图并定位

react中使用谷歌地图

1、引入

2、使用

react中使用谷歌地图并定位相关推荐

最新文章

热门文章