自定义信息窗体 ios 没有效果 about react-native-amap3d HOT 20 CLOSED

实现了的

from react-native-amap3d.

发现几个问题
1、标注点如果使用的是自定义图片的话 显示的模糊。原图没有问题
2、自定义信息 安卓上面显示正常，ios 则还是显示title
3、自定义标注点第二次更新的时候才会显示，即第二次添加相同key的标点的时候才显示

使用的是这个版本react-native-amap3d-0.2.0-alpha.5

from react-native-amap3d.

这两行代码报错。
方便的话 可以加个QQ359875450 呵呵

from react-native-amap3d.

图片模糊的问题，你的图片要提供 2x、3x 的版本，或者你指定 image 的 width 和 height，让图片缩放，默认大小肯定会模糊的。

如果方便的话，直接贴下你的代码，我好亲自试试。

现在不方便用 QQ。

from react-native-amap3d.

第三个问题，确实是存在的，因为不知道 View 里面的 Image 什么时候加载完毕。

from react-native-amap3d.

采用x2 x3 图标以后 正常了 但是又发现了一个问题，就是循环添加标注点的时候发现 安卓平台 中 第一个标注点显示正常 后面的都变小了。ios 需要点击两次 添加标注点才会显示出来

from react-native-amap3d.

ios 需要点击两次 添加标注点才会显示出来

目前确实是个问题，需要解决。

Android Marker 图标变小的问题比较奇怪，不过我还是建议你给 Image 设置大小。

from react-native-amap3d.

我刚发布了 0.2.0-alpha.7 虽然可能并不能解决什么问题，但建议你试下。

from react-native-amap3d.

自定义信息窗体无法显示的问题还有吗？我用新项目测试，并没有不能显示的问题。

from react-native-amap3d.

恩 我试一下，建议添加一些 轨迹播放的 功能，这个用的还是比较多的

from react-native-amap3d.

刚刚还发现了一个问题，地图上添加了标注点 然后最小化app 再次唤醒的时候有可能标注点的图片不见了。应该是图片资源所占用的内存被回收了。

from react-native-amap3d.

报错 MACustomCalloutView 这个文件找不到。这个应该是 显示自定义信息的类。你那里可以显示应该是你那里有这个文件吧。 //mapView.runLoopMode = NSDefaultRunLoopMode; 这一行代码错误。

from react-native-amap3d.

基本可以确定是高德地图 SDK 没有正确配置，MAAnnotationView 是肯定有 customCalloutView 的：

from react-native-amap3d.

地图上添加了标注点 然后最小化app 再次唤醒的时候有可能标注点的图片不见了 ，目前这个问题 仍然存在。这个问题是否可以解决一下呢？

from react-native-amap3d.

主要是我并没有能重现这个问题

from react-native-amap3d.

就是动态添加的 标注点，你要用自定义的图标。比如我这里点击标注点以后 然后按home键 app到后台运行，然后再打开app 图标就不见了，一般要缩小到后台运行2分钟左右 再打开 图标就不见了。ios10.3
给你参考一下代码

'use strict';

import React, {
Component,
PropTypes
} from 'react';
import {
View,
StyleSheet,
ScrollView,
Dimensions,
Text,
Image
} from 'react-native';

import {
Theme,
NavigationPage,
NavigationBar,
ListRow,
Button
} from 'teaset';

import {
MapView,
Marker,
Overlay,
Polyline
} from 'react-native-amap3d'
const { width, height } = Dimensions.get('window');

const ASPECT_RATIO = width / height;
const LATITUDE = 39.91095;
const LONGITUDE = 116.37296;
const MARKERS_LATITUDE_DELTA = 0.03;
const MARKERS_LONGITUDE_DELTA = MARKERS_LATITUDE_DELTA * ASPECT_RATIO;
const MAP_LATITUDE_DELTA = 0.3;
const MAP_LONGITUDE_DELTA = MAP_LATITUDE_DELTA * ASPECT_RATIO;
const NUM_MARKERS = 5;

export default class Home extends NavigationPage {

static defaultProps = {
    ...NavigationPage.defaultProps,
    title: '定位监控',
};

constructor(props) {
    super(props);
    this.state = {
        mapType: "standard",
        markers: [],
    };
}

addMarkers() {
   
    const markers = [];
        for (let i = 1; i < NUM_MARKERS; i++) {
            markers.push({
                title: `marker${i}`,
                latlng: {
                    latitude: (((Math.random() * 2) - 1) * MARKERS_LATITUDE_DELTA) + LATITUDE,
                    longitude: (((Math.random() * 2) - 1) * MARKERS_LONGITUDE_DELTA) + LONGITUDE,
                },
                id: i,
            });
        }

        this.setState({ markers });

}

renderPage() {
    return (
        <View style={{ flex: 1 }}>
            <View style={styles.searchContainer}>
                <Button title='添加标注点' onPress={() => this.addMarkers()} style={{ marginTop: 5 }} />
            </View>
            <MapView
                style={{ flex: 1 }}
                showsLocationButton={true}
                mapType={this.state.mapType}
                coordinate={
                    {
                        latitude: 39.91095,
                        longitude: 116.37296,
                    }
                }>
                {
                    this.state.markers.map((marker, index) => {
                        return (
                            <Marker
                                key={`marker${index}`}
                                title={marker.title}
                                coordinate={marker.latlng}

                                icon={() =>
                                    <Image source={require('../images/marker/75_online/1.png')} />
                                }
                            >
                            </Marker>
                        )

                    })
                }


            </MapView>
        </View>
    );
}

}

const styles = StyleSheet.create({

searchContainer: {
    position: 'absolute',
    height: 160,
    width: width,
    zIndex: 9999,
    borderColor: '#c8c7cc',
    backgroundColor: '#fff',
    opacity: 0.8
}

})

from react-native-amap3d.

试了，并没有出现问题，用的模拟器，晚些时候我再试试真机

from react-native-amap3d.

我用的是真机，
我改了一下代码为

_marker = (AMapOverlay *) subview;
_marker.delegate = self;
_annotationView = [[MAAnnotationView alloc] initWithAnnotation:_annotation reuseIdentifier:nil];
_annotationView.image = [UIImage imageNamed:@"flag-pink.png"];
_annotationView.centerOffset = CGPointMake(0, -50 / 2);

这样子就不会出现被回收的情况。
但是图片的路径 目前不知道怎么把RN的路径（require('../images/marker/75_online/1.png')）转化为 这样子的

from react-native-amap3d.

require 是不能直接用，如果只是为了使用 ios 本地图片倒还简单，但这样的接口暂作保留。

我再看了下 react-native-maps 的代码，有一种方法我还没没尝试过，或许能一并解决上面的问题。

from react-native-amap3d.

@hhahh2011 我换了另一种方式来实现 Marker，应该可以解决上面的问题。

from react-native-amap3d.