我是靠谱客的博主 高兴板栗,最近开发中收集的这篇文章主要介绍react 高德图的使用定位到指定的经纬度react-amap模块的使用!! 请看效果图:,觉得挺不错的,现在分享给大家,希望可以做个参考。
概述
需要定位的地方的经纬度获取:
https://lbs.amap.com/console/show/picker
import React from 'react';
import { connect } from 'dva';
import Map from 'react-amap/lib/map';//需要安装的模块
import Marker from 'react-amap/lib/marker';//需要安装的模块
import Information from "~/components/Information/Information";
import styles from "./Contact.less";
//import styles from './index.less';
@connect(state => ({
global: state.global,
}))
export default class Contact extends React.Component {
constructor(props){
super(props);
this.ajaxFlag = true;
this.state = {
}
}
componentDidMount(){
}
render(){
//116.429828,39.84504
const position = { longitude: 116.429828, latitude: 39.84504}//需要定位的经纬度
//zoom 需要放大的倍数
//宋家庄交通枢纽站是指定的添加的小气泡
return(
<div>
<Information>
{/*联系我们*/}
<p className={styles.title}>联系我们丨Contact us</p>
{/*地图显示*/}
<div className={styles.mapImg}>
<Map plugins={['ToolBar']} zoom={18} center={position}>
<Marker position={position} ><div className={styles.tag}>宋家庄交通枢纽站</div></Marker>
</Map>
</div>
<div className={styles.clean}></div>
{/*调整地图的小气泡*/}
{/*<div className={styles.clean}></div>*/}
{/*<div className={styles.tag}>宋家庄交通枢纽站</div>*/}
</Information>
</div>
)
}
}
请看效果图:
最后
以上就是高兴板栗为你收集整理的react 高德图的使用定位到指定的经纬度react-amap模块的使用!! 请看效果图:的全部内容,希望文章能够帮你解决react 高德图的使用定位到指定的经纬度react-amap模块的使用!! 请看效果图:所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复