Question

我是NativeScript的新手，我使用Mapbox玩地图。

我希望在点击按钮时以编程方式添加标记来映射。

XML

` <Button text="GET" tap="getRequest" />   <<<-- BUTTON!
  <ContentView>
    <map:MapboxView  
        accessToken= token
        mapStyle="streets"
        zoomLevel="13"
        showUserLocation="false" 
        disableRotation= "true"
        disableTilt="false"
        mapReady="onMapReady">
   </map:MapboxView>
</ContentView>`

JS

`function onMapReady(args) {

  args.map.addMarkers([
        {
              id: 1,
              lat: -35.30505050,
              lng: -47.56263254,
              title: 'Company 1', // no popup unless set
              subtitle: 'Subt 1',
              iconPath: 'markers/green_pin_marker.png',
              onTap: function () { console.log("'Nice location' marker tapped"); },
              onCalloutTap: function () {
                    console.log("'Nice location' marker callout tapped");
                    console.log(lati + long);
              }
        }
  ]).then(
        function (result) {
              console.log("Mapbox addMarkers done");
        },
        function (error) {
              console.log("mapbox addMarkers error: " + error);
        })  
  }
exports.onMapReady = onMapReady;`

该代码工作正常，标记ID 1出现在地图上。

我的问题是：如何从响应点击按钮的功能中添加其他标记：

exports.getRequest = function () {
        console.log("BUTTON TAPPED!");
        args.map.addMarkers([
            {
                id: 2,
                lat: -35.30586500,
                lng: -47.56218500,
                title: 'Company 2', // no popup unless set
                subtitle: 'Subt 2',
                iconPath: 'markers/green_pin_marker.png',
                onTap: function () { console.log(" marker tapped"); },
                onCalloutTap: function () {
                    console.log("marker callout tapped");
                    console.log(lati + long);
                }
            }
        ]).then(
            function (result) {
                console.log("Mapbox addMarkers done");
            },
            function (error) {
                console.log("mapbox addMarkers error: " + error);
            })        
}

点击按钮时，控制台显示消息BUTTON TAPPED！，但地图上没有新的mapker ID 2.

我做坏事还是伪造了什么？

Answer 1

嗯，这是插件回购的自述文件：https://github.com/EddyVerbruggen/nativescript-mapbox/tree/26019957e4e3af3e737d7a44c845f5d5b1bfb808#addmarkers

所以这是一个JavaScript示例，但您可以查看repo also has a TypeScript-based demo app with an 'add markers' button：

var mapbox = require("nativescript-mapbox");

var onTap = function(marker) {
  console.log("Marker tapped with title: '" + marker.title + "'");
};
var onCalloutTap = function(marker) {
  alert("Marker callout tapped with title: '" + marker.title + "'");
};

mapbox.addMarkers([
  {
    id: 2, // can be user in 'removeMarkers()'
    lat: 52.3602160, // mandatory
    lng: 4.8891680, // mandatory
    title: 'One-line title here', // no popup unless set
    subtitle: 'Infamous subtitle!',
    // icon: 'res://cool_marker', // preferred way, otherwise use:
    icon: 'http(s)://website/coolimage.png', // from the internet (see the note at the bottom of this readme), or:
    iconPath: 'res/markers/home_marker.png',
    selected: true, // makes the callout show immediately when the marker is added (note: only 1 marker can be selected at a time)
    onTap: onTap,
    onCalloutTap: onCalloutTap
  },
  {
    // more markers..
  }
])

Answer 2

我也不能将Mapbox用作const / var ...或以编程方式执行任何操作。我得到undefined不是一个函数，但是Mapbox to log会产生模块及其对象。我可以在prototype:Mapbox等

下看到相应的功能

仅以XML格式声明地图并使用MapOnReady功能对我有用。

更新：我在{N}话语中偶然发现了这个帮助我理解的话题： https://discourse.nativescript.org/t/adding-mapbox-to-layout-container/4679/11

基本上，构建地图的编程方式仍然不允许在渲染后与地图进行交互。您只需声明git示例中显示的所有地图选项，然后仍然使用onMapReady作为函数来添加标记，折线等...当然，您仍然可以设置地图侦听器。

NativeScript：onMapReady之外的addMarkers

2 个答案: