0

我是 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!，但地图上没有新的映射器 ID 2。

我做错了还是忘记了什么？

4

2 回答 2

2

好吧，它在插件 repo 的自述文件中：https ://github.com/EddyVerbruggen/nativescript-mapbox/tree/26019957e4e3af3e737d7a44c845f5d5b1bfb808#addmarkers

这是一个 JavaScript 示例，但该repo 也有一个基于 TypeScript 的演示应用程序，带有一个“添加标记”按钮，您可以查看：

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..
  }
])
于 2018-01-18T15:43:51.913 回答
0

我也不能Mapbox用作 const/var... 或以编程方式做任何事情。我得到 undefined is not a function，但 Mapbox 记录产生模块及其对象。prototype:Mapbox我可以在etc下看到相应的功能。

只有在 XML 中声明地图并使用该MapOnReady函数对我有用。

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

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

于 2018-05-26T02:01:06.770 回答