اذهب إلى المحتوى
  • 0

google maps أريد عندما اضغط على اى مكان فى الخريطة فان ال marker يذهب ويقف عليها .. كيف افعل هذا

أحمد عبد الله2

السؤال

انا استطيع فتح الخريطة ووضع الماركر عليها ولكنى الان اريد ان احرك الماركر واضعه فى المكان الذى قمت بالضغط عليه فى الخريطة .. كيف افعل ذلك ؟؟

هذا هو الكود

import React from 'react';
import {StyleSheet, View, Text, Image, Button} from 'react-native';
import MapView, {Callout, Marker} from 'react-native-maps';

const BasicMapViewEX = () => {
  const region = {
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.015,
    longitudeDelta: 0.0121,
  };

  const [Location, setLocation] = React.useState(region);
  const [MarkerLocation, setMarkerLocation] = React.useState(region);

  function handleRegionChange(region) {
    setLocation(region);
    setMarkerLocation(region);
  }

  return (
    <View>
      <MapView
        onRegionChangeComplete={handleRegionChange}
        initialRegion={region}
        style={styles.map}
        region={Location}>
        <Marker
          coordinate={MarkerLocation}
          image={require('./map_marker.png')}
          style={styles.image}
          // title="my location"
          // description="here am i"
        >
          <Callout tooltip>
            <View>
              <View style={styles.bubble}>
                <Text style={styles.name}>"my location"</Text>
                <Text style={styles}>Desc</Text>
                <Image
                  style={styles.image}
                  height={120}
                  width={80}
                  source={require('./map_marker.png')}
                />
              </View>
              <View style={styles.arrowBorder} />
              <View style={styles.arrow} />
            </View>
          </Callout>
        </Marker>
      </MapView>
    </View>
  );
};

const styles = StyleSheet.create({
  map: {
    height: '100%',
  },
  bubble: {
    flexDirection: 'column',
    alignSelf: 'flex-start',
    backgroundColor: '#fff',
    borderRadius: 6,
    borderColor: '#ccc',
    borderWidth: 0.5,
    padding: 15,
    width: 150,
  },
  arrow: {
    backgroundColor: 'transparent',
    borderColor: 'transparent',
    borderTopColor: '#fff',
    borderWidth: 16,
    alignSelf: 'center',
    marginTop: -32,
  },
  arrowBorder: {
    backgroundColor: 'transparent',
    borderColor: 'transparent',
    borderTopColor: '#007a87',
    borderWidth: 16,
    alignSelf: 'center',
    marginTop: -0.5,
  },
  name: {
    fontSize: 16,
    marginBottom: 5,
  },
  image: {
    width: 120,
    height: 80,
    backgroundColor: 'red',
  },
});
export default BasicMapViewEX;

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

ما عليك سوى جعل الماركر Draggable كالتالي 

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable:true,
    title:"Drag me!"
});

و من هنا يمكنك أضافة EventListener  للعلامة يقوم مثلا بطباعة القيمة كالتالي 

marker.addListener('dragged', printMarkerLocation);

function printMarkerLocation(){
    console.log('Lat: ' + marker.position.lat() + ' Lng:' + marker.position.lng() );}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...