地图加载时如何设置点击标记

问题描述

我制作了一个 MapBox 来获取 Gmaps 的当前坐标：

mapBoxgl.accesstoken ='pk.eyJ1IjoibW5hdWZhbGF6a2lhIiwiYSI6ImNrcWV4MzN0ZDA2NjQyd2xrazhhbG96eHMifQ.3R_B2O8m_CQ_tERmmji8mA';
    var map = new mapBoxgl.Map({
        container: 'map',style: 'mapBox://styles/mapBox/streets-v11',center: [107.138013,-6.814071],zoom: 13,});
    
    // Add the control to the map.
    var geocoder = new MapBoxGeocoder({
        accesstoken: mapBoxgl.accesstoken,marker: false,mapBoxgl: mapBoxgl
    });

document.getElementById('geocoder').appendChild(geocoder.onAdd(map));


geocoder.on('result',function(r) {
    document.getElementById("maps").value = r.result.center;
    var reverse = document.getElementById("maps").value;
    reverse = reverse.split(",");
    var latitude = reverse[1];
    var longitude = reverse[0];
    document.getElementById("maps").value = latitude + "," + longitude;
  
    var marker1 = new mapBoxgl.Marker({ draggable: false,color: "blue" })
    .setLngLat(r.result.center)
    .addTo(map);
    map.flyTo({
    center: r.result.center,zoom:15,speed:5,});
    map.on('click',function(e) {
            var coordinates = e.lngLat;
        var popup = new mapBoxgl.Popup()
        .setLngLat(coordinates)
        .setHTML('MapBox Coordinate<br/>' + coordinates)
        .addTo(map);
        marker1.setLngLat(coordinates)
        marker1.setPopup(popup)
        map.flyTo({
        center: coordinates,});
      document.getElementById("maps").value = coordinates;
      var lokasi = $('#maps').val().replace(/[^0-9,.-]/ig,"");
      $('#maps').val(lokasi);
      var reverse = document.getElementById("maps").value;
      reverse = reverse.split(",");
      var latitude = reverse[1];
      var longitude = reverse[0];
      document.getElementById("maps").value = latitude + "," + longitude;
          });
});

$('#modalrubahlokasi').on('shown.bs.modal',function() {
    map.resize();
});

document.querySelector('.mapBoxgl-ctrl-geocoder input').placeholder = "Search Location Here";

这是codepen链接： https://codepen.io/mnaufalazkia/pen/wvdwmoY

但是在我先搜索位置之前点击地图时我无法设置标记。

但我已经尝试了 map.on('load' 功能 并添加 map.on('click' 地图加载功能用于设置标记，但无法正常工作。但是当我先搜索位置并单击地图时，标记正常工作。

当我点击地图时，有人可以帮助我添加标记，就像我首先搜索位置时一样，但当然删除之前的标记。谢谢

解决方法

以下许多建议来自对这些资源的重组：

您可以通过在地图初始化后独立于 Resources: sampleApplication: Type: AWS::ElasticBeanstalk::Application Properties: Description: AWS Elastic Beanstalk Sample Application sampleApplicationVersion: Type: AWS::ElasticBeanstalk::ApplicationVersion Properties: ApplicationName: Ref: sampleApplication Description: AWS ElasticBeanstalk Sample Application Version SourceBundle: S3Bucket: !Sub "elasticbeanstalk-ap-south-1-182107200133" S3Key: TravelTouch/Dockerrun.aws.json MyRepository: Type: AWS::ECR::Repository Properties: RepositoryName: "182107200133.dkr.ecr.ap-south-1.amazonaws.com/socialbox" sampleConfigurationTemplate: Type: AWS::ElasticBeanstalk::ConfigurationTemplate Properties: ApplicationName: Ref: sampleApplication Description: AWS ElasticBeanstalk Sample Configuration Template OptionSettings: - Namespace: aws:autoscaling:asg OptionName: MinSize Value: '2' - Namespace: aws:autoscaling:asg OptionName: MaxSize Value: '6' - Namespace: aws:elasticbeanstalk:environment OptionName: EnvironmentType Value: LoadBalanced - Namespace: aws:autoscaling:launchconfiguration OptionName: IamInstanceProfile Value: !Ref MyInstanceProfile SolutionStackName: 64bit Amazon Linux 2018.03 v2.26.0 running Multi-container Docker 19.03.13-ce (Generic) sampleEnvironment: Type: AWS::ElasticBeanstalk::Environment Properties: ApplicationName: Ref: sampleApplication Description: AWS ElasticBeanstalk Sample Environment TemplateName: Ref: sampleConfigurationTemplate VersionLabel: Ref: sampleApplicationVersion MyInstanceRole: Type: AWS::IAM::Role Properties: AssumeRolePolicyDocument: Version: 2012-10-17 Statement: - Effect: Allow Principal: Service: - ec2.amazonaws.com Action: - sts:AssumeRole Description: Beanstalk EC2 role ManagedPolicyArns: - arn:aws:iam::aws:policy/AWSElasticBeanstalkWebTier - arn:aws:iam::aws:policy/AWSElasticBeanstalkMulticontainerDocker - arn:aws:iam::aws:policy/AWSElasticBeanstalkWorkerTier Policies: - PolicyName: AllowGetAuthorizationToken PolicyDocument: | { "Version": "2012-10-17","Statement": [ { "Sid": "ECSAccess","Effect": "Allow","Action": [ "ecr:GetAuthorizationToken",],"Resource": "*" } ] } MyInstanceProfile: Type: AWS::IAM::InstanceProfile Properties: Roles: - !Ref MyInstanceRole 向地图添加标记来实现在搜索位置之前单击地图时设置标记：

geocoder

然后您可以处理 map.on('click',function add_marker (event) { var coordinates = event.lngLat; console.log('Lng:',coordinates.lng,'Lat:',coordinates.lat),'id',event.id; marker.setLngLat(coordinates).addTo(map); // Ensure that if the map is zoomed out such that multiple // copies of the feature are visible,the popup appears // over the copy being pointed to. while (Math.abs(event.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += event.lngLat.lng > coordinates[0] ? 360 : -360; } var popup = new mapboxgl.Popup({ offset: 35 }) .setLngLat(coordinates) .setHTML('MapBox Coordinate<br/>' + coordinates) .addTo(map) }) 中的弹出窗口，以便在您点击离开时关闭。此处无需再次调用 geocoder。

map.on('click')

这是 jsfiddle 中的一个工作示例：https://jsfiddle.net/jameslcarpino/gchsvoxL/1/

javascript jquery mapbox mapbox mapbox-gl-js mapbox-marker

地图加载时如何设置点击标记 - Mapbox GLJS

问题描述

解决方法

相关问答