Question

我正在尝试创建一个应用程序，该应用程序显示包含当前位置标记的地图以及与服务器中数据相关的几个标记，该位置关闭到当前位置。到目前为止，我可以渲染地图，显示当前位置并获取与此位置相关的数据。当我尝试添加有关此数据位置的标记时，会出现问题。我阅读了很多论坛和网页，但我找不到任何解决方案。我使用这段代码添加标记（尝试添加它们）。

var marker = new google.maps.Marker({
                    map: map._map,
                    position: new google.maps.LatLng(bookletMarker[i].location[1],bookletMarker[i].location[0]),
                    title : bookletMarker[i].title,
                    draggable:false,
                    icon: "point.png"
                });

Answer 1

//此代码渲染一个包含2个点的地图，并显示从A点到B点的路线

//在地图上渲染

onMapMaprender: function(map, gmap, eOpts) {



    var record = Ext.getCmp('Panel').getData();
    var map = Ext.ComponentQuery.query('#LocationMap')[0].getMap();
    var polyline = new google.maps.Polyline();
    var markerImage = new google.maps.MarkerImage(
    'marker.png',
    new google.maps.Size(32, 31),
    new google.maps.Point(0, 0),
    new google.maps.Point(16, 31)
    );


    var lat = record.data.latitude;
    var lon = record.data.longitude;
    console.log(lat,lon);

    var destinationMarker = new google.maps.Marker({
        icon: markerImage,
        position: new google.maps.LatLng(lat,lon),
        title : 'destination',
        map: map,
    })
    var latSrc = localStorage.getItem('lat');
    var lonSrc = localStorage.getItem('lon');
    var sourceMarker = new google.maps.Marker({
        icon: markerImage,
        position: new google.maps.LatLng(latSrc,lonSrc),
        title : 'source',
        map: map,
    })


    function dir_callback(a,b){
        g=a;
        route_no=0;
        if(b=="OK"){
            var polyarr = a.routes[route_no].overview_path;
            polyline.setPath(polyarr);
            polyline.setMap(map);
        }
    }

    var dirS = new google.maps.DirectionsService();

    var req = {
        origin: sourceMarker.getPosition(),
        destination: destinationMarker.getPosition(),
        travelMode: google.maps.DirectionsTravelMode.DRIVING,
        provideRouteAlternatives : true
    };
    dirS.route(req,dir_callback);

},

//设置地图

var cr = new google.maps.LatLng（lat，lon）; Ext.getCmp（ 'LocationMap'）setMapCenter（CR）。

Answer 2

您应该可以使用getMap（）从地图中获取地图实例，然后按照google地图api文档中的说明添加指针：

marker.setMap(map);

Answer 3

您可以使用map.getMap()获取Google地图实例，并在创建标记时使用它。

Answer 4

在这里，您已直接添加了图标图像路径，而是使用MarkerImage对象，如下所示，

var imageIcon = new google.maps.MarkerImage(
            "point.png",
            new google.maps.Size(32, 32),
            new google.maps.Point(0, 0),
            new google.maps.Point(16, 31)
        );

var marker = new google.maps.Marker({
                map: map._map,
                position: new google.maps.LatLng(bookletMarker[i].location[1],bookletMarker[i].location[0]),
                title : bookletMarker[i].title,
                draggable:false,
                icon: imageIcon 
            });

将标记添加到Sencha Touch中的Ext.Map

4 个答案: