如何造型添加到地圖在jQuery的locationpicker-插件

Question

我使用這個非常有用的JavaScript插件來讓用戶選擇在谷歌地圖的一個點

https://github.com/Logicify/jquery-locationpicker-plugin

http://logicify.github.io/jquery-locationpicker-plugin/

不幸的是，地圖不是可定製的，並且已經獲得了默認樣式。看着js（未縮小），很明顯，代碼使用的是Google地圖，而且它並不複雜。

我想知道是否有一種方法使用標準樣式對象

https://developers.google.com/maps/tutorials/customizing/styling-the-base-map

已具備了造型將值得在github上回購

Answer 1

每the documentation分支樣式的地圖，你可以像這樣訪問本地google.maps.Map對象：

var mapContext = $('#us3').locationpicker('map'); 

這是參考erence到google.maps.Map：

mapContext.map 

一旦你的參考，您可以設置地圖的樣式屬性：

mapContext.map.set('styles', [ 
    { 
    stylers: [ 
     {hue: '#890000'}, 
     {visibility: 'simplified'}, 
     {gamma: 0.5}, 
     {weight: 0.5} 
    ] 
    }, 
    { 
    elementType: 'labels', 
    stylers: [{visibility: 'off'}] 
    }, 
    { 
    featureType: 'water', 
    stylers: [{color: '#890000'}] 
    } 
]); 

proof of concept fiddle

代碼片段：

var locationPickerRef = $('#us3').locationpicker({ 
 
    location: { 
 
    latitude: 40.7127837, 
 
    longitude: -74.0059413 
 
    }, 
 
    radius: 300, 
 
    inputBinding: { 
 
    latitudeInput: $('#us3-lat'), 
 
    longitudeInput: $('#us3-lon'), 
 
    radiusInput: $('#us3-radius'), 
 
    locationNameInput: $('#us3-address') 
 
    }, 
 
    enableAutocomplete: true 
 
}) 
 
var mapContext = $('#us3').locationpicker('map'); 
 
mapContext.map.set('styles', [{ 
 
    stylers: [{ 
 
    hue: '#890000' 
 
    }, { 
 
    visibility: 'simplified' 
 
    }, { 
 
    gamma: 0.5 
 
    }, { 
 
    weight: 0.5 
 
    }] 
 
}, { 
 
    elementType: 'labels', 
 
    stylers: [{ 
 
    visibility: 'off' 
 
    }] 
 
}, { 
 
    featureType: 'water', 
 
    stylers: [{ 
 
    color: '#890000' 
 
    }] 
 
}]); 
 

 
console.log(locationPickerRef);

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css" rel="stylesheet" /> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<script src="https://cdn.rawgit.com/Logicify/jquery-locationpicker-plugin/master/dist/locationpicker.jquery.js"></script> 
 
<div class="form-horizontal" style="width: 550px"> 
 
    <div class="form-group"> 
 
    <label class="col-sm-2 control-label">Location:</label> 
 

 
    <div class="col-sm-10"> 
 
     <input type="text" class="form-control" id="us3-address" /> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label class="col-sm-2 control-label">Radius:</label> 
 

 
    <div class="col-sm-5"> 
 
     <input type="text" class="form-control" id="us3-radius" /> 
 
    </div> 
 
    </div> 
 
    <div id="us3" style="<width:></width:> 550px; height: 400px;"></div> 
 
    <div class="clearfix">&nbsp;</div> 
 
    <div class="m-t-small"> 
 
    <label class="p-r-small col-sm-1 control-label">Lat.:</label> 
 

 
    <div class="col-sm-3"> 
 
     <input type="text" class="form-control" style="width: 110px" id="us3-lat" /> 
 
    </div> 
 
    <label class="p-r-small col-sm-2 control-label">Long.:</label> 
 

 
    <div class="col-sm-3"> 
 
     <input type="text" class="form-control" style="width: 110px" id="us3-lon" /> 
 
    </div> 
 
    </div> 
 
    <div class="clearfix"></div> 
 
</div>