Visual Studio Visual Studio MVC asp.NET 谷歌地图

Question

如何在我创建的地图上显示标记？ .Marker("1.2233424, 4.865876) 对我不起作用？

@using Jmelosegui.Mvc.GoogleMap
<div class="row">
     <div class="col-md-12">
          @(Html.GoogleMap()
             .Name("map")
             .Height(400)
             .Width(700)
           )
     </div>
</div>

Answer 1

为了在同一张地图上获得多个标记，您需要使用 bounds 方法。此示例使用 javascript。

HTML

<div itemprop="map" id="googleMap" style="height:400px;width:100%;"></div>


                <script src="https://maps.googleapis.com/maps/api/js"></script>

Javascript

var myCenter = new google.maps.LatLng(YourLat, YourLng);
var myCenter2 = new google.maps.LatLng(YourSecondLat, YourSecondLng);

function initialize() {
    var bounds = new google.maps.LatLngBounds(myCenter, myCenter2);
    var mapProp = {
        zoom: 12,
        scrollwheel: false,
        draggable: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

    var marker = new google.maps.Marker({
        position: myCenter,
        map: map,
    });
    var marker2 = new google.maps.Marker({
        position: myCenter2,
        map: map,
    })
    map.fitBounds(bounds);
}

google.maps.event.addDomListener(window, 'load', initialize);

map.fitBounds(bounds) 只会在标记之间居中地图，因此所有标记都将显示在屏幕上。

Answer 2

你的语法是错误的。你需要使用

.Markers(m => m.Add().Title("Hello World!"))

查看the documentation了解更多信息

Answer 3

您需要添加.Center(c => c.Latitude(1.2233424).Longitude(4.865876))

Html.GoogleMap()
            .Name("map")
            .Height(300)
            .Center(c => c.Latitude(1.2233424)
                          .Longitude(4.865876))
            .Markers(m => m.Add().Title("Hello World!"))

来源：jmelosegui docs