如何解决地图加载时如何设置点击标记 - Mapbox GLJS
我制作了一个 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' 地图加载功能用于设置标记,但无法正常工作。但是当我先搜索位置并单击地图时,标记正常工作。
当我点击地图时,有人可以帮助我添加标记,就像我首先搜索位置时一样,但当然删除之前的标记。谢谢
解决方法
以下许多建议来自对这些资源的重组:
- https://github.com/mapbox/mapbox-gl-js/issues/9209
- https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker#remove
- https://docs.mapbox.com/mapbox-gl-js/example/popup/
- https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker-example
- https://docs.mapbox.com/mapbox-gl-js/example/popup-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/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。