Question

有人知道如何编辑代码以在地图上显示多个标记吗？

DisplayMap(){

  const location = new google.maps.LatLng('1.330110','103.854800');

  const options = {
    center:location,
    zoom:10,
    streetViewControl:false,
    mapTypeId:'satellite'

  };

  const map = new google.maps.Map(this.mapRef.nativeElement,options);

  this.addMarker(location,map);
}


addMarker(position,map){
  return new google.maps.Marker({
    position,
    map
  });
}

Answer 1

我想您将来会使用JSON文件在地图上添加越来越多的标记。因此，此答案可以在需要时留在这里。
首先，如果您在.NET项目中使用此方法，则可以从控制器端调用方法，然后使用返回的数据在地图上添加标记；

但是请记住，在使用ajax之前，必须将jQuery添加到页面中才能使用 AJAX

$.ajax({
type:'GET',
url:'ControllerName/ActionName', // or you could specify an unique route from the routeconfig and use it
dataType: 'json',
success: function (data){
    // the data will be your json file, to use it in an array format
    // use JSON.parse(data)
    let resultArray = JSON.parse(data);
        for(let i = 0; i < resultArray.length; i++){
            var marker = new google.maps.Marker({
                  position: new google.maps.LatLng(resultArray[i].LATITUDE,
                      resultArray[i].LONGITUDE),
                  map: map
            });
        }
    }
});

您的控制器应如下所示；

[HttpGet]
public JsonResult GetAgencies()
{
    using (StreamReader reader = new StreamReader(@"yourJsonFilePath"))
    {
        return Json(reader.ReadToEnd(), JsonRequestBehavior.AllowGet);
    }
}

或者您可以使用无需jQuery即可使用的fetch方法；

fetch(jsonUrl).then(function (response) {
        response.json().then(function (results) {
        for(let i = 0; i < results.length; i++){
            var marker = new google.maps.Marker({
                  position: new google.maps.LatLng(results[i].LATITUDE,
                      results[i].LONGITUDE),
                  map: map
            });
        }
   });
});

Answer 2

要添加其他标记，请首先创建第二个位置// init properties var newPanel = new Panel { Name="Panel1", BackColor = Color.Green, Location = new Point(0, 0), // set the starting point Width = 100, Height = 100 }; Controls.Add(newPanel);，然后为该位置const location2 = google.maps.LatLng('1.328120', '103.849639')添加新标记。请参见下面的代码：

this.addMarker(location2, map)

希望这会有所帮助！

在Ionic 3的地图上添加多个标记

2 个答案: