javascript - 在 ionic 3 的 map 上添加多个标记

Question

有谁知道如何编辑代码以在 map 上显示多个标记？

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 文件在 map 上添加越来越多的标记。所以这个答案可以留在这里，以备不时之需。
首先，如果您在 .NET 项目中使用它，您可以从 Controller 端调用方法并使用返回的数据在 map 上添加标记；

But remember you must add jQuery into the page before using ajax to be able to use 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
            });
        }
    }
});

你的 Controller 应该是这样的；

[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
            });
        }
   });
});